/* DrawDent interface: restrained surfaces and a canvas-first hierarchy. */
:root{--dd-bg:#f5f6f8;--dd-surface:#fff;--dd-soft:#f5f7f8;--dd-line:#e5e9ec;--dd-text:#24333c;--dd-muted:#75818a;--dd-accent:#247c77;--dd-selected:#e8f3f1}
html[data-theme=dark]{--dd-bg:#14191d;--dd-surface:#1d2429;--dd-soft:#242d33;--dd-line:#354047;--dd-text:#e0e8ed;--dd-muted:#a2afb8;--dd-accent:#94d2c8;--dd-selected:#304a47}
html body{background:var(--dd-bg);color:var(--dd-text)}.shell{max-width:1800px;padding:0 28px 24px}.top{min-height:80px;gap:16px;border-color:var(--dd-line);margin-bottom:20px}.brand{font-size:25px;letter-spacing:-1px;gap:10px}.brandSubtitle{font-size:8px;letter-spacing:1.5px;color:var(--dd-muted)}html .top .logo{width:40px;height:40px;background:var(--dd-accent);border-radius:11px;color:var(--dd-surface)}.logo svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}html .selectedToothHeading{font-size:12px;color:var(--dd-muted)}html .themeToggle{border-color:var(--dd-line);color:var(--dd-muted);padding:10px 12px}html .saveDrawing{border-radius:8px;padding:11px 16px}
html .drawingLayout{grid-template-columns:minmax(0,1fr) 260px;gap:18px}html .drawingLayout.cueCollapsed{grid-template-columns:1fr}html .studio{background:var(--dd-surface);border-color:var(--dd-line);padding:22px;border-radius:12px;box-shadow:none}.studioHead{margin-bottom:18px}.studioHead h2{font-size:20px;letter-spacing:-.5px;margin:0}.studioHead .studioSubtitle{margin:5px 0 0;font-size:12px;color:var(--dd-muted)}html #randomTooth{background:var(--dd-surface);border-color:var(--dd-line);color:var(--dd-text);font-size:11px;padding:9px 12px}html #randomTooth:hover{background:var(--dd-soft)}html .pickerRow{background:var(--dd-soft);border-color:var(--dd-line);border-radius:9px}html .pickerGroup{border-color:var(--dd-line)}html .pickerLabel{color:var(--dd-muted);font-size:9px}html .pickerTrigger{color:var(--dd-text);font-size:12px}html .pickerChevron{background:transparent;color:var(--dd-muted)}html .workspaceModes{border-color:var(--dd-line);padding-bottom:12px;margin-bottom:16px}html .workspaceModes button{background:transparent;color:var(--dd-muted);font-size:12px;padding:9px 16px}html .workspaceModes button.active{background:var(--dd-selected);color:var(--dd-accent)}html .workspaceModes span{color:var(--dd-muted);font-size:11px}html .workspaceModes #toggleCue{border-color:var(--dd-line);color:var(--dd-muted)}
.sketchDesk{grid-template-columns:66px minmax(0,1fr);gap:16px}html .toolRail{border-color:var(--dd-line);padding-right:10px;gap:5px}html .toolRail button{color:var(--dd-muted);min-height:59px;border-radius:8px;font-size:9px}html .toolRail button.active{background:var(--dd-selected);color:var(--dd-accent);border-color:transparent}html .toolRail button:hover{background:var(--dd-soft)}.workspaceTools{padding-bottom:10px}html .workspaceTools button{background:var(--dd-surface);border-color:var(--dd-line);color:var(--dd-muted);border-radius:7px}.workspaceTools #clearDrawing{margin-left:auto}.brushSettings{border:1px solid var(--dd-line);border-radius:9px;margin-bottom:12px;background:var(--dd-soft)}.brushSettings summary{cursor:pointer;padding:9px 12px;font-size:11px;font-weight:600;color:var(--dd-text)}.brushSettings summary span{font-weight:400;font-size:10px;color:var(--dd-muted);margin-left:8px}html .inkControls{background:transparent;border:0;border-top:1px solid var(--dd-line);border-radius:0;padding:11px 12px;gap:12px}html .inkControls label{color:var(--dd-muted);font-size:11px}.inkControls input[type=range]{width:60px}.colorPalette{gap:6px}.colorSwatch{width:22px;height:22px}.inkControls .brushPreview{margin-left:auto}.canvasFrame,.copyReference{border-radius:8px;box-shadow:none}.canvasStatus{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--dd-line);color:var(--dd-muted);font-size:10px}.canvasViewTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.canvasViewTools button{border:1px solid var(--dd-line);background:var(--dd-surface);color:var(--dd-text);padding:4px 9px;border-radius:6px;font-size:11px;min-width:28px}.canvasViewTools output{min-width:35px;text-align:center}.canvasViewTools label{display:flex;align-items:center;gap:4px}.canvasViewTools button:disabled{opacity:.4;cursor:default}html .comparisonBar button{background:var(--dd-soft);border-color:var(--dd-line);color:var(--dd-accent)}html .comparisonBar button[aria-pressed=true]{background:var(--dd-selected)}html .comparisonBar label,html .comparisonBar span{color:var(--dd-muted)}html .drawToolbar{border:0;padding-top:0;margin-top:10px}html .drawToolbar .btn{background:transparent;color:var(--dd-muted);border:1px solid var(--dd-line);border-radius:7px}
html .lessonCard{background:var(--dd-surface);border-color:var(--dd-line);padding:20px;border-radius:12px}html .lessonCard .cueTitle{font-size:16px;font-weight:650;letter-spacing:-.3px;margin:0 0 4px}html .lessonCard .cueSubtitle{font-size:11px;color:var(--dd-muted);margin:0 0 17px}html .anatomyNote{border-color:var(--dd-line)}html .cueFocusLabel{font-size:9px;color:var(--dd-muted)}html .anatomyNote .cueLead{font-size:12px;color:var(--dd-text)}html .cuePoints{font-size:11px;color:var(--dd-muted);line-height:1.8}html .toothFacts{border-color:var(--dd-line)}html .toothFacts h3{background:var(--dd-selected);color:var(--dd-accent)}html .toothFacts li{background:var(--dd-soft);color:var(--dd-text);border:0;border-radius:7px;font-size:11px}html .anatomyNote .factsNote,html .foot{color:var(--dd-muted)}
@media(max-width:1100px){html .drawingLayout{grid-template-columns:1fr}.studioAside{position:static}.shell{padding:0 18px 20px}}
@media(max-width:650px){.shell{padding:0 10px 16px}.top{gap:8px;padding:12px 0;min-height:70px}.brand{font-size:22px}.brandSubtitle{font-size:7px}html .top .logo{width:34px;height:34px}html .studio{padding:13px}.studioHead h2{font-size:18px}.studioHead .studioSubtitle{font-size:10px}html .themeToggle{padding:9px;font-size:10px}html .saveDrawing{padding:10px;font-size:10px}.sketchDesk{grid-template-columns:1fr}.toolRail{flex-direction:row}.canvasStatus{flex-wrap:wrap}.canvasStatus>span{display:none}.canvasViewTools{width:100%;justify-content:center}.brushSettings summary span{font-size:9px}html .colorSwatch{width:26px;height:26px}.workspaceModes span{min-width:100%}}
/* DrawDent slate + indigo theme; artwork colors are independent. */
:root{--dd-bg:#f3f5fa;--dd-surface:#ffffff;--dd-soft:#f0f3f9;--dd-line:#dfe5ef;--dd-text:#27334a;--dd-muted:#6b7890;--dd-accent:#5658c8;--dd-selected:#eeedff;--teal:#5658c8}
html[data-theme=dark]{--dd-bg:#111522;--dd-surface:#1b2132;--dd-soft:#242c40;--dd-line:#35405a;--dd-text:#e5eaf5;--dd-muted:#a3b0c9;--dd-accent:#b3afff;--dd-selected:#343359;--teal:#b3afff}
html[data-theme] body{background:var(--dd-bg);color:var(--dd-text)}
html[data-theme] .top,html[data-theme] .workspaceModes,html[data-theme] .toolRail,html[data-theme] .anatomyNote,html[data-theme] .toothFacts{border-color:var(--dd-line)}
html[data-theme] .studio,html[data-theme] .lessonCard{background:var(--dd-surface);border-color:var(--dd-line)}
html[data-theme] .brandSubtitle,html[data-theme] .selectedToothHeading,html[data-theme] .pickerLabel,html[data-theme] .workspaceModes span,html[data-theme] .cueFocusLabel,html[data-theme] .cuePoints,html[data-theme] .inkControls label,html[data-theme] .comparisonBar label,html[data-theme] .comparisonBar span,html[data-theme] .anatomyNote .factsNote,html[data-theme] .foot{color:var(--dd-muted)}
html[data-theme] .logo{background:#6060d5;color:#fff}
html[data-theme] .saveDrawing{background:#6060d5;color:#fff}html[data-theme] .saveDrawing:hover{background:#4e4fc0}
html[data-theme] .themeToggle{color:var(--dd-muted);border-color:var(--dd-line)}html[data-theme] .themeToggle:hover{background:var(--dd-soft)}
html[data-theme] .pickerRow,html[data-theme] .morphologyRow{background:var(--dd-soft);border-color:var(--dd-line);color:var(--dd-text)}html[data-theme] .pickerGroup{border-color:var(--dd-line)}html[data-theme] .pickerTrigger{color:var(--dd-text)}html[data-theme] .pickerTrigger:hover,html[data-theme] .pickerTrigger[aria-expanded=true]{color:var(--dd-accent)}html[data-theme] .pickerChevron{background:transparent;color:var(--dd-muted)}html[data-theme] .pickerTrigger[aria-expanded=true] .pickerChevron{background:var(--dd-selected);color:var(--dd-accent)}
html[data-theme] .pickerMenu{background:var(--dd-surface);border-color:var(--dd-line);box-shadow:0 12px 32px #111b3526}html[data-theme] .pickerOption{color:var(--dd-text)}html[data-theme] .pickerOption:hover,html[data-theme] .pickerOption:focus-visible{background:var(--dd-soft);color:var(--dd-accent)}html[data-theme] .pickerOption[aria-selected=true]{background:var(--dd-selected);color:var(--dd-accent)}html[data-theme] .pickerOption:focus-visible{box-shadow:inset 0 0 0 2px var(--dd-accent)}
html[data-theme] .morphologyRow select{background:var(--dd-surface);border-color:var(--dd-line);color:var(--dd-text)}
html[data-theme] .workspaceModes button,html[data-theme] .toolRail button{background:transparent;color:var(--dd-muted)}html[data-theme] .workspaceModes button.active,html[data-theme] .toolRail button.active{background:var(--dd-selected);color:var(--dd-accent);border-color:transparent}html[data-theme] .toolRail button:hover{background:var(--dd-soft)}html[data-theme] .workspaceModes #toggleCue{background:transparent;color:var(--dd-muted);border-color:var(--dd-line)}
html[data-theme] .workspaceTools button,html[data-theme] #randomTooth{background:var(--dd-surface);border-color:var(--dd-line);color:var(--dd-text)}html[data-theme] #randomTooth:hover{background:var(--dd-selected);color:var(--dd-accent)}
html[data-theme] .inkControls{background:transparent;border-color:var(--dd-line)}html[data-theme] .colorSwatch{border-color:var(--dd-soft);box-shadow:0 0 0 1px var(--dd-line)}html[data-theme] .colorSwatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--dd-accent)}html[data-theme] .inkControls input[type=color]{background:var(--dd-surface);border-color:var(--dd-line)}
html[data-theme] .comparisonBar button,html[data-theme] .drawToolbar .btn{background:var(--dd-soft);color:var(--dd-accent);border-color:var(--dd-line)}html[data-theme] .comparisonBar button[aria-pressed=true]{background:var(--dd-selected)}html[data-theme] .anatomyNote .cueLead{color:var(--dd-text)}html[data-theme] .cuePoints li::marker{color:var(--dd-accent)}html[data-theme] .toothFacts h3{background:var(--dd-selected);color:var(--dd-accent)}html[data-theme] .toothFacts li{background:var(--dd-soft);color:var(--dd-text)}
html[data-theme] input[type=checkbox],html[data-theme] input[type=range]{accent-color:#7774df}html[data-theme] button:focus-visible,html[data-theme] .pickerTrigger:focus-visible{outline-color:var(--dd-accent)}html[data-theme] .canvasFrame canvas:focus-visible{outline-color:#7774df}
html[data-theme=light] .workspaceTools #clearDrawing{background:#fff0f1;color:#a54255;border-color:#eccbd1}html[data-theme=dark] .workspaceTools #clearDrawing{background:#442b3a;color:#f2b8c5;border-color:#714353}
html[data-theme] .toast{background:#343764;color:#fff}
/* DrawDent welcome screen */
.welcomeScreen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;position:relative;background:radial-gradient(ellipse at 50% 30%,var(--dd-selected),transparent 65%),var(--dd-bg)}.welcomeContent{text-align:center;max-width:580px;padding:36px 0}.welcomeMark{width:88px;height:88px;display:grid;place-items:center;margin:0 auto 30px;background:#6060d5;color:white;border-radius:25px;box-shadow:0 12px 35px #6060d52b}.welcomeMark svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.welcomeEyebrow{font-size:10px;font-weight:650;letter-spacing:.2em;color:var(--dd-muted);margin:0 0 14px}.welcomeContent h1{font-size:clamp(48px,8vw,76px);line-height:1.05;font-weight:750;letter-spacing:-.055em;margin:0;color:var(--dd-text)}.welcomeDescription{font-size:clamp(18px,3vw,23px);line-height:1.55;color:var(--dd-muted);margin:22px 0 34px;font-weight:400}.practiceEntry{display:inline-flex;align-items:center;justify-content:center;gap:28px;border:0;border-radius:12px;padding:18px 24px;background:#6060d5;color:white;font-size:15px;font-weight:650;box-shadow:0 6px 20px #6060d526;transition:background .18s,transform .18s}.practiceEntry:hover{background:#4e4fc0;transform:translateY(-2px)}.practiceEntry:active{transform:translateY(0)}.practiceEntry span{font-size:20px}.welcomeCaption{color:var(--dd-muted);font-size:12px;margin:18px 0 0}.welcomeFoot{color:var(--dd-muted);font-size:11px;letter-spacing:.03em;margin:30px 0 0}.homeButton{background:var(--dd-soft);color:var(--dd-muted);border:1px solid var(--dd-line);width:32px;height:32px;border-radius:8px;font-size:21px;flex-shrink:0}.homeButton:hover{color:var(--dd-accent);background:var(--dd-selected)}@media(max-width:650px){.welcomeScreen{padding:28px 20px}.welcomeMark{width:74px;height:74px;border-radius:21px}.welcomeMark svg{width:50px;height:50px}.practiceEntry{font-size:14px;padding:16px 20px;gap:18px}.top .homeButton{width:28px;height:28px}.top{gap:6px}}@media(prefers-reduced-motion:reduce){.practiceEntry{transition:none}.practiceEntry:hover{transform:none}}

.releasePrivacy{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px 20px 22px;font:11px system-ui;color:var(--dd-muted)}.releasePrivacy a{color:var(--dd-accent)}