@charset "UTF-8";
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:14px;color:#383838;background:#fbfbfb;font-synthesis:none;--ink:#383838;--muted:#909090;--line:#e9e9e9;--green:#626262}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none}button:hover:not(:disabled){background-color:#f2f2f2}button:disabled{opacity:.3;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #9d9d9d;outline-offset:4px}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.icon{height:19px;width:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.app-header{height:72px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);padding:0 34px;background:#ffffff;position:relative;z-index:10}.brand{font-size:26px;font-weight:650;letter-spacing:-1.3px;display:flex;align-items:center;gap:9px;flex-shrink:0}.brand-mark{display:grid;place-items:center;height:31px;width:31px;background:#626262;border-radius:10px}.brand-mark svg{width:26px;fill:none;stroke:#f8f8f8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.breadcrumbs{display:flex;gap:11px;align-items:center;min-width:0;flex:1;font-size:12px;color:#959595}.breadcrumbs a:hover{color:#4f4f4f}.breadcrumbs b{font-weight:450;color:#494949;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:220px}.breadcrumbs .icon{width:12px;height:12px;color:#c2c2c2}.breadcrumbs a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.local-label{font-size:11px;color:#999999;display:flex;align-items:center;gap:7px;margin-left:auto;white-space:nowrap}.local-label i{height:5px;width:5px;background:#9c9c9c;border-radius:50%}.avatar{height:32px;width:32px;display:grid;place-items:center;border-radius:50%;background:#eeeeee;color:#828282;font-size:12px;flex-shrink:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;min-height:41px;border-radius:7px;font-size:12px;font-weight:500;white-space:nowrap}.button .icon{width:17px;height:17px}.button.primary{background:#505050;color:#ffffff}.button.primary:hover{background:#464646}.button.light{background:#ffffff;border:1px solid #e3e3e3}.button.light:hover{background:#f6f6f6}.icon-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px}.icon-button .icon{width:17px;height:17px}.catalog{max-width:1190px;margin:0 auto;padding:65px 44px 40px}.page-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:40px}.page-top h1{font-size:35px;line-height:1.2;letter-spacing:-1.1px;font-weight:520;margin:0 0 12px}.page-top p{color:#929292;line-height:1.6;font-size:13px;margin:0}.page-actions{display:flex;align-items:center;gap:12px}.search-field{border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;padding:0 11px;gap:8px;background:#ffffff}.search-field .icon{width:16px;height:16px;color:#a6a6a6}.search-field input{border:0;background:transparent;padding:11px 0;outline:none;font-size:12px;width:140px;color:var(--ink)}.search-field input::placeholder{color:#a6a6a6}.collection-label{font-size:11px;color:#939393;display:flex;align-items:center;gap:8px;margin-bottom:18px}.collection-label b{color:#686868;font-weight:500;border-bottom:1px solid #858585;padding-bottom:10px;margin-bottom:-10px}.collection-line{height:1px;background:var(--line);margin-bottom:28px;margin-top:-2px}.boards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.board-card{display:block;min-width:0;text-align:left;border-radius:11px;transition:transform .18s}.board-card:hover{transform:translateY(-3px);background:transparent!important}.board-cover{height:194px;background:#ffffff;border:1px solid #e5e5e5;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}.board-card:hover .board-cover{border-color:#b7b7b7;box-shadow:0 5px 18px #48484807}.board-cover svg{height:100%;width:100%}.board-cover.intro-cover{background:#f0f0f0}.cover-tag{position:absolute;top:14px;left:14px;border:1px solid #e3e3e3;border-radius:4px;background:#ffffffbf;padding:4px 6px;font-size:8px;letter-spacing:.7px;color:#919191}.board-card h2{font-size:14px;line-height:1.4;font-weight:500;margin:17px 0 7px}.board-card p{font-size:11px;color:#9f9f9f;margin:0;line-height:1.5}.new-board-card{height:194px;border:1px dashed #dddddd;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#979797}.new-board-card .icon{height:24px;width:24px;stroke-width:1.2}.new-board-card span{font-size:12px}.new-board-card:hover{border-color:#acacac;background:#f5f5f5}.catalog-footnote{font-size:10px;color:#acacac;display:flex;align-items:center;gap:7px;margin-top:55px;padding-top:24px;border-top:1px solid #efefef}.catalog-footnote .icon{width:13px;height:13px}.board-heading{display:flex;align-items:center;gap:13px}.board-heading h1{margin-right:4px}.board-description{max-width:500px}.lesson-list{display:flex;flex-direction:column;gap:10px}.lesson-row{display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:9px;background:#ffffff;width:100%;text-align:left;padding:20px 23px;min-height:96px}.lesson-row:hover{background:#f9f9f9;border-color:#cecece}.lesson-row .lesson-number{height:46px;width:46px;background:#f3f3f3;display:grid;place-items:center;border-radius:8px;color:#9d9d9d;font-family:Georgia,serif;font-size:19px;flex-shrink:0}.lesson-row h2{font-size:15px;font-weight:500;margin:0 0 7px}.lesson-row p{font-size:11px;margin:0;color:#9e9e9e}.lesson-row .lesson-meta{margin-left:auto;color:#969696;font-size:11px;white-space:nowrap}.lesson-row>.icon{color:#afafaf;width:16px;margin-left:8px}.intro-banner{display:flex;gap:40px;align-items:center;background:#f2f2f2;border:1px solid #eaeaea;border-radius:10px;padding:30px 34px;margin-bottom:36px}.intro-banner h2{font-size:23px;font-weight:450;letter-spacing:-.5px;margin:0 0 11px}.intro-banner p{font-size:12px;color:#949494;line-height:1.9;margin:0;max-width:480px}.intro-banner>svg{width:180px;height:95px;margin-left:auto;flex-shrink:0}.features-line{display:flex;flex-wrap:wrap;gap:22px;margin:20px 0 0;color:#8a8a8a;font-size:10px}.features-line span{display:flex;align-items:center;gap:6px}.features-line .icon{width:14px;height:14px}.empty-state{border:1px dashed #e1e1e1;border-radius:10px;text-align:center;padding:65px 20px;color:#a1a1a1}.empty-state h2{font-weight:450;font-size:20px;color:#616161}.empty-state p{font-size:12px;line-height:1.8}.empty-state .button{margin-top:15px}.empty-symbol{height:46px;width:46px;background:#f0f0f0;border-radius:12px;display:grid;place-items:center;margin:0 auto;color:#9a9a9a}.empty-symbol .icon{width:22px;height:22px}.empty-search{grid-column:1/-1;padding:35px 0;color:#959595;font-size:13px}
.editor-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.editor-actions .button{min-height:35px;padding:8px 12px;font-size:11px}.small-count{font-size:10px;color:#9e9e9e;margin-left:3px}.save-status{font-size:10px;color:#a7a7a7;margin-right:10px;white-space:nowrap}.editor{height:calc(100dvh - 72px);min-height:430px;background:#fefefe;position:relative;overflow:hidden}.page-caption{position:absolute;z-index:2;top:25px;left:34px;display:flex;align-items:center;gap:11px;max-width:calc(100% - 68px);pointer-events:none}.page-caption>span{font-size:10px;color:#b2b2b2;border:1px solid #e7e7e7;border-radius:5px;padding:4px 6px}.page-caption h1{font-size:12px;font-weight:450;color:#949494;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.canvas-viewport{position:absolute;inset:68px 45px 104px;display:flex;justify-content:center;align-items:center;overflow:hidden;container-type:size}.sheet{width:min(100%,960px,calc(100cqh * var(--page-ratio,1.2)));aspect-ratio:var(--page-ratio,1.2);flex-shrink:0;transform-origin:center}.sheet>svg{width:100%;height:100%;display:block;touch-action:none;user-select:none;cursor:crosshair}.tools{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:6px;background:white;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 3px 15px #41414105;z-index:4}.tool{width:39px;height:39px;border-radius:7px;display:grid;place-items:center;color:#939393}.tool .icon{width:19px;height:19px}.tool.active{background:#efefef;color:#606060}.tool-divider{width:1px;height:20px;background:#ebebeb;margin:0 4px}.color-trigger{width:39px;height:39px;display:grid;place-items:center}.color-trigger>span{height:19px;width:19px;border:3px solid #ffffff;border-radius:50%;background:#666666;box-shadow:0 0 0 1px #dedede}.mobile-more{display:none}.canvas-footer{position:absolute;bottom:24px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.history-buttons,.task-navigation,.zoom-controls{display:flex;align-items:center;pointer-events:auto;gap:2px}.history-buttons .icon-button,.task-navigation .icon-button{width:29px;height:29px}.history-buttons .icon{width:16px}.task-navigation{position:absolute;left:50%;transform:translateX(-50%);bottom:69px;font-size:10px;color:#aaaaaa;background:#fefefeef}.task-navigation>button:not(.icon-button){font-size:10px;min-width:40px;padding:6px;border-radius:4px}.task-navigation .icon{width:13px;height:13px}.zoom-controls{gap:2px;font-size:11px;color:#a2a2a2}.zoom-controls>button{height:30px;min-width:27px;border-radius:5px;font-size:18px;display:grid;place-items:center}.zoom-controls #zoomLabel{font-size:10px;min-width:39px}.zoom-controls .icon{width:14px;height:14px;margin-left:7px}.pen-options{position:absolute;z-index:8;bottom:87px;left:calc(50% + 80px);width:183px;background:#ffffff;border:1px solid #e6e6e6;padding:17px;border-radius:10px;box-shadow:0 8px 30px #41414112}.pen-options p{margin:0 0 14px;font-size:11px}.swatches{display:flex;gap:12px}.swatches button{height:23px;width:23px;background:var(--swatch);border:3px solid #ffffff;border-radius:50%;box-shadow:0 0 0 1px #e4e4e4}.swatches button.selected{box-shadow:0 0 0 2px #aeaeae}.pen-options label{font-size:10px;color:#999999;display:block;margin-top:20px}.pen-options input{display:block;width:100%;margin-top:10px;accent-color:#7d7d7d}.empty-lesson{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px;text-align:center}.empty-lesson .empty-symbol{margin:0 0 18px}.empty-lesson h1{font-size:25px;letter-spacing:-.5px;font-weight:450;margin:0 0 12px}.empty-lesson p{font-size:12px;color:#a1a1a1;margin:0 0 25px}.task-drawer{position:absolute;z-index:9;right:16px;top:15px;bottom:15px;width:285px;background:#ffffff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 8px 35px #3f3f3f0c;overflow:auto;padding:16px}.drawer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.drawer-heading h2{font-size:13px;font-weight:500;margin:0}.task-item{display:flex;gap:12px;width:100%;padding:14px 11px;margin-bottom:7px;border:1px solid #eaeaea;border-radius:7px;text-align:left}.task-item.active{background:#f5f5f5;border-color:#cdcdcd}.task-item>span{font-size:10px;color:#a9a9a9;line-height:1.7}.task-item b{font-size:12px;font-weight:450;display:block;line-height:1.5}.task-item small{font-size:11px;color:#969696;display:block;margin-top:5px;font-family:Georgia,serif}.full-width{width:100%;margin-top:10px}.answer-button{font-size:10px;color:#979797;padding:7px 0;margin:9px 0 0;display:flex;align-items:center;gap:7px}.answer-button .icon{width:14px;height:14px}.answer-content{font-size:12px;line-height:1.7;background:#f6f6f6;color:#808080;border-radius:7px;padding:13px;margin-top:9px}
dialog{border:1px solid #e6e6e6;border-radius:15px;padding:25px;width:calc(100% - 32px);max-width:440px;box-shadow:0 25px 100px #36363622;color:var(--ink)}dialog::backdrop{background:#40404030;backdrop-filter:blur(3px)}.modal-heading{display:flex;align-items:center;justify-content:space-between}.modal-heading>span{font-size:9px;letter-spacing:2px;color:#a5a5a5}dialog h2{font-size:25px;letter-spacing:-.7px;font-weight:500;margin:20px 0 10px}dialog p{font-size:12px;color:#979797;line-height:1.9}dialog label{display:block;font-size:11px;color:#8b8b8b;margin:22px 0 8px}dialog input[type=text],dialog textarea{width:100%;padding:13px;border:1px solid #e4e4e4;border-radius:7px;background:#fbfbfb;color:var(--ink);font-size:13px}dialog textarea{min-height:100px;resize:vertical}dialog .button{margin-top:20px}dialog .form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:3px}dialog .form-actions .light{border-color:transparent}dialog .menu-item{display:flex;gap:10px;align-items:center;text-align:left;width:100%;padding:13px 8px;border-radius:6px;font-size:12px}dialog .menu-item .icon{width:16px;color:#9b9b9b}.settings-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:15px 8px}.settings-row label{font-size:12px;margin:0}.settings-row input{width:17px;height:17px;accent-color:var(--green)}.menu-note{font-size:10px!important;color:#a9a9a9!important;margin-top:23px!important}.toast{position:fixed;bottom:98px;left:50%;transform:translate(-50%,10px);opacity:0;pointer-events:none;z-index:30;background:#565656;color:#ffffff;font-size:12px;border-radius:8px;padding:12px 17px;transition:opacity .2s,transform .2s;max-width:calc(100% - 30px);text-align:center;box-shadow:0 5px 25px #3d3d3d22}.toast.visible{opacity:1;transform:translate(-50%,0)}body.editing .local-label,body.editing .avatar{display:none}
@media(min-width:1500px){.catalog{padding-top:85px}.board-cover,.new-board-card{height:215px}.page-top{margin-bottom:50px}.boards-grid{gap:30px}}
@media(max-width:1000px){.app-header{padding:0 24px;gap:22px}.catalog{padding:48px 30px 30px}.page-top h1{font-size:30px}.board-cover,.new-board-card{height:160px}.boards-grid{gap:20px}.save-status{display:none}.breadcrumbs a{max-width:135px}.breadcrumbs b{max-width:150px}.canvas-viewport{inset:65px 20px 110px}.canvas-footer{bottom:88px;left:22px;right:22px}.task-navigation{bottom:0}.tools{bottom:20px}.page-actions{gap:9px}.search-field input{width:105px}}
@media(max-width:700px){.app-header{height:62px;padding:0 18px;gap:15px}.brand{font-size:23px}.brand-mark{height:28px;width:28px;border-radius:9px}.brand-mark svg{width:24px}.breadcrumbs{font-size:11px}.breadcrumbs>span{display:none}.local-label{font-size:10px}.avatar{height:29px;width:29px}.catalog{padding:36px 22px 25px}.page-top{align-items:flex-start;flex-wrap:wrap;gap:22px;margin-bottom:30px}.page-top h1{font-size:30px;margin-bottom:9px}.page-top p{font-size:12px}.page-actions{width:100%;justify-content:space-between}.search-field{flex:1;max-width:260px}.search-field input{width:100%;min-width:0}.search-field .icon{display:none}.boards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 17px}.board-cover,.new-board-card{height:150px}.board-card h2{font-size:12px;margin-top:12px}.board-card p{font-size:10px}.cover-tag{top:9px;left:9px;font-size:7px}.intro-banner{padding:25px;gap:10px;display:block}.intro-banner h2{font-size:21px}.intro-banner>svg{display:none}.features-line{gap:14px;font-size:9px}.board-heading h1{font-size:27px}.lesson-row{padding:16px;gap:13px;min-height:89px}.lesson-row .lesson-number{width:36px;height:40px;font-size:17px}.lesson-row h2{font-size:13px}.lesson-row p{font-size:10px;line-height:1.5}.lesson-row .lesson-meta{font-size:9px}.lesson-row>.icon{width:12px;margin-left:0}.editor{height:calc(100dvh - 62px);min-height:460px}.editor-actions{gap:5px}.editor-actions .button{padding:7px 9px;font-size:10px;min-height:33px}.editor-actions #addTask>span{display:none}.editor-actions #addTask{width:33px;padding:7px}.editor-actions #toggleTasks .icon{display:none}.editor-actions .icon-button{width:29px}.editing .brand{font-size:0;gap:0}.editing .app-header{gap:12px;padding:0 13px}.editing .breadcrumbs{gap:7px;flex:1}.editing .breadcrumbs a{max-width:110px}.editing .breadcrumbs b,.editing .breadcrumbs>.icon:last-of-type{display:none}.editing .breadcrumbs .home-crumb{display:none}.editing .breadcrumbs .home-crumb+.icon{display:none}.page-caption{top:20px;left:21px;max-width:calc(100% - 42px);gap:9px}.page-caption h1{font-size:11px}.page-caption>span{font-size:9px}.canvas-viewport{inset:65px 8px 137px;align-items:flex-start;padding-top:10px}.sheet{width:min(100%,calc(100cqh * var(--page-ratio,1.2)))}.tools{padding:5px;gap:2px;bottom:max(18px,env(safe-area-inset-bottom));border-radius:11px}.tool,.color-trigger{width:39px;height:41px}.tool-divider{margin:0 2px}.extra-tool{display:none}.mobile-more{display:grid}.canvas-footer{bottom:86px;left:14px;right:14px}.zoom-controls #zoomLabel{display:none}.zoom-controls>button{min-width:25px;height:27px}.history-buttons .icon-button{width:26px}.task-navigation{bottom:0}.task-navigation>button:not(.icon-button){font-size:10px}.pen-options{bottom:80px;left:auto;right:18px}.task-drawer{width:calc(100% - 28px);max-width:330px;right:14px;top:12px;bottom:12px}.empty-lesson h1{font-size:23px}.empty-lesson p{font-size:11px}.catalog-footnote{margin-top:40px;font-size:9px}.empty-state{padding:45px 18px}.toast{bottom:90px}.board-description{font-size:11px!important}.collection-label{font-size:10px}}
@media(max-width:420px){.boards-grid{gap:23px 14px}.board-cover,.new-board-card{height:130px}.new-board-card span{font-size:11px}.catalog{padding-left:19px;padding-right:19px}.page-actions>.button{padding:10px 12px;font-size:11px}.lesson-row .lesson-meta{display:none}.features-line{gap:13px}.lesson-row h2{font-size:12px}.intro-banner{padding:21px}.breadcrumbs a{max-width:100px!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.editor .tools{top:50%;right:auto;left:18px;bottom:auto;flex-direction:column;gap:3px;padding:7px;transform:translateY(-50%);border-radius:13px;box-shadow:0 8px 35px #41414110}
.editor .tools .tool,.editor .tools .color-trigger{width:38px;height:38px}
.editor .tools .extra-tool{display:grid}.editor .tools .mobile-more{display:none}
.editor .tools .tool-divider{width:23px;height:1px;margin:4px 0}
.editor .pen-options{left:auto;right:83px;top:50%;bottom:auto;transform:translateY(-15%);z-index:8}
.editor .canvas-footer{bottom:23px}.editor .task-navigation{bottom:0}
.free-board .canvas-viewport{inset:0;align-items:stretch;padding:0}
.free-board .sheet{width:100%;height:100%;aspect-ratio:auto}
.free-board .page-caption{display:none}.free-board .canvas-footer{z-index:3}
.inline-text-editor {
  display: block;
  width: 100%;
  margin: 0;
  padding: 3px 5px;
  border: 1px solid #7893af;
  border-radius: 4px;
  outline: 0 !important;
  background: transparent;
  caret-color: currentColor;
  resize: none;
  overflow: hidden;
  line-height: 1.3;
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  touch-action: auto;
}
.inline-text-editor::placeholder { color: #87919d; font-size: .85em; }
@media(max-width:700px){.editor .tools{right:12px;padding:5px;gap:2px}.editor .tools .tool,.editor .tools .color-trigger{width:36px;height:36px}.editor .pen-options{right:68px;width:175px}.editing .breadcrumbs .free-board-name{display:block;max-width:140px}.editor-actions #addLessonQuick>span{display:none}.editor-actions #addLessonQuick{width:33px;padding:7px}.editor-actions #openLessons .icon{display:none}.editor .canvas-footer{bottom:max(18px,env(safe-area-inset-bottom))}.canvas-viewport{inset:62px 10px 62px}.free-board .canvas-viewport{inset:0}.editor .task-navigation{bottom:0}.toast{bottom:70px}}

.editor:focus{outline:none}

.eraser-options{position:absolute;z-index:9;right:83px;top:50%;transform:translateY(-50%);width:232px;padding:17px;background:#ffffff;border:1px solid #e5e5e5;border-radius:11px;box-shadow:0 8px 32px #41414112}
.eraser-options h2{font-size:12px;font-weight:500;margin:0 0 14px}
.eraser-modes{display:flex;gap:4px;padding:3px;border-radius:7px;background:#f5f5f5}
.eraser-modes button{flex:1;border-radius:5px;font-size:10px;line-height:1.4;min-height:34px;padding:7px 4px;color:#969696}
.eraser-modes button.active{color:#5b5b5b;background:#ffffff;box-shadow:0 1px 4px #3f3f3f0b}
.eraser-options label{display:flex;justify-content:space-between;font-size:10px;color:#969696;margin:20px 0 12px}
.eraser-options input{display:block;width:100%;accent-color:#7d7d7d}
.eraser-options p{font-size:9px;color:#b2b2b2;line-height:1.6;margin:15px 0 0}
.eraser-cursor{position:fixed;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box;z-index:60;border:1.5px solid #6f6f6f;background:#ffffff45;box-shadow:0 0 0 1px #ffffffd9}
.eraser-trail{position:fixed;inset:0;z-index:59;pointer-events:none;overflow:hidden}
@media(max-width:700px){.eraser-options{right:67px;width:224px}}
/* Infinite world: the SVG is the viewport; its viewBox is the camera. */
.editor .canvas-viewport{inset:0;padding:0;display:block;overflow:hidden;touch-action:none}
.editor .sheet{width:100%;height:100%;aspect-ratio:auto;transform:none!important}
.editor .sheet>svg{width:100%;height:100%;overflow:hidden}
.editor .pen-options,.editor .eraser-options{left:85px;right:auto}
.brush-color-label{display:flex!important;align-items:center;justify-content:space-between;margin:0 0 15px!important}
.brush-color-label input[type=color]{width:26px;height:26px;padding:0;margin:0;border:0;background:none;cursor:pointer}
.pen-options input[type=range]{display:block;width:100%}
#strokeWidthValue{float:right;color:#6d6d6d}
.selection-box{position:absolute;border:1px solid #aaaaaa;pointer-events:none;z-index:5;box-sizing:border-box;background:transparent}
.resize-handle{position:absolute;width:9px;height:9px;padding:0;border:1px solid #aaaaaa;background:#ffffff;border-radius:1px;pointer-events:auto;transform:translate(-50%,-50%)}
.resize-handle[data-resize=nw]{left:0;top:0;cursor:nwse-resize}.resize-handle[data-resize=ne]{left:100%;top:0;cursor:nesw-resize}.resize-handle[data-resize=sw]{left:0;top:100%;cursor:nesw-resize}.resize-handle[data-resize=se]{left:100%;top:100%;cursor:nwse-resize}.resize-handle[data-resize=n]{left:50%;top:0;cursor:ns-resize}.resize-handle[data-resize=s]{left:50%;top:100%;cursor:ns-resize}.resize-handle[data-resize=w]{left:0;top:50%;cursor:ew-resize}.resize-handle[data-resize=e]{left:100%;top:50%;cursor:ew-resize}
.object-toolbar{position:absolute;z-index:12;display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:calc(100% - 16px);padding:6px;background:#ffffff;border:1px solid #e3e3e3;border-radius:9px;box-shadow:0 5px 24px #3f3f3f0c;min-height:43px}
.object-toolbar select,.object-toolbar input[type=number]{height:29px;border:1px solid #e8e8e8;border-radius:5px;background:#fbfbfb;color:#656565;font-size:11px;padding:3px 6px;outline-offset:0}
.object-toolbar select{width:145px}.object-toolbar input[type=number]{width:53px}.object-toolbar input[type=color]{width:27px;height:27px;background:none;padding:0;border:0;cursor:pointer}
.object-toolbar label{display:flex;align-items:center;gap:4px;font-size:9px;color:#999999}.object-toolbar .icon-button{width:30px;height:29px}.object-toolbar .icon{width:16px;height:16px}.object-toolbar .rotate-label{font-size:10px;padding:7px;border-radius:5px;color:#7d7d7d;display:flex;align-items:center;gap:4px}
.object-toolbar .bar-divider{width:1px;height:20px;background:#eaeaea;margin:0 3px}.object-toolbar .active{background:#f1f1f1}
.object-toolbar.text-editing { min-height: 38px; padding: 4px; gap: 4px; }
.object-toolbar.text-editing select { width: 108px; }
.object-toolbar.text-editing input[type=number] { width: 44px; }
.object-toolbar.text-editing input[type=color] { padding: 3px; }
.object-toolbar .text-done {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 5px;
  color: #355478;
  background: #eaf0f7;
  font-size: 11px;
}
.object-toolbar .text-done:hover { background: #dce8f5; }
.angle-badge{position:absolute;pointer-events:none;z-index:4;font-size:10px;padding:4px 6px;border:1px solid #e3e3e3;border-radius:4px;background:#ffffff;color:#7b7b7b}
@media(max-width:700px){.editor .tools{left:12px;right:auto}.editor .pen-options,.editor .eraser-options{left:69px;right:auto}.object-toolbar select{width:118px}.object-toolbar{gap:4px;padding:5px}.object-toolbar .bar-divider{margin:0 1px}.object-toolbar input[type=number]{width:47px}.resize-handle{width:12px;height:12px}.object-toolbar .rotate-label{font-size:9px;padding:6px}}

.object-toolbar{width:max-content}

/* Selection stays in screen space while object bounds live in the infinite world. */
.marquee{position:absolute;z-index:6;border:1px solid #a0a0a0;background:#b0b0b01a;pointer-events:none;box-sizing:border-box}
.selection-box.group-selection{pointer-events:auto;cursor:move}
.eraser-trail{width:100%;height:100%;display:block}
.pen-options .shape-assist-label{display:flex;align-items:center;gap:7px;font-size:10px;line-height:1.4;margin-top:17px}
.pen-options .shape-assist-label input{display:inline-block;flex:0 0 auto;width:13px;height:13px;margin:0}

.shape-options{position:absolute;z-index:15;left:85px;top:50%;transform:translateY(-50%);width:320px;max-width:calc(100% - 101px);max-height:calc(100% - 24px);overflow-y:auto;overscroll-behavior:contain;background:#ffffff;border:1px solid #e5e5e5;border-radius:11px;padding:15px;box-shadow:0 8px 32px #41414112}
.shape-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.shape-choices button{min-width:0;min-height:44px;width:100%;padding:9px 5px;display:flex;align-items:center;gap:7px;font-size:10px;border-radius:5px;color:#7f7f7f;border:1px solid transparent}.shape-choices button.active{border-color:#d3d3d3;background:#f2f2f2;color:#5f5f5f}.shape-choices svg{width:22px;height:22px;flex:none}.shape-options small{display:block;font-size:9px;line-height:1.6;color:#a9a9a9;margin-top:12px}
.vertex-handle{position:absolute;width:12px;height:12px;padding:0;border:1.5px solid #959595;background:#fafafa;border-radius:50%;transform:translate(-50%,-50%);pointer-events:auto;cursor:move;box-shadow:0 0 0 2px #ffffffb3}
.selection-box.vertex-edit{border-style:dashed;border-color:#bcbcbc}.shape-hint{position:absolute;bottom:-25px;left:0;color:#929292;font-size:10px;white-space:nowrap;pointer-events:none;background:#fefefedd;padding:3px 0}
.object-toolbar .shape-mode{font-size:10px;border-radius:5px;padding:7px;color:#878787}.object-toolbar .shape-name{width:136px}.object-toolbar .shape-stroke{width:42px}
@media(max-width:700px){.shape-options{left:69px;width:300px;max-width:calc(100% - 85px)}.vertex-handle{width:16px;height:16px}.object-toolbar .shape-name{width:115px}.shape-hint{font-size:9px}}

.geometry-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:10px;padding:3px;border-radius:8px;background:#f4f4f4}
.geometry-tabs button{min-height:36px;padding:6px 8px;border-radius:6px;font-size:12px;color:#626262}
.geometry-tabs button[aria-pressed="true"]{background:#fff;color:#292929;box-shadow:0 1px 4px #00000014}
.polygon-options{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #e8e8e8;font-size:12px;color:#555}
.polygon-options label{flex:1 1 94px}
.polygon-options select,.polygon-options button{min-height:38px;padding:5px 8px;border:1px solid #ddd;border-radius:6px;background:#fafafa;color:#333;font:inherit}
.polygon-options button{border-color:#292929;background:#292929;color:#fff}
.polygon-options button:hover:not(:disabled){background:#454545}
.shape-choices button span{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:1.35}
@media(max-width:420px){.shape-choices button{flex-direction:column;gap:7px;padding:10px 4px}.shape-choices button span{text-align:center}.shape-choices svg{width:24px;height:24px}}

.construction-tools{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.construction-tools:has(.construction-panel:not([hidden])),.construction-tools:has(.construction-link:not([hidden])){flex-basis:100%;border-top:1px solid #ebebeb;margin-top:3px;padding-top:6px}
.construction-button{font-size:10px;line-height:1.4;padding:6px 8px;border:1px solid #e6e6e6;border-radius:5px;color:#7a7a7a;white-space:normal}.construction-button.active{background:#f1f1f1;border-color:#d1d1d1;color:#636363}.construction-panel{display:flex;align-items:center;flex-wrap:wrap;gap:5px;flex:1}.construction-panel small{flex-basis:100%;font-size:9px;color:#a2a2a2;line-height:1.5;padding:2px 0}.construction-link{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.construction-link>span{font-size:10px;color:#888888}.construction-link label{white-space:nowrap}.construction-link input{accent-color:#7d7d7d}
.object-toolbar select:disabled,.object-toolbar input:disabled{opacity:.55;cursor:default}.object-toolbar .construction-tools [hidden]{display:none!important}

.object-toolbar:has(.construction-tools:not([hidden])){width:570px}.construction-tools{flex-basis:100%}

.background-setting{border:0;margin:18px 0 12px;padding:0}.background-setting legend{font-size:12px;color:#838383;margin-bottom:12px}.background-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.background-choice{display:flex;flex-direction:column;align-items:center;gap:9px;padding:8px 7px 10px;border:1px solid #e5e5e5;border-radius:8px;color:#939393;font-size:11px;min-width:0}.background-choice.active{border-color:#a6a6a6;background:#f3f3f3;color:#626262;box-shadow:0 0 0 1px #a6a6a626}.background-sample{height:51px;width:100%;border:1px solid #ebebeb;border-radius:4px;background-color:#fefefe}.sample-grid{background-image:linear-gradient(#e5e5e5 1px,transparent 1px),linear-gradient(90deg,#e5e5e5 1px,transparent 1px);background-size:12px 12px;background-position:center}.sample-ruled{background-image:linear-gradient(#e4e4e4 1px,transparent 1px);background-size:100% 12px;background-position:center}

.board-card{position:relative;align-self:start}.board-open{display:block;width:100%;text-align:left;border-radius:10px}.board-open:hover{background:transparent!important}.board-card h2{overflow-wrap:anywhere}.board-card .board-meta{margin:0;font-size:11px;line-height:1.5}.board-card .board-note{margin:6px 0 0;color:#8d8d8d;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.board-card-actions{position:absolute;right:10px;top:10px;display:flex;gap:4px;padding:4px;background:#ffffffed;border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 3px 12px #41414108;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .16s,transform .16s}.board-card:hover .board-card-actions,.board-card:focus-within .board-card-actions{opacity:1;transform:translateY(0);pointer-events:auto}.board-card-actions .icon-button{width:29px;height:29px;color:#878787}.board-card-actions .icon{width:15px;height:15px}.board-card-actions .board-delete{color:#838383}.board-card-actions .board-delete:hover{background:#f2f2f2}
.trash-link{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:10px;color:#9e9e9e;padding:5px 7px;border-radius:5px}.trash-link .icon{width:13px;height:13px}.trash-link span{font-size:9px}.delete-phrase{padding:12px 13px;border:1px solid #e0e0e0;border-radius:7px;background:#f9f9f9;color:#777777;font-size:12px;line-height:1.7;overflow-wrap:anywhere;user-select:text}.button.danger{background:#797979;color:white}.button.danger:hover{background:#696969}.trash-list{display:flex;flex-direction:column;gap:10px;margin-top:20px;max-height:50dvh;overflow:auto}.trash-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ebebeb;padding:10px 0}.trash-row>div{min-width:0;flex:1}.trash-row b{font-size:12px;font-weight:500;display:block;overflow-wrap:anywhere}.trash-row span{font-size:10px;color:#a0a0a0;display:block;margin-top:6px}.trash-row .button{font-size:10px;margin:0;padding:8px 10px;min-height:33px}
@media(hover:none),(pointer:coarse){.board-card-actions{opacity:1;transform:none;pointer-events:auto}}
@media(max-width:700px){.board-card-actions{right:7px;top:7px;padding:3px;gap:2px}.board-card-actions .icon-button{width:28px;height:28px}.board-card .board-meta{font-size:10px}.board-card .board-note{font-size:10px}.trash-row{gap:8px}}

.planimetry-panel{position:absolute;z-index:8;right:12px;top:16px;bottom:78px;width:276px;padding:15px;background:#fffffff5;border:1px solid #e4e4e4;border-radius:12px;box-shadow:0 6px 30px #4141410a;overflow:auto;overscroll-behavior:contain}
.planimetry-panel>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.planimetry-panel header small{font-size:8px;letter-spacing:1.5px;color:#a3a3a3}.planimetry-panel h2{font-size:16px;font-weight:500;margin:7px 0 0;color:#616161}.planimetry-panel #objectToolbar{position:static;left:auto!important;top:auto!important;width:100%;max-width:100%;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;gap:5px}.planimetry-panel .object-toolbar .shape-name{width:100%;margin-bottom:4px}.planimetry-panel .object-toolbar .bar-divider{display:none}.planimetry-panel .object-toolbar .construction-tools{margin-top:8px}.planimetry-panel .construction-panel{flex-basis:100%}.planimetry-panel .construction-link{gap:7px}.planimetry-panel .construction-link>span{width:100%}
.editor.geometry-open .canvas-viewport{right:300px}.angle-settings{border-top:1px solid #e8e8e8;margin-top:17px;padding-top:15px}.angle-settings h3{font-size:12px;font-weight:500;color:#737373;margin:0 0 13px}.angle-settings label{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.5;color:#868686;margin:11px 0;cursor:pointer}.angle-settings input{width:14px;height:14px;accent-color:#828282;flex:none;margin:0}.angle-values{margin-top:16px}.angle-value{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f2f2f2;font-size:12px;color:#868686}.angle-value>span{display:flex;align-items:center;gap:8px}.angle-value i{width:15px;height:9px;border-top:2px solid var(--angle-color);border-radius:50%;display:inline-block}.angle-value b{font-weight:500;font-variant-numeric:tabular-nums;color:#707070}.equal-angle-groups{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;font-size:10px;line-height:1.6}.angle-summary{font-size:9px;line-height:1.7;color:#a7a7a7;margin:12px 0 0}
@media(max-width:700px){.planimetry-panel{right:12px;left:12px;top:auto;bottom:60px;width:auto;height:min(42dvh,330px);padding:12px 14px}.editor.geometry-open .canvas-viewport{right:0;bottom:min(calc(42dvh + 72px),402px)}.planimetry-panel>header{margin-bottom:10px}.planimetry-panel #objectToolbar{gap:5px 8px}.planimetry-panel .object-toolbar .shape-name{width:120px;margin:0}.angle-value{padding:6px 0}}
.planimetry-panel #shapeSizeMode,.planimetry-panel #shapeVertexMode{flex:1 0 calc(50% - 3px)}.planimetry-panel .object-toolbar label input[type=number]{width:47px}.planimetry-panel #shapeStroke{width:36px}

@media(max-width:700px){.planimetry-panel .object-toolbar .shape-name{width:100%}}
.planimetry-panel .object-toolbar label input[type=number]{width:53px}.planimetry-panel input[type=number]{appearance:textfield}.planimetry-panel input[type=number]::-webkit-inner-spin-button,.planimetry-panel input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Monochrome app chrome; ink and mathematical equality colors stay semantic. */
:root{color:#252525;background:#fafafa;--ink:#252525;--muted:#777;--line:#e5e5e5;--green:#242424}body{background:#fafafa}.editor{background:#fff}.app-header{border-color:#e8e8e8}.brand-mark,.button.primary{background:#202020}.button.primary:hover{background:#050505}.button.danger{background:#292929}.button.danger:hover{background:#080808}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#777}.tool.active{background:#ededed;color:#191919}.background-choice.active{background:#f1f1f1;border-color:#777;color:#222}.construction-button.active{background:#242424;border-color:#242424;color:#fff}.board-card-actions .board-delete{color:#555}.board-card-actions .board-delete:hover{background:#eee}.selection-box,.resize-handle,.vertex-handle{border-color:#858585}.selection-box.vertex-edit{border-color:#aaa}.shape-hint{color:#888;background:#ffffffdf}.angle-badge{color:#555;background:#fff;border-color:#ddd}
.planimetry-panel{width:292px;padding:18px;background:#fff;border-color:#e2e2e2;border-radius:12px;box-shadow:0 5px 25px #00000005;scrollbar-width:thin;scrollbar-color:#d6d6d6 transparent}.editor.geometry-open .canvas-viewport{right:316px}.planimetry-panel>header{margin-bottom:20px}.planimetry-panel header small{font-size:9px;letter-spacing:1.4px;color:#929292}.planimetry-panel h2{font-size:18px;color:#242424;font-weight:550;margin-top:7px}.planimetry-panel #objectToolbar{display:block}.inspector-section{display:block;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #ededed}.inspector-section:last-of-type{padding-bottom:0;margin-bottom:0;border-bottom:0}.inspector-section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.inspector-section h3{margin:0 0 10px;font-size:11px;color:#777;font-weight:500;letter-spacing:.02em}.inspector-section-heading h3{margin:0}.inspector-delete{width:25px;height:25px;color:#888}.inspector-delete:hover{background:#f1f1f1;color:#222}
.planimetry-panel #shapeType{width:100%;height:35px;padding:7px 9px;margin:0;font-size:12px;color:#333;background:#fafafa;border:1px solid #ddd;border-radius:7px}.shape-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:12px;padding:3px;background:#f0f0f0;border-radius:8px}.planimetry-panel .shape-mode-tabs .shape-mode{border:0;height:29px;font-size:11px;color:#737373;border-radius:5px;padding:5px}.planimetry-panel .shape-mode-tabs .shape-mode.active{background:#252525;color:#fff}
.size-fields,.line-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.planimetry-panel .inspector-section label{display:flex;flex-direction:column;align-items:stretch;gap:7px;font-size:10px;color:#8a8a8a;min-width:0}.planimetry-panel .size-fields input[type=number]{width:100%;height:35px;padding:7px 9px;font-size:12px;color:#333;border:1px solid #ddd;border-radius:7px;background:#fafafa;font-variant-numeric:tabular-nums}.unit-field,.color-field-control{display:flex;align-items:center;height:35px;min-width:0;border:1px solid #ddd;border-radius:7px;background:#fafafa;padding-right:9px}.unit-field span{font-size:10px;color:#999}.planimetry-panel #shapeStroke{width:100%;height:33px;flex:1;min-width:0;border:0;background:transparent;color:#333;font-size:12px;padding:7px 9px}.planimetry-panel .color-field-control input[type=color]{width:25px;height:25px;margin:0 6px;padding:0;border:0;flex:none;background:none}.color-field-control>span{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;color:#555;white-space:nowrap}
.planimetry-panel #objectToolbar .construction-tools{padding:16px 0 0;margin:16px 0 0;border-top:1px solid #ededed;display:block}.planimetry-panel #constructionToggle{display:flex;align-items:center;justify-content:space-between;width:100%;height:34px;color:#4c4c4c;border-color:#ddd;border-radius:7px;font-size:11px;padding:7px 10px;background:#fff}.planimetry-panel #constructionToggle::after{content:'⌄';color:#888}.planimetry-panel #constructionToggle[aria-expanded=true]::after{content:'⌃'}.planimetry-panel .construction-panel{display:grid;grid-template-columns:1fr;gap:7px;margin-top:9px}.planimetry-panel .construction-panel .construction-button{min-height:33px;font-size:11px;text-align:left;border-radius:6px}.planimetry-panel .construction-panel small{font-size:10px;line-height:1.6;color:#999}.planimetry-panel .construction-link{display:flex;gap:7px}.planimetry-panel .construction-link>span{color:#555}
.angle-settings{border-color:#e9e9e9;margin-top:20px;padding-top:18px}.angle-settings h3{font-size:12px;font-weight:550;color:#333;margin-bottom:14px}.angle-settings label{font-size:11px;color:#626262;line-height:1.6;gap:10px}.angle-settings input{width:14px;height:14px;accent-color:#242424}.angle-options{margin:12px 0 4px}.angle-options summary{display:flex;justify-content:space-between;list-style:none;cursor:pointer;font-size:10px;color:#929292;padding:5px 0}.angle-options summary::-webkit-details-marker{display:none}.angle-options summary::after{content:'+';font-size:13px}.angle-options[open] summary::after{content:'−'}.angle-options #angleDisplayOptions{padding:2px 0 5px}.angle-options label{font-size:10px;margin:9px 0;color:#777}.angle-table-heading{display:flex;justify-content:space-between;margin-top:18px;font-size:9px;color:#aaa}.angle-values{margin-top:5px}.angle-value{padding:9px 0;border-color:#ededed;color:#666;font-size:12px}.angle-value b{font-size:12px;color:#333;font-weight:500}.equal-angle-groups{font-size:10px;margin-top:13px}.angle-summary{color:#a0a0a0;font-size:9px;line-height:1.6;margin-top:14px}
@media(max-width:700px){.planimetry-panel{width:auto;padding:15px 16px}.editor.geometry-open .canvas-viewport{right:0;bottom:min(calc(42dvh + 72px),402px)}}
.inspector-type-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:7px;align-items:center}.inspector-type-row .inspector-delete{width:28px;height:32px}.planimetry-panel #objectToolbar .size-fields input[type=number]{width:100%;height:35px}.planimetry-panel>header{margin-bottom:10px}.planimetry-panel #objectToolbar .inspector-section:not(:last-of-type){padding-bottom:10px;margin-bottom:10px}.inspector-section h3{margin-bottom:8px}.planimetry-panel #objectToolbar .construction-tools{padding-top:10px;margin-top:10px}.planimetry-panel .angle-settings{margin-top:14px;padding-top:14px}
.planimetry-panel .shape-mode-tabs{margin-top:8px}.planimetry-panel #objectToolbar .inspector-section:not(:last-of-type){padding-bottom:8px;margin-bottom:8px}.planimetry-panel .inspector-section h3{margin-bottom:6px}.planimetry-panel .angle-table-heading{margin-top:12px}.planimetry-panel .angle-settings>label{margin-top:8px;margin-bottom:8px}.planimetry-panel .angle-settings{margin-top:12px;padding-top:12px}.planimetry-panel .angle-value{padding-top:8px;padding-bottom:8px}

.shape-hold-help{display:block;margin-top:8px;color:#aaa;font-size:9px;line-height:1.6}

/* Small visible circles, with a larger transparent target for dragging. */
.selection-box.line-edit{border:0}
.selection-box .endpoint-handle,.selection-box .vertex-handle{position:absolute;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;transform:translate(-50%,-50%);pointer-events:auto;cursor:move;touch-action:none}
.selection-box .endpoint-handle::after,.selection-box .vertex-handle::after{content:'';display:block;width:8px;height:8px;margin:0;border:1.2px solid #777;border-radius:50%;background:#fff;box-shadow:none}
.selection-box .endpoint-handle:hover:not(:disabled),.selection-box .vertex-handle:hover:not(:disabled),.selection-box .endpoint-handle:focus-visible,.selection-box .vertex-handle:focus-visible{background:transparent;outline:none;box-shadow:none}
.selection-box .endpoint-handle:hover::after,.selection-box .vertex-handle:hover::after{border-color:#222;background:#fff}
.selection-box .endpoint-handle:focus-visible::after,.selection-box .vertex-handle:focus-visible::after{box-shadow:0 0 0 3px #dedede}
@media(pointer:coarse){.selection-box .endpoint-handle,.selection-box .vertex-handle{width:34px;height:34px}.selection-box .endpoint-handle::after,.selection-box .vertex-handle::after{width:10px;height:10px}}
.angle-value>label{display:flex;align-items:center;gap:8px;margin:0;cursor:default}.exact-angle-field{display:flex;align-items:center;gap:5px;color:#888}.planimetry-panel .exact-angle-field input{width:84px;height:31px;padding:5px 7px;border:1px solid #ddd;border-radius:6px;background:#fafafa;color:#333;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;flex:none}.planimetry-panel .exact-angle-field input[aria-invalid=true]{border-color:#b57c70}.exact-angle-help{font-size:9px;line-height:1.6;color:#999;margin:10px 0}.exact-angle-apply{font-size:10px;padding:8px 11px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#555}.exact-angle-error{font-size:10px;line-height:1.6;color:#95675b;margin:8px 0 0}.exact-angle-error:empty{display:none}

/* Three clicks: side, vertex, other ray. */
.measure-hint{position:absolute;z-index:9;left:50%;bottom:64px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);padding:12px 14px;background:#fff;border:1px solid #dedede;border-radius:10px;box-shadow:0 5px 25px #00000008;pointer-events:auto}
.measure-hint>.icon{width:24px;height:24px;color:#444;flex-shrink:0}.measure-hint strong,.measure-hint span,.measure-hint small{display:block}.measure-hint strong{font-size:11px;font-weight:600;margin-bottom:5px}.measure-hint span{font-size:12px;color:#444}.measure-hint small{font-size:10px;color:#999;margin-top:6px}.measure-hint .icon-button{width:25px;height:25px;flex-shrink:0;font-size:20px;color:#777}
#measuredAngleValue{padding:3px 8px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}.measurement-action{font-size:11px;padding:7px;color:#666;border-radius:5px}.measurement-action:hover{background:#f3f3f3}
.editor .tools{max-height:calc(100% - 24px);overflow-y:auto;scrollbar-width:none}
@media(max-width:700px){.measure-hint{bottom:60px;padding:10px;gap:8px}.measure-hint span{font-size:11px}.measure-hint small{font-size:9px}.measure-hint>.icon{width:20px}}

.start-angle-measure{display:block;width:100%;padding:9px 10px;margin:0 0 14px;border:1px solid #ddd;border-radius:6px;color:#555;text-align:left;font-size:11px;background:#fff}.start-angle-measure:hover{background:#f6f6f6}

.angle-mark-icon{width:25px;height:22px;flex-shrink:0;overflow:visible}.angle-mark-icon path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}.angle-value>label{gap:4px}
.circle-settings{margin-top:14px;padding-top:14px;border-top:1px solid #e7e7e7}.circle-settings h3{font-size:12px;font-weight:500;margin:0 0 14px}.circle-center-description{display:flex;gap:7px;align-items:center;font-size:11px;color:#555;margin:0 0 16px}.circle-center-description strong{font-family:Georgia,serif;font-style:italic;font-size:15px;font-weight:normal}.circle-center-description>span:last-child{color:#999;margin-left:auto;font-size:9px}.center-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#333}.circle-settings>label{display:flex;gap:9px;align-items:center;font-size:11px;color:#555}.circle-settings input{width:14px;height:14px;accent-color:#252525;margin:0}.circle-settings .angle-summary{line-height:1.6;margin-top:12px}
.circle-angle-tools{margin-top:16px;padding-top:14px;border-top:1px solid #e7e7e7;display:grid;gap:7px}.circle-angle-tools h3{margin-bottom:3px}.circle-angle-tools button{text-align:left;border:1px solid #ddd;border-radius:6px;padding:9px 10px;font-size:11px;color:#444;background:#fff}.circle-angle-tools button:hover{background:#f5f5f5}.circle-angle-tools button small{display:block;font-size:9px;color:#999;margin-top:5px}
#accountButton{min-height:32px;padding:7px 12px;font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oauth-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}.oauth-button{display:block;padding:12px;border:1px solid #ddd;border-radius:7px;text-align:center;font-size:12px;color:#333;text-decoration:none}.oauth-button:hover{background:#f4f4f4}.oauth-button.unavailable{color:#aaa;cursor:default;font-size:10px}.auth-divider{display:flex;align-items:center;gap:10px;color:#999;font-size:10px;margin:20px 0}.auth-divider::before,.auth-divider::after{content:'';height:1px;background:#eee;flex:1}.account-links{display:flex;justify-content:space-between;margin-top:20px;font-size:11px;color:#777}.form-error{color:#a34535;font-size:11px;line-height:1.5;min-height:1em}.dev-mail{padding:15px;background:#f7f7f7;border:1px solid #ddd;border-radius:8px;margin:18px 0}.dev-mail strong{font-size:12px}.dev-mail p{font-size:11px;line-height:1.6}.room-status{font-size:10px;color:#777;white-space:nowrap}#shareLesson{font-size:11px}.sharing-guest #shareLesson,.sharing-guest #addLessonQuick,.sharing-guest #openLessons,.sharing-guest #addTask,.sharing-guest #drawerAddTask,.sharing-guest #editorMenu{display:none!important}#lessonShareUrl{font-size:11px}.editing #localLabel{display:none}
@media(max-width:700px){#accountButton{max-width:74px;font-size:10px;padding:5px 8px}.room-status{display:none}#shareLesson{font-size:10px;padding:7px}.oauth-buttons{grid-template-columns:1fr}.app-header #localLabel{display:none}}
#accountForm input,#resetPasswordForm input{display:block;width:100%;padding:12px 13px;border:1px solid #ddd;border-radius:7px;background:#fafafa;font:inherit;color:#333;margin-top:8px}#accountForm .button{width:100%}.modal-shell button[type=button]{font:inherit}

.selection-box {
  --selection-ink: #607fa1;
  border-color: var(--selection-ink);
  border-radius: 4px;
}
.selection-box.locked-selection { border-style: dashed; border-color: #858585; }
.selection-box .resize-handle {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  touch-action: none;
}
.resize-handle::after {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid var(--selection-ink);
  border-radius: 50%;
  background: #fff;
}
.selection-box .resize-handle:hover { background: transparent; }
.resize-handle:hover::after { background: var(--selection-ink); }
.selection-box .endpoint-handle::after,
.selection-box .vertex-handle::after { border-color: var(--selection-ink); }
.selection-box .rotation-handle {
  position: absolute;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid #d5e0ed;
  border-radius: 50%;
  background: #fff;
  color: #476583;
  box-shadow: 0 2px 6px #26334413;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.selection-box .rotation-handle:hover,
.selection-box .rotation-handle.is-rotating { background: #eaf0f7; }
.rotation-handle.is-rotating { cursor: grabbing; }
.rotation-handle .icon { width: 16px; height: 16px; pointer-events: none; }

.selection-actions {
  position: absolute;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: max-content;
  padding: 5px;
  border: 1px solid #e2e7ee;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5px 18px #26334416, 0 1px 3px #2633440a;
  color: #333b46;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.selection-actions button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
}
.selection-actions button:hover:not(:disabled) { background: #eaf0f7; }
.selection-actions button[aria-pressed=true] { color: #355478; background: #e6eef9; }
.selection-actions :disabled { opacity: .4; cursor: default; }
.selection-actions .icon { width: 16px; height: 16px; }
.selection-color { display: flex; align-items: center; gap: 5px; padding: 0 5px; }
.selection-color input { width: 26px; height: 26px; padding: 2px; border: 0; background: none; cursor: pointer; }
.selection-color input::-webkit-color-swatch-wrapper { padding: 0; }
.selection-color input::-webkit-color-swatch { border: 1px solid #0002; border-radius: 5px; }
.selection-stepper { display: flex; align-items: center; border-radius: 7px; background: #f4f6f9; }
.selection-stepper input {
  width: 33px;
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  text-align: center;
  appearance: textfield;
}
.selection-stepper input::-webkit-inner-spin-button { appearance: none; }
.selection-total {
  padding: 0 7px;
  color: #626973;
  white-space: nowrap;
}
.selection-align, .selection-actions .selection-label {
  width: auto;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #e2e7ee;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.selection-align { width: 118px; max-width: 100%; }
@media (pointer: coarse) {
  .selection-box .resize-handle { width: 28px; height: 28px; }
  .selection-box .rotation-handle { width: 38px; height: 38px; }
  .selection-actions button { width: 36px; height: 38px; }
  .selection-align, .selection-actions .selection-label { height: 38px; }
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .editor {
    --tools-bottom: max(8px, env(safe-area-inset-bottom));
    --tools-top: calc(var(--tools-bottom) + 56px);
    --canvas-bottom: calc(var(--tools-top) + 38px);
    --inspector-height: clamp(0px, calc(100% - var(--canvas-bottom) - 100px), min(36dvh, 330px));
    min-height: 0;
  }
  .editor .tools {
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: var(--tools-bottom);
    left: max(8px, env(safe-area-inset-left));
    flex-direction: row;
    justify-content: flex-start;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    gap: 2px;
    padding: 3px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    z-index: 14;
  }
  .editor .tools .tool, .editor .tools .color-trigger {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  .editor .tools .tool-divider,
  .editor:has(.empty-lesson:not([hidden])) .tools {
    display: none;
  }
  .editor .canvas-footer { bottom: var(--tools-top); }
  .editor .canvas-viewport { bottom: var(--canvas-bottom); }
  .editor .planimetry-panel {
    top: auto;
    right: 12px;
    bottom: var(--canvas-bottom);
    left: 12px;
    width: auto;
    height: var(--inspector-height);
  }
  .editor.geometry-open .canvas-viewport {
    right: 0;
    bottom: calc(var(--canvas-bottom) + var(--inspector-height) + 8px);
  }
  .editor .measure-hint { bottom: calc(var(--canvas-bottom) + 8px); }
  .editor .pen-options, .editor .eraser-options, .editor .shape-options {
    top: auto;
    right: auto;
    bottom: calc(var(--tools-top) + 4px);
    left: max(8px, env(safe-area-inset-left));
    max-width: calc(100% - 16px);
    max-height: min(65dvh, calc(100% - var(--tools-top) - 8px));
    overflow-y: auto;
    transform: none;
    z-index: 15;
  }
}

.board-tour {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.board-tour::backdrop { background: transparent; backdrop-filter: none; }
.board-tour-unanchored { background: rgba(26, 29, 33, .54); }
.board-tour-spotlight {
  position: absolute;
  border: 2px solid #8cb9ff;
  border-radius: 11px;
  box-shadow: 0 0 0 200vmax rgba(26, 29, 33, .54);
  pointer-events: none;
}
.board-tour-card {
  position: absolute;
  width: min(360px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 17px 19px 18px;
  border: 1px solid #e3e8ef;
  border-radius: 15px;
  background: #fff;
  color: #20242b;
  box-shadow: 0 14px 44px #151f3129;
}
.board-tour-top, .board-tour-actions { display: flex; align-items: center; gap: 8px; }
.board-tour-top { justify-content: space-between; }
.board-tour-top span { color: #4b6290; font-size: 11px; font-weight: 650; }
.board-tour-top button { width: 36px; height: 36px; flex: 0 0 36px; }
.board-tour .board-tour-card h2 {
  margin: 1px 0 8px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 650;
}
.board-tour .board-tour-card h2:focus { outline: none; }
.board-tour .board-tour-card p { margin: 0; color: #505963; font-size: 13px; line-height: 1.55; }
.board-tour-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 13px 0 0;
  list-style: none;
}
.board-tour-tools li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  background: #f0f4fa;
  color: #36465f;
  border-radius: 6px;
  font-size: 11px;
}
.board-tour-tools .icon { width: 15px; height: 15px; }
.board-tour-actions { justify-content: space-between; margin-top: 15px; }
.board-tour-actions button { min-height: 42px; padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.board-tour-secondary { color: #4c5769; }
.board-tour-actions .board-tour-primary { background: #234e9b; color: #fff; }
.board-tour-actions .board-tour-primary:hover { background: #193e82; }