html body {font-family:var(--font-ui)!important;background:var(--surface)!important;color:var(--ink)!important}
html body button,html body input,html body select,html body textarea{font-family:var(--font-ui);letter-spacing:0}
html body button,html body label,html body summary{font-weight:500}
html body h1,html body h2,html body h3,html body strong,html body .font-bold,html body .font-extrabold{font-weight:600}
html body #topNavbar{height:56px;min-height:56px;padding:var(--space-2) var(--space-4)!important;gap:var(--space-2);flex-wrap:nowrap!important;border:0;border-bottom:1px solid var(--line);background:var(--surface)!important;box-shadow:none}
#topNavbar .redesign-start,#topNavbar .redesign-end{display:flex;align-items:center;gap:var(--space-2);min-width:0;width:auto!important;margin:0!important}
#topNavbar .redesign-start{flex:1}
#topNavbar .redesign-end{flex-shrink:0}
html body #topNavbar button{display:inline-flex!important;align-items:center;justify-content:center;gap:var(--space-2);min-height:32px;padding:var(--space-2) var(--space-2);border:0;border-radius:var(--radius-sm);background:transparent!important;color:var(--ink)!important;box-shadow:none!important;font-size:13px;white-space:nowrap}
html body #topNavbar button:hover{background:var(--surface-hover)!important}
html body #topNavbar #btnExport{background:var(--btn-primary-bg)!important;color:var(--btn-primary-fg)!important;border:1px solid var(--btn-primary-border)!important;padding:var(--space-2) var(--space-4)}
html body #topNavbar #btnExport *{color:var(--btn-primary-fg)!important}
#redesignWorkName{width:clamp(100px,15vw,220px);background:transparent;border:1px solid transparent;border-radius:6px;font-weight:500;font-size:14px;padding:var(--space-1) var(--space-2);color:var(--ink);text-overflow:ellipsis}
#redesignWorkName:hover,#redesignWorkName:focus{background:var(--surface-hover);border-color:var(--line)}
#redesignSaveStatus{display:inline-flex;align-items:center;height:36px;font-size:12px;color:var(--muted);white-space:nowrap}
.redesign-icon svg,#topNavbar svg,#leftSidebar svg,.selection-action-pill svg{width:18px;height:18px;stroke-width:1.5}
.redesign-menu{position:fixed;z-index:var(--layer-stack-1000);width:260px;max-width:calc(100vw - 24px);padding:var(--space-2);border:0;border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-panel)}
.redesign-menu header{display:flex;justify-content:space-between;padding:var(--space-2)}
.redesign-menu h2{font-size:14px;font-weight:600}
.redesign-menu button,.redesign-menu a{display:flex!important;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3)!important;min-height:36px;border:0!important;border-radius:6px!important;background:transparent!important;color:var(--ink)!important;font-size:13px;text-align:left;cursor:pointer;text-decoration:none}
.redesign-menu button:hover,.redesign-menu a:hover{background:var(--surface-hover)!important}
.redesign-menu>div{display:flex;flex-direction:column;gap:var(--space-1)}
.redesign-menu header button{width:32px;min-height:32px;padding:var(--space-1)!important}
html body #workbenchWrapper{background:var(--surface-hover)!important}
html body #canvasCard{border:0!important;border-radius:8px;box-shadow:none!important}
html body #leftSidebar{width:64px!important;top:72px;left:calc(var(--app-shell-offset,0px) + 8px);padding:var(--space-1)!important;border:0!important;border-radius:8px!important;background:var(--surface)!important;box-shadow:none!important;gap:0!important;overflow-y:auto;max-height:calc(100dvh - 164px)}
#leftSidebar .redesign-tool-group{display:flex;flex-direction:column;padding:var(--space-1) 0;border-bottom:1px solid var(--line)}
#leftSidebar .redesign-tool-group:last-child{border-bottom:0}
html body #leftSidebar .redesign-tool-group>button{display:flex!important;flex-direction:column;justify-content:center;align-items:center;width:56px;height:52px;padding:var(--space-2)!important;gap:var(--space-1);border:0;border-radius:6px;box-shadow:none!important;font-size:12px;color:var(--muted)!important;background:transparent}
html body #leftSidebar button:hover{background:var(--surface-hover)!important;color:var(--ink)!important}
html body #leftSidebar .tool-btn-active{background:var(--state-active-bg)!important;color:var(--state-active-fg)!important}
html body #leftSidebar .tool-btn-active *{color:var(--state-active-fg)!important}
#leftSidebar .pro-tool-label{font-size:12px;line-height:1}
#redesignContext{position:fixed;left:calc(var(--app-shell-offset,0px) + 84px);right:16px;top:68px;z-index:var(--layer-stack-36);display:flex;align-items:center;gap:var(--space-3);min-height:40px;max-height:88px;overflow:auto;background:var(--surface);color:var(--ink);border-radius:8px;padding:var(--space-2) var(--space-3);box-shadow:var(--shadow-panel);font-size:13px}
#redesignContext label{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}
#redesignContext input[type=number]{width:56px;padding:var(--space-1);background:var(--surface-hover);color:var(--ink);border:0;border-radius:6px}
#redesignContext input[type=color]{width:28px;height:28px;padding:var(--space-1);background:var(--surface);border:1px solid var(--line);border-radius:6px}
#redesignContext button,#redesignContext select{padding:var(--space-1) var(--space-2);border:0;border-radius:6px;background:var(--surface-hover);color:var(--ink);white-space:nowrap}
#redesignContext [hidden],#redesignContext[hidden]{display:none!important}
#redesignContext #shapeInspector{position:static!important;width:auto!important;margin:0;padding:0;border:0;box-shadow:none;background:transparent;color:var(--ink);display:flex;align-items:center;gap:var(--space-3)}
#shapeInspector h3,#shapeInspector p,#shapeInspector .pro-field-row,#shapeApply{display:none!important}
#redesignContext #shapeInspector[hidden]{display:none!important}
#redesignContextTitle{font-weight:500;white-space:nowrap;color:var(--muted)}
#redesignPresent{position:fixed;right:16px;bottom:72px;z-index:var(--layer-stack-37);padding:var(--space-2) var(--space-3);display:flex;gap:var(--space-2);align-items:center;background:var(--surface);color:var(--ink);border:0;border-radius:8px;box-shadow:var(--shadow-panel);font-size:13px}
/* 2D 选区统一虚线框（10-28 冒烟，docs/PRODUCT-UX-ARCH.md）：深色黑板上是白色、白底上是深色，跟随 --selection-border；套索、框选、点选都一样 */
html body #canvasCard .selection-box{border:calc(1.5px * var(--ui-inv,1)) dashed var(--selection-border)!important;border-radius:0;box-shadow:none}
/* 选区层要在透明 3D 图层 #threeLayer（z 5）之上，否则框线和旋转杆被盖住，只剩自带 z-index 的角点手柄 */
html body #canvasCard #selectionOverlay{z-index:var(--layer-stack-6)}
html body #canvasCard .selection-handle{width:calc(10px * var(--ui-inv,1));height:calc(10px * var(--ui-inv,1));border:calc(1px * var(--ui-inv,1)) solid var(--n-400);border-radius:50%;background:var(--handle-white);box-shadow:0 1px 3px var(--shadow-ink)}
.selection-handle::before{display:none!important}
html body #canvasCard .selection-handle-n,html body #canvasCard .selection-handle-s{width:calc(20px * var(--ui-inv,1));height:calc(6px * var(--ui-inv,1));border-radius:999px}
html body #canvasCard .selection-handle-e,html body #canvasCard .selection-handle-w{width:calc(6px * var(--ui-inv,1));height:calc(20px * var(--ui-inv,1));border-radius:999px}
html body #canvasCard .selection-rot-stem{top:auto;bottom:calc(-28px * var(--ui-inv,1));height:calc(28px * var(--ui-inv,1));background:var(--selection-border)}
html body #canvasCard .selection-rot-handle{top:auto;bottom:calc(-40px * var(--ui-inv,1));width:calc(24px * var(--ui-inv,1));height:calc(24px * var(--ui-inv,1));border:1px solid var(--line);border-radius:50%;background:var(--handle-white);color:var(--n-900);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-panel)}
html body #canvasCard .selection-action-pill{top:auto;bottom:calc(100% + 8px * var(--ui-inv,1));padding:var(--space-1);border:0;border-radius:8px;background:var(--surface)!important;color:var(--ink);box-shadow:var(--shadow-panel);gap:0}
html body .selection-action-pill button{padding:var(--space-2);min-width:32px;background:transparent;color:var(--ink)!important;font-size:12px;font-weight:500}
html body .selection-action-pill button:hover{background:var(--surface-hover)!important}
.selection-action-pill .btn-pill-delete:hover{color:var(--danger)!important}
.redesign-size-tip{position:absolute;left:50%;top:calc(100% + 44px);transform:translateX(-50%);padding:var(--space-1) var(--space-2);border-radius:6px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-panel);font-size:12px;white-space:nowrap;pointer-events:none}
.redesign-hover{position:absolute;pointer-events:none;border:1px solid var(--selection-border);z-index:var(--layer-stack-16)}
.redesign-guide{position:absolute;pointer-events:none;border-color:var(--snap-guide);border-style:dashed;border-width:0;z-index:var(--layer-stack-16)}
.redesign-guide.vertical{height:100%;top:0;border-left-width:1px}.redesign-guide.horizontal{width:100%;left:0;border-top-width:1px}
html body .app-shell{background:var(--surface)!important;color:var(--ink);border-color:var(--line);box-shadow:none;font-family:var(--font-ui)}
html body .app-shell input,html body .app-shell .as-user-btn,html body .app-shell button,html body .app-shell .as-work{color:var(--ink);font-weight:500}
html body .app-shell .as-work.is-active{background:var(--state-active-bg);color:var(--state-active-fg)}
html body #appShellToggle{display:none!important}
#redesignIntro{position:fixed;inset:0;z-index:var(--layer-stack-1200);background:var(--surface);color:var(--ink);display:grid;place-items:center;pointer-events:none;transition:opacity .18s ease}
#redesignIntro button{position:absolute;right:24px;top:24px;pointer-events:auto;min-height:44px;padding:var(--space-2) var(--space-4);background:var(--glass-surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px}
.intro-logo-lockup{display:grid;justify-items:center;gap:var(--space-4);animation:intro-logo-in 1.6s var(--motion-ease) both}
.intro-logo-lockup img{width:112px;height:112px;object-fit:contain}
#redesignHeroStage>img{display:block;width:128px;height:128px;margin:64px auto}
.intro-logo-lockup strong{animation:intro-name-in 1.6s ease-out both}
@keyframes intro-name-in{0%,55%{opacity:0;transform:translateY(8px)}78%,100%{opacity:1;transform:none}}
#redesignIntro[data-mode=fade] .intro-logo-lockup img,#redesignIntro[data-mode=fade] .intro-logo-lockup strong{animation:none;opacity:1}
.intro-logo-lockup strong{font-size:26px;font-weight:600;letter-spacing:-.04em}
#redesignIntro[data-mode=fade] .intro-logo-lockup{animation:none}
#redesignIntro.is-fading{opacity:0}
@keyframes intro-logo-in{0%{opacity:1;transform:translateY(0) scale(1)}25%,78%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:1;transform:translateY(-4px) scale(1)}}
/* 首帧完整展示官方彩色立方体；只做轻移，字标随后出现。 */
@media(prefers-reduced-motion:reduce){.intro-logo-lockup,.intro-logo-lockup strong,.intro-logo-lockup img{animation:none;opacity:1}#redesignIntro{transition:opacity .18s linear}}
.intro-cube-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#redesignHero{position:relative;min-height:360px;background:var(--hero-bg);color:var(--hero-ink);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:var(--space-10)}
#redesignHero h1{font-size:28px;line-height:1.5;max-width:320px;letter-spacing:0;margin-bottom:var(--space-6)}
#redesignHero button{padding:var(--space-2) var(--space-5);border:1px solid var(--btn-primary-border);border-radius:8px;background:var(--btn-primary-bg);color:var(--btn-primary-fg);font-size:14px}
#redesignHeroStage{position:relative;width:100%;height:280px;touch-action:pan-y;cursor:grab}
#redesignHeroStage:active{cursor:grabbing}
#redesignHeroStage canvas{display:block;width:100%;height:100%}
#redesignHeroFormula{position:absolute;right:24%;bottom:48px;font-size:20px;color:var(--state-active-fg);pointer-events:none}
html body #seoArticleSection{font-family:var(--font-ui);padding-top:var(--space-12)}
html body .pro-dialog,html body .workspace-tools{background:var(--surface);color:var(--ink);border:0;border-radius:12px;box-shadow:var(--shadow-modal)}
html body .pro-dialog input,html body .pro-dialog select,html body .pro-dialog textarea{background:var(--surface-hover);color:var(--ink);border-color:var(--line)}
html body .pro-dialog button{font-weight:500}
@media(max-width:1100px){#redesignSaveStatus{display:none}#topNavbar .redesign-start{gap:var(--space-1)}#redesignWorkName{width:128px}}
@media(max-width:640px){html body #topNavbar{padding:var(--space-2)!important;gap:var(--space-1)}#redesignWorkName{width:86px;font-size:13px;padding:var(--space-1)}#redesignUndo,#redesignRedo,#btnTopProBadge{display:none!important}html body #topNavbar #btnExport{padding:var(--space-2) var(--space-2)}#btnShareChalk span{display:none}#redesignContext{left:80px;right:8px;top:64px;gap:var(--space-2);padding:var(--space-2);max-height:80px}#redesignContext #shapeInspector{gap:var(--space-2)}html body #leftSidebar{top:64px}#redesignHero{grid-template-columns:1fr;padding:var(--space-6)}#redesignHeroStage{height:240px}#redesignHero h1{font-size:28px}#redesignHeroFormula{right:32px;bottom:24px}}
@media(prefers-reduced-motion:reduce){#redesignIntro{transition:opacity .3s linear}*{scroll-behavior:auto!important}.redesign-menu{animation:none}}
:root{--redesign-offset:0px}
html.app-shell-open:not(.app-shell-mobile){--redesign-offset:var(--app-shell-w)}
html.app-shell-open:not(.app-shell-mobile) body #topNavbar>.redesign-start{display:flex!important}
html.app-shell-ready body #topNavbar{display:flex!important;padding-left:var(--space-4)!important}
html body #leftSidebar{position:fixed!important;left:calc(var(--redesign-offset) + 8px)!important;top:72px!important;transform:none!important}
#redesignContext{left:calc(var(--redesign-offset) + 84px)}
#redesignContext #shapeInspector label{margin:0;justify-content:flex-start}
html body{--as-bg:var(--surface);--as-ink:var(--ink);--as-muted:var(--muted);--as-line:var(--line);--as-hover:var(--surface-hover);--as-active:var(--state-active-bg);--as-accent:var(--state-active-fg);--as-shadow:var(--shadow-panel)}
html body #leftSidebar .tool-btn-active{background:var(--state-active-bg)!important;color:var(--state-active-fg)!important;border:0!important}
html body #leftSidebar #btnToggle3DPanel{border:0!important}
html body #leftSidebar .pro-tool-label{font-size:12px!important}
html body #redesignContext label:has(#shapeRadius)[hidden]{display:none!important}
html body .redesign-menu>header{margin:0}
html body #zoomDock{top:auto!important;bottom:16px!important;right:16px!important;left:auto!important;transform:none!important;background:var(--surface)!important;color:var(--ink);border:0!important;box-shadow:var(--shadow-panel)!important}
@media(max-width:640px){html.app-shell-ready body #topNavbar{padding-left:var(--space-2)!important}html body #topNavbar #redesignUndo,html body #topNavbar #redesignRedo,html body #topNavbar #btnTopProBadge{display:none!important}#redesignContext{left:80px;right:8px}html body #leftSidebar{top:64px!important}}

html body #canvasMarqueeBox{border-color:var(--selection-border);background:var(--surface-hover);border-radius:0}
html body .app-shell :focus-visible,html body #topNavbar button:focus-visible,html body #leftSidebar button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
html body #topNavbar button svg *{stroke-width:1.5}
html body .redesign-tool-group button.tool-btn-active{background:var(--state-active-bg)!important;color:var(--state-active-fg)!important;box-shadow:none!important}
@media(max-width:640px){html body #topNavbar #btnExport span{display:inline!important}}

body.redesign-board-away #leftSidebar,body.redesign-board-away #redesignContext,body.redesign-board-away #redesignPresent{visibility:hidden;pointer-events:none}
#redesignHeroStage{touch-action:none}
html body #canvasCard .selection-box{background:transparent}

#redesignHeroFormula{opacity:0;transition:opacity .6s ease}
#redesignHero.is-visible #redesignHeroFormula{opacity:1}
@media(prefers-reduced-motion:reduce){#redesignHeroFormula{transition:none}}

#redesignPresent{bottom:184px}
@media(max-width:640px){html body #zoomDock{left:80px!important;right:auto!important;bottom:72px!important}}

/* The existing sidebar toggle is also the vector brand anchor for the intro. */
html body #topNavbar #redesignSidebar{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0;width:auto;padding:var(--space-2)}
html body #topNavbar #redesignSidebar .intro-nav-mark{width:26px;height:26px;stroke-width:1.4}
html body #topNavbar #redesignSidebar .intro-nav-wordmark{width:75px;height:13px}
.intro-nav-wordmark .brand-wordmark-3{fill:#10B981}
@media(max-width:640px){html body #topNavbar #redesignSidebar{gap:var(--space-1);padding:var(--space-1)}html body #topNavbar #redesignSidebar .intro-nav-mark{width:22px;height:22px}html body #topNavbar #redesignSidebar .intro-nav-wordmark{width:60px;height:11px}html body #topNavbar #redesignWorkName{width:40px}html body #topNavbar .nav-file-label{display:none}}

/* Empty board controls fit their content; actual selections retain the full toolbar. */
#redesignContext.is-board{right:auto;width:max-content;max-width:calc(100vw - var(--redesign-offset,0px) - 100px);border-radius:999px}
#redesignContext.is-board.viewer-ux-context .viewer-ux-bar{display:none!important}
@media(max-width:640px){#redesignContext.is-board{left:8px;right:auto;max-width:calc(100vw - 16px)}}
/* R4: keep core classroom actions in the chrome, outside the animated board. */
.r4-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 12px;border:1px solid var(--line,#e4e4e7);border-radius:8px;background:var(--surface,#fff);color:var(--ink,#18181b);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.r4-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg,#102a21);border-color:transparent;font-weight:600}
#r4LessonHome{margin-right:12px}#r4ClassroomMenu{margin:0;width:244px;max-width:calc(100vw - 16px)}
#r4ClassroomMenu button{width:100%;justify-content:flex-start;margin:3px 0}
#topNavbar #redesignPresent{position:static;inset:auto;z-index:auto;min-height:36px;padding:8px;box-shadow:none;border:1px solid var(--line);flex:none;visibility:visible;pointer-events:auto}
#topNavbar .redesign-end{flex-wrap:nowrap;gap:6px}
#r4ExportVideo{width:100%;margin-top:10px}
#recordingResult{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
#recordingResult h2{font-size:18px;font-weight:600;margin-bottom:12px}
#recordingResult a,#recordingResult>button{display:inline-flex;min-height:40px;align-items:center;padding:8px 12px;margin:12px 8px 0 0;border-radius:8px;border:1px solid var(--line)}
@media(max-width:760px){#topNavbar{flex-wrap:wrap}#topNavbar .redesign-start{min-width:0;flex:1}#topNavbar .redesign-end{width:100%;justify-content:flex-end}#topNavbar #r4LessonToolbar{margin-right:auto}#topNavbar #redesignPresent{min-height:40px}#r4LessonToolbar,#r4Classroom{min-height:40px;font-size:12px;padding:8px}#redesignHero h1{margin-bottom:18px}}
html.s1 body #topNavbar #redesignPresent{position:static!important;inset:auto!important;width:auto!important;height:auto!important;padding:8px!important;min-height:36px!important;flex:none;white-space:nowrap}
html body #topNavbar #r4LessonToolbar{background:var(--btn-primary-bg)!important;color:var(--btn-primary-fg,#102a21)!important;padding:8px 12px!important}
html body #topNavbar #redesignPresent::after{content:attr(aria-label);font-size:12px}
html body #topNavbar #redesignPresent span{display:none!important}
@media(max-width:760px){html.s1.s1.s1 body #topNavbar{height:96px!important;min-height:96px!important;flex-wrap:wrap!important;padding:6px 10px!important;align-content:center;row-gap:4px}html.s1.s1{--s1-top:96px}html body #topNavbar .redesign-end{width:100%!important;justify-content:flex-end}html body #topNavbar .redesign-start{width:100%!important}html body #topNavbar #redesignPresent::after{content:none}html body #topNavbar #r4Classroom{font-size:12px;padding:8px!important}html body #topNavbar #r4LessonToolbar{margin-right:auto!important;font-size:12px}}
/* 2D 只出四个角点手柄（等比缩放）+ 下方旋转小球；边中点拉伸手柄收起。手柄常显，选区一眼看得出 */
html body #canvasCard .selection-handle-n,html body #canvasCard .selection-handle-s,html body #canvasCard .selection-handle-e,html body #canvasCard .selection-handle-w{display:none}
html body #canvasCard .selection-rot-handle{opacity:.55;transition:opacity .12s}
html body #canvasCard .selection-box:hover .selection-rot-handle,html body #canvasCard .selection-rot-handle:hover{opacity:1}
/* 几何图形弹出半圆弧菜单时，选中框上方的小工具条和右上角面板都收起，一次只出一种 */
html.otb-open #canvasCard .selection-action-pill{display:none}

/* 圆弧菜单（华哥 10-22）：圆弧打开时不出浮着的「拉成立体」胶囊 */
html.otb-open #pullSolidHandle:not(.is-pulling){display:none!important}

/* Language choices are a disclosure inside the account menu. Generic menu flex rules
   must never paint a collapsed submenu. */
#redesignAccountMenu #langMenu.hidden { display: none !important; }
#redesignAccountMenu #langMenu { position: static; width: 100%; margin: 4px 0 0; box-sizing: border-box; box-shadow: none; }
.redesign-menu { overflow-y: auto; overscroll-behavior: contain; }

html.app-shell-ready:not(.app-shell-mobile):not(.app-shell-open){--redesign-offset:52px}
#topNavbar #redesignAvatar,#topNavbar #btnTopProBadge {display:none!important}

/* Account entry stays in the top bar on desktop and 375px phones. */
html.s1.s1.s1.s1 body #topNavbar #topAccountButton{display:inline-flex!important;flex:0 0 auto;align-items:center;justify-content:center;min-width:48px;height:36px;padding:0 12px;border:1px solid #5f6368;border-radius:999px;background:transparent;color:#fff;font:500 14px/1 system-ui;white-space:nowrap;cursor:pointer}
html.s1.s1.s1.s1 body #topNavbar #topAccountButton.is-member{width:36px;min-width:36px;padding:0;background:#4285f4;border-color:transparent}
#topAccountButton:focus-visible{outline:2px solid #4285f4;outline-offset:2px}
@media(max-width:767px){html.s1.s1.s1.s1 body #topNavbar #topAccountButton{height:36px;padding:0 8px;font-size:13px}.as-account-menu .as-account-row{min-height:44px}}