:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #243344; background: #fcfcfa; font-synthesis: none;
  --green: #277a69; --line: #e5e8e5; --shadow: 0 4px 20px #203b3010, 0 1px 3px #203b3008;
  --dock-height: 62px;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, input, select { font: inherit; }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 46px; min-height: 46px; padding: 0 12px; flex-shrink: 0;
  border: 0; border-radius: 10px; background: transparent; color: inherit;
  cursor: pointer; touch-action: manipulation; font-size: 13px; font-weight: 550;
}
button:hover { background: #eef2ee; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #65b8a8; outline-offset: 2px; }
button:disabled { opacity: .28; cursor: default; }
button.active, button[aria-pressed=true] { background: #e8f2ed; color: var(--green); }
button.primary { background: var(--green); color: white; }
button.primary:hover { background: #206858; }
svg { width: 21px; height: 21px; flex-shrink: 0; display: block; pointer-events: none; }
#board { position: absolute; inset: 0; background: #fcfcfa; overflow: hidden; }
.paper { position: absolute; inset: 0; pointer-events: none; }
.paper-right { display: none; }
#board.comparison .paper { width: 50%; right: auto; }
#board.comparison .paper-right { display: block; left: 50%; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#base { pointer-events: none; }
#live { touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
#empty-hint { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; white-space: nowrap; color: #6d7d72; }
.hint-symbol { font-size: 52px; font-weight: 300; color: #9db4a3; }
h1 { font-size: 30px; letter-spacing: -1px; font-weight: 500; color: #64796a; margin: 20px 0 12px; }
#empty-hint p { font-size: 15px; margin: 0 0 15px; }
#empty-hint > span:last-child { font-size: 12px; color: #95a196; }
.dark #empty-hint h1 { color: #a2b9a8; }
/* A single compact row. Menus float above their launchers. */
#bottom-dock { position: absolute; z-index: 7; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; max-width: calc(100% - 24px); width: max-content; height: 62px; padding: 7px 10px; overflow-x: auto; overflow-y: hidden; background: #fffffff7; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 32px #203b3017; scrollbar-width: thin; }
#bottom-dock > button { white-space: nowrap; }
.brand { text-decoration: none; flex-shrink: 0; margin-right: 5px; }
.brandmark { height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; background: var(--green); color: white; border-radius: 10px; font: bold 31px/1 Georgia,serif; }
.brandmark span { font: 28px Georgia; align-self: flex-end; margin: 0 0 2px -2px; color: #9ed3ae; }
.small-divider { height: 24px; border-left: 1px solid var(--line); margin: 0 3px; flex-shrink: 0; }
.menu-arrow svg { width: 13px; height: 13px; }
.color-swatch { width: 22px; height: 22px; border-radius: 50%; background: #243344; display: block; }
#width-label { white-space: nowrap; }
#colors { display: grid; grid-template-columns: repeat(6,1fr); gap: 2px; }
#colors button { padding: 9px; min-width: 40px; }
#colors button span { height: 24px; width: 24px; border-radius: 50%; border: 1px solid #00000012; }
#width-dot { display: block; width: 3px; height: 3px; background: #243344; border-radius: 50%; }
#ink-mode, .zoom-controls, .page-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#ink-mode { background: #f4f6f2; padding: 4px; border-radius: 10px; }
#ink-mode button { flex: 1; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool-grid button { justify-content: flex-start; }
#zoom-reset { font-variant-numeric: tabular-nums; min-width: 80px; }
#show-ui { position: absolute; bottom: 18px; left: 20px; z-index: 7; width: 54px; height: 54px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
body.ui-hidden #bottom-dock, body.ui-hidden .panel { display: none; }
.save-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #829087; margin: 12px 0; }
.save-status > span:first-child { width: 6px; height: 6px; background: #70a583; border-radius: 50%; flex-shrink: 0; }
.text-input { width: 100%; min-height: 46px; border: 1px solid var(--line); padding: 10px; border-radius: 8px; margin-top: 10px; }
/* Menus open immediately above the bottom controls; dialogs are bottom anchored too. */
.panel { position: absolute; right: 18px; bottom: calc(var(--dock-height) + 28px); width: 320px; max-height: calc(100vh - var(--dock-height) - 50px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; z-index: 6; box-shadow: 0 10px 50px #203b301a; font-size: 13px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 6px; }
h2 { font-size: 16px; font-weight: 650; margin: 0 0 17px; letter-spacing: -.3px; }
.panel-head h2 { margin: 0; }
.field { display: block; margin: 20px 0; color: #51615a; font-size: 12px; }
.field output { float: right; color: var(--green); }
input[type=range] { width: 100%; accent-color: var(--green); margin-top: 10px; min-height: 46px; cursor: pointer; }
select { width: 100%; min-height: 46px; padding: 12px; border: 1px solid var(--line); background: #fafbf8; border-radius: 8px; color: #243344; margin-top: 10px; }
.toggle { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; min-height: 46px; }
.toggle input { width: 24px; height: 24px; accent-color: var(--green); }
.note { font-size: 11px; line-height: 1.7; color: #7b8980; margin: 12px 0; }
.wide { display: flex; width: 100%; justify-content: flex-start; margin: 5px 0; text-align: left; line-height: 1.5; }
.danger { color: #b3504a; }
.export-panel { width: 300px; }
.pages-panel { width: 300px; }
#page-list { max-height: 300px; overflow: auto; }
#page-list button { width: 100%; justify-content: flex-start; }
#compare-labels { position: absolute; top: 24px; left: 0; right: 0; display: flex; pointer-events: none; }
#compare-labels > span { width: 50%; text-align: center; font-size: 12px; color: #688172; }
#compare-labels b { display: inline-block; border: 1px solid #cfddd3; border-radius: 5px; padding: 4px 7px; margin-right: 7px; font-size: 10px; }
#compare-labels small { display: block; margin-top: 8px; font-size: 10px; color: #92a095; }
#board.comparison:after { content: ""; position: absolute; inset: 0 auto 0 50%; border-left: 1px dashed #c7d5c9; pointer-events: none; }
.live-badge { font-size: 9px; letter-spacing: 1px; color: var(--green); background: #e8f2ed; padding: 5px; border-radius: 4px; }
#diagnostics-values { font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
#diagnostics-values dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#diagnostics-values dt, #diagnostics-values p { color: #7b8980; }
#diagnostics-values dd { margin: 0; text-align: right; }
#diagnostics-values details { margin: 14px 0; }
#toast { position: absolute; bottom: calc(var(--dock-height) + 30px); left: 50%; transform: translateX(-50%); background: #243b31; color: #fff; border-radius: 10px; padding: 14px 22px; font-size: 13px; z-index: 10; max-width: 90vw; pointer-events: none; }
dialog { position: fixed; top: auto; bottom: 25px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; padding: 28px; width: min(440px, 90vw); color: #243344; box-shadow: var(--shadow); max-height: calc(100vh - 50px); overflow: auto; }
dialog::backdrop { background: #172b2640; }
dialog p { font-size: 13px; line-height: 1.7; color: #718077; margin-bottom: 24px; }
dialog > div { display: flex; justify-content: flex-end; gap: 8px; }
.background-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.background-choices button { flex-direction: column; padding: 10px; border: 1px solid var(--line); gap: 8px; }
.background-choices button[aria-pressed=true] { border-color: var(--green); }
.paper-preview { display: block; height: 52px; width: 100%; border-radius: 5px; background-color: #fcfcfa; }
.paper-preview.dots { background-image: radial-gradient(#c1d1c8 1px, transparent 1px); background-size: 12px 12px; }
.paper-preview.grid { background-image: linear-gradient(to right, #c1d1c8 1px, transparent 1px), linear-gradient(to bottom, #c1d1c8 1px, transparent 1px); background-size: 12px 12px; }
.paper-preview.lines { background-image: linear-gradient(to bottom, #c1d1c8 1px, transparent 1px); background-size: 12px 12px; }
[hidden] { display: none !important; }
@media(max-width:1100px) { .dock-label { display: none; } #bottom-dock { gap: 2px; } }
@media(max-width:700px) {
  #bottom-dock { height: 60px; bottom: max(8px, env(safe-area-inset-bottom)); max-width: calc(100% - 16px); padding: 6px; gap: 0; }
  #bottom-dock .brand, #bottom-dock .small-divider, #bottom-dock .menu-arrow { display: none; }
  #bottom-dock > button { padding: 0; min-width: 46px; width: 46px; }
  .panel { width: min(320px, calc(100vw - 16px)); padding: 15px; max-height: calc(100vh - 100px); }
  h1 { font-size: 24px; } #empty-hint { top: 40%; }
  #compare-labels small { display: none; }
}
.app-workspace { position: absolute; z-index: 5; inset: 16px 16px calc(var(--dock-height) + 32px); background: #fcfcfa; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 50px #203b3015; display: flex; flex-direction: column; overflow: hidden; }
.app-content { flex: 1; min-height: 0; overflow: auto; }
.app-footer { min-height: 60px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 6px 18px; flex-shrink: 0; font-size: 13px; }
.app-footer strong { white-space: nowrap; }.app-footer > span { color: #829087; font-size: 11px; }.app-footer a { color: var(--green); }
#app-close { margin-left: auto; }
#timer-app { display: flex; flex-direction: column; padding: 20px; }
.timer-face { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; }
#timer-caption { font-size: clamp(14px,2vw,30px); color: #829087; }
#timer-display { font-size: clamp(64px,min(18vw,35vh),300px); line-height: 1.1; letter-spacing: -.05em; font-weight: 550; font-variant-numeric: tabular-nums; }
#timer-status { font-size: clamp(14px,2vw,28px); }.time-low #timer-display { color: #b56a35; }.time-ended #timer-display,.time-ended #timer-status { color: #b3504a; }
.timer-controls,.timer-presets { display: flex; align-items: flex-end; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.timer-controls label { font-size: 11px; color: #718077; }.timer-controls input { display: block; margin-top: 5px; padding: 10px; min-height: 46px; width: 85px; border: 1px solid var(--line); border-radius: 8px; }
.timer-presets button { color: var(--green); background: #edf3ed; }
.timer-running { position: relative; }.timer-running:after { content: ''; width: 6px; height: 6px; background: #d88b42; border-radius: 50%; position: absolute; right: 5px; top: 5px; }
#geogebra-frame { width: 100%; height: 100%; border: 0; display: block; }
#calculator-app { display: flex; align-items: flex-start; justify-content: center; padding: 20px; }
.calculator-shell { width: min(100%,600px); }.calculator-input-label { color: #718077; font-size: 12px; }
#calculator-input { display: block; width: 100%; min-height: 55px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: clamp(20px,3vw,34px); text-align: right; }
#calculator-result { display: block; min-height: 52px; padding: 10px; text-align: right; font-size: clamp(22px,4vw,38px); overflow-wrap: anywhere; color: var(--green); }
#calculator-result.error { color: #b3504a; font-size: 16px; }
#calculator-angle { display: flex; gap: 8px; margin: 5px 0; }
#calculator-functions { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; margin: 10px 0; }
#calculator-functions button { padding: 5px; background: #edf3ed; color: var(--green); min-width: 0; }
#calculator-keys { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
#calculator-keys button { min-height: 50px; background: #f0f2ef; font-size: 20px; }#calculator-keys .equals { grid-column: span 2; background: var(--green); }
@media(max-width:700px) {
  .app-workspace { inset: 8px 8px calc(var(--dock-height) + 22px); border-radius: 14px; }
  .app-footer { padding: 5px 10px; gap: 6px; }.app-footer > span { display: none; }.app-footer strong { white-space: normal; font-size: 12px; }
  #timer-app { padding: 10px; }.timer-controls { gap: 5px; }.timer-controls button { font-size: 12px; padding: 0 8px; }
  .timer-controls input { width: 72px; }.timer-presets button { min-width: 42px; padding: 0 8px; }
  #calculator-app { padding: 10px; } #calculator-functions { grid-template-columns: repeat(4,1fr); }
}