/* Sketch is authored paper; tools stay quiet until they are needed. */
:root { color-scheme:light; --paper:#f8f8f5; --ink:#111; color:var(--ink); background:var(--paper); --sketch-ui-font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family:var(--sketch-ui-font); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; background:var(--paper); overflow:hidden; overscroll-behavior:none; }
[hidden] { display:none!important; }
canvas { position:fixed; inset:0; display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
#paper[data-tool="select"] { cursor:default; }
#paper.has-cursor { cursor:none; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; touch-action:manipulation; font:inherit; color:inherit; }
button { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:44px; height:44px; padding:0 10px; border:0; border-radius:0; background:transparent; cursor:pointer; font-size:12px; transition:opacity 200ms ease; }
button:focus-visible::after { content:''; position:absolute; bottom:5px; left:calc(50% - 6px); width:12px; border-bottom:1px solid currentColor; }
.color-control:has(input:focus-visible),input[type="range"]:focus-visible,select:focus-visible { border-bottom:1px solid currentColor; }
button:disabled { opacity:.22; cursor:default; }
svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.controls { position:fixed; z-index:4; bottom:max(8px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; width:max-content; max-width:calc(100% - 8px); padding:2px 0; background:var(--paper); }
.controls>button { width:44px; padding:0; opacity:.5; transition:opacity 200ms ease; }
.controls>button[aria-pressed="true"],.controls>button[aria-expanded="true"] { opacity:1; }
.controls>button:disabled { opacity:.2; }
.panel { position:fixed; z-index:4; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 62px + var(--keyboard-lift,0px)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); padding:8px; background:var(--paper); border:1px solid #11111112; box-shadow:0 4px 24px #11111108; }
.brush-panel { width:282px; }
.brush-tools { display:flex; align-items:center; gap:4px; }
.brush-tools button { flex:1; opacity:.45; }
.brush-tools button[aria-pressed="true"] { opacity:1; }
.palette { display:flex; justify-content:center; margin:4px 0; }
.palette button { width:44px; padding:0; }
.swatch { display:block; width:14px; height:14px; border-radius:50%; background:var(--color); }
button[aria-pressed="true"] .swatch { outline:1px solid var(--ink); outline-offset:4px; }
.brush-weight { display:flex; align-items:center; gap:16px; padding:0 10px; font-size:12px; white-space:nowrap; }
.brush-weight input { width:100%; min-width:0; }
input[type="range"] { appearance:none; -webkit-appearance:none; height:44px; margin:0; padding:0; background:transparent; color:var(--ink); cursor:pointer; }
input[type="range"]::-webkit-slider-runnable-track { height:1px; background:#b8b1aa; }
input[type="range"]::-moz-range-track { height:1px; background:#b8b1aa; }
input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; margin-top:-4.5px; border:0; border-radius:50%; background:var(--ink); }
input[type="range"]::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:var(--ink); }
.color-control { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; }
input[type="color"] { appearance:none; -webkit-appearance:none; width:44px; height:44px; padding:12px; border:0; background:transparent; cursor:pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
input[type="color"]::-webkit-color-swatch { border:1px solid #11111122; border-radius:50%; }
input[type="color"]::-moz-color-swatch { border:1px solid #11111122; border-radius:50%; }
.add-panel { width:212px; padding:6px; }
.add-panel button { display:flex; width:100%; justify-content:flex-start; gap:16px; padding:0 12px; opacity:.65; }
.object-controls { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px; padding:4px; }
.weight-control { display:flex; align-items:center; width:84px; }
.weight-control input { width:100%; }
.object-controls button { opacity:.6; }
.object-controls button[aria-pressed="true"] { opacity:1; }
#text-size-toggle { gap:4px; width:48px; min-width:48px; padding:0; font-variant-numeric:tabular-nums; }
#text-size-toggle svg { width:12px; height:12px; }
#text-size-toggle[aria-expanded="true"] { opacity:1; }
#text-size-control button:focus-visible { text-decoration:none; }
#text-size-options { position:absolute; z-index:1; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; gap:4px; width:206px; padding:8px; border:1px solid #11111112; border-radius:4px; background:var(--paper); box-shadow:0 4px 20px #11111108; }
#text-size-options button { width:44px; padding:0; border-radius:3px; font-variant-numeric:tabular-nums; }
#text-size-options button[aria-pressed="true"] { background:color-mix(in srgb,var(--paper) 95%,var(--ink)); }
body:has(#text-size-options:not([hidden])) #order-controls { visibility:hidden; }
.text-panel { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; width:360px; gap:8px; }
#sketch-text { grid-column:1/-1; }
/* Keep the native 16px picker (no phone zoom), with a label sized like Done. */
.text-font-control { position:relative; justify-self:start; display:inline-flex; align-items:center; min-height:44px; min-width:44px; padding-right:24px; font-size:14px; }
.text-font-control::after { content:''; position:absolute; right:5px; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); pointer-events:none; }
.text-font-control:has(select:focus-visible) { outline:1px solid #326b9160; outline-offset:2px; }
.text-font-control #text-font { position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:16px; }
#text-font { height:44px; max-width:140px; border:0; background:transparent; font-size:12px; cursor:pointer; }
.draw-page .site-home { font-family:var(--sketch-ui-font); grid-template-columns:minmax(0,1fr); }
#sketch-text { display:block; width:100%; min-width:0; max-height:180px; min-height:84px; border:0; border-radius:0; resize:vertical; padding:8px; background:transparent; font-size:16px; line-height:1.4; }
#sketch-text::placeholder { color:#77716d; }
#selection { position:fixed; z-index:2; border:1px solid #11111140; pointer-events:none; }
#selection button { position:absolute; width:44px; height:44px; padding:0; min-width:44px; transform:translate(-50%,-50%); pointer-events:auto; touch-action:none; }
#selection button span { width:7px; height:7px; background:var(--paper); border:1px solid #11111180; border-radius:50%; }
#selection [data-handle="nw"],#selection [data-handle="se"] { cursor:nwse-resize; }
#selection [data-handle="ne"],#selection [data-handle="sw"] { cursor:nesw-resize; }
#selection [data-handle="start"],#selection [data-handle="end"] { cursor:move; }
#brush-cursor { position:fixed; z-index:1; pointer-events:none; border:1px solid var(--cursor-color,#111); border-radius:50%; transform:translate(-50%,-50%); }
#draw-notices { position:fixed; z-index:7; top:58px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); text-align:center; font-size:12px; line-height:1.4; }
#draw-feedback { margin:0; pointer-events:none; }
#draw-feedback:not(:empty),#storage-issue { padding:6px 10px; background:var(--paper); }
#storage-issue { max-width:440px; }
#storage-retry { height:36px; min-height:36px; text-decoration:underline; }

body:has(#page-list:not([hidden])) #draw-notices { top:auto; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 62px); }
body:has(#page-list:not([hidden])) #page-list { max-height:calc(100dvh - 128px - env(safe-area-inset-bottom) - var(--notice-height,0px) - 8px); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(hover:hover) { .controls>button:not(:disabled):hover,.add-panel button:hover,.object-controls button:hover { opacity:1; } }
button:focus-visible { opacity:1; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto; } }

#page-controls { position:fixed; z-index:4; top:max(8px,env(safe-area-inset-top)); right:calc(max(var(--site-edge,16px),env(safe-area-inset-right)) - 16px); display:flex; align-items:center; width:max-content; background:var(--paper); }
#page-controls button { width:44px; padding:0; opacity:.55; }
#page-controls button:disabled { opacity:.2; }
#page-controls #page-number { width:calc(var(--page-digits,2)*1ch + 2ch + 4px); min-width:44px; font-variant-numeric:tabular-nums; padding:0 2px; text-align:center; font-size:12px; color:#77716d; }
.add-panel { max-height:calc(100dvh - 140px - var(--keyboard-lift,0px)); overflow-y:auto; }
@media(hover:hover) { #page-controls button:not(:disabled):hover { opacity:1; } }

#page-name-control { display:flex; align-items:center; position:fixed; z-index:5; top:max(8px,env(safe-area-inset-top)); left:max(var(--site-edge,16px),env(safe-area-inset-left)); width:clamp(64px,calc(50vw - 42px),240px); }
#page-name { display:block; min-width:0; flex:1; width:100%; height:44px; padding:0; border:0; border-radius:0; background:var(--paper); font-size:12px; color:#77716d; text-overflow:ellipsis; }
#page-name:focus { color:var(--ink); outline:0; border-bottom:1px solid #11111140; }
.page-list { top:calc(max(8px,env(safe-area-inset-top)) + 48px); bottom:auto; right:max(var(--site-edge,16px),env(safe-area-inset-right)); left:auto; transform:none; width:300px; max-height:calc(100dvh - 100px); overflow:auto; }
.page-list button,.copy-panel button { display:flex; width:100%; height:auto; min-height:44px; justify-content:flex-start; text-align:left; white-space:normal; overflow-wrap:anywhere; opacity:.55; }
.page-list button[aria-current="page"] { opacity:1; }
.copy-panel { width:240px; max-height:calc(100dvh - 140px - var(--keyboard-lift,0px)); overflow:auto; }
.copy-panel p { margin:4px 10px; font-size:12px; color:#77716d; }
#multi-controls { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px; padding:4px; }
.selection-final-actions { display:flex; gap:4px; }
#selection-copy svg { display:none; }
@media(max-width:480px) { #selection-copy { width:44px; padding:0; } #selection-copy svg { display:block; } #selection-copy span { display:none; } }
#selection-color-control { position:relative; }
#selection-color-control input { opacity:0; }
#selection-swatch { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; pointer-events:none; }
#selection-proportions[aria-pressed="true"] { color:#2c6085; opacity:1; }
#selection-proportions[aria-pressed="true"] .proportions-unlocked,#selection-proportions[aria-pressed="false"] .proportions-locked { display:none; }
#selected-count { padding-left:8px; font-size:12px; }
#fit-page { position:fixed; z-index:4; top:auto; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 2px + var(--keyboard-lift,0px)); left:max(var(--site-edge,16px),env(safe-area-inset-left)); right:auto; transform:none; width:44px; height:44px; padding:0; background:transparent; color:var(--ink); border:0; opacity:.35; }

@media(max-width:480px) { #multi-controls,.selection-final-actions { gap:0; } #multi-controls button { padding:0 7px; } }
@media(hover:hover) { .page-list button:hover,.copy-panel button:hover,#fit-page:hover { opacity:1; } }

body:has(#add-panel:not([hidden]),#copy-panel:not([hidden]),#brush-panel:not([hidden])) :is(#object-controls,#multi-controls) { visibility:hidden; }

/* Canvas and tool chrome are not selectable text; native editing stays available. */
.draw-page { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.draw-page input,.draw-page textarea { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
#paper { -webkit-user-drag:none; }

#canvas-add { bottom:auto; transform:none; z-index:6; max-height:calc(100dvh - 24px); overflow:auto; }
body:has(#canvas-add:not([hidden])) :is(#object-controls,#multi-controls) { visibility:hidden; }

.page-entry { display:flex; align-items:center; }
.page-entry>button:first-child { flex:1; min-width:0; }
.page-entry>button.page-remove { flex:none; width:44px; min-width:44px; height:44px; padding:0; justify-content:center; }
body:has(#deleted-pages:not([hidden])) :is(#object-controls,#multi-controls) { visibility:hidden; }

#page-list .page-grip { flex:none; width:44px; min-width:44px; height:44px; padding:0; justify-content:center; touch-action:none; cursor:grab; }
#page-list .page-grip:active { cursor:grabbing; }
#page-list .page-open { flex:1; min-width:0; padding-left:0; cursor:pointer; }
#page-list [data-dragging] { opacity:.35; }
#page-list [data-drop="before"] { box-shadow:0 -1px #77716d; }
#page-list [data-drop="after"] { box-shadow:0 1px #77716d; }
#deleted-pages-actions #deleted-pages-toggle { padding-left:8px; padding-right:0; }
.page-entry>button.page-remove { opacity:.35; }
.page-remove svg { width:14px; height:14px; }
.page-entry>button.page-remove:focus-visible { opacity:1; }
@media(hover:hover) { .page-entry>button.page-remove:hover { opacity:1; } }

#deleted-pages-actions { margin-top:0; }
#page-list { display:flex; flex-direction:column; overflow:hidden; max-height:calc(100dvh - 128px - env(safe-area-inset-bottom)); }
#page-entries { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
#page-list #page-picker-new { flex:none; width:100%; min-height:44px; border-top:1px solid #11111112; margin-top:4px; padding-left:12px; }
#object-bold,#text-bold { opacity:.55; }
#object-bold[aria-pressed="true"],#text-bold[aria-pressed="true"] { opacity:1; }
@media(hover:hover) { #object-bold:hover,#text-bold:hover { opacity:1; } }

#object-bold:focus-visible,#text-bold:focus-visible { opacity:1; }

#canvas-add button:focus-visible { text-decoration:none; outline:none; background:#11111108; }
#canvas-add button:focus-visible::after { display:none; }
.add-panel button:focus-visible::after { display:none; }
#deleted-pages>p { padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid #11111112; }

.add-panel,.copy-panel { max-height:calc(100dvh - 140px - var(--keyboard-lift,0px) - var(--notice-height,0px)); }

/* Contextual alignment stays above the selected-items bar; no permanent toolbar row. */
#align-panel { display:flex; gap:0; padding:4px; bottom:calc(126px + var(--keyboard-lift,0px)); }
#align-panel button { padding:0; width:44px; }
#selection-align[aria-expanded="true"] { opacity:1; }
#start-fresh { border-top:1px solid #11111112; margin-top:4px; }
:is(#deleted-pages,#starting-points) .restore-heading { gap:8px; padding:0 10px 8px; margin-bottom:4px; border-bottom:1px solid #11111112; opacity:1; color:#77716d; font-size:12px; }
.restore-arrow { opacity:.55; color:var(--ink); transition:opacity 200ms ease; }
.restore-heading:is(:active,:focus-visible) .restore-arrow { opacity:1; }
@media(hover:hover) { .restore-heading:hover .restore-arrow { opacity:1; } }
.restore-heading:focus-visible::after { content:none; }
@media(prefers-reduced-motion:reduce) { .restore-arrow { transition:none; } }
/* Outset the 44px target by its icon inset, so visible arrow and page-name edges share the 16px gutter. */
#object-size:disabled { opacity:.3; cursor:default; }
.fresh-paper { z-index:3; pointer-events:none; }

.object-controls .weight-control { flex:0 1 84px; min-width:40px; }
.object-controls .filled-shape { fill:currentColor; }
#canvas-add .context-separator { border-top:1px solid #11111112; margin-top:4px; }
#object-duplicate,#selection-duplicate { padding:0; width:44px; }

.case-menu { position:absolute; z-index:1; right:8px; bottom:60px; display:grid; width:180px; padding:6px; background:var(--paper); border:1px solid #11111112; box-shadow:0 4px 24px #11111108; }
.case-menu button { justify-content:flex-start; opacity:.55; }
.case-menu button[aria-pressed="true"] { opacity:1; }
#text-font { max-width:100%; }

/* Only relevant layering actions appear, without widening the selected-item bar. */
.order-controls { display:flex; gap:0; padding:4px; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 122px + var(--keyboard-lift,0px)); }
.order-controls button { width:44px; padding:0; opacity:.6; }
.order-controls button:disabled { opacity:.2; }
.order-controls button:not(:disabled):is(:active,:focus-visible) { opacity:1; }
@media(hover:hover) { .order-controls button:not(:disabled):hover { opacity:1; } }
body:has(#add-panel:not([hidden]),#canvas-add:not([hidden]),#copy-panel:not([hidden]),#brush-panel:not([hidden]),#deleted-pages:not([hidden]),#align-panel:not([hidden])) #order-controls { visibility:hidden; }

/* Optional starting points borrow the same quiet menu and back affordance. */
.starting-points { width:292px; }
.starting-points .starting-point { flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; padding:10px; }
.starting-point>svg { flex:none; opacity:.8; }
.starting-point-copy { display:grid; gap:4px; }
.starting-point-detail { font-size:11px; line-height:1.45; opacity:.75; }
body:has(#starting-points:not([hidden])) :is(#object-controls,#multi-controls,#order-controls) { visibility:hidden; }

#paper[data-image-drop] { outline:1px dashed #11111140; outline-offset:-16px; }

/* Pages and making things each have a short menu, sharing the existing seven-button bar. */
body:has(#pages-panel:not([hidden]),#prompt-panel:not([hidden])) :is(#object-controls,#multi-controls,#order-controls) { visibility:hidden; }
#pages-panel #page-new { border:0; margin:0; }
#pages-panel :is(#clear,#page-delete) { border-top:1px solid #11111112; margin-top:4px; }
#pages-panel #clear:not([hidden]) + #page-delete { border-top:0; margin-top:0; }
#page-controls #page-previous svg { transform:translateX(12px); }
#page-controls #page-next svg { transform:translateX(-12px); }
/* The HTML dialog provides focus containment and Escape; its appearance belongs to Sketch. */
#fresh-dialog { width:420px; max-width:calc(100% - 40px); max-height:calc(100dvh - 48px); padding:24px 24px 12px; font-family:"neue-haas-grotesk-text",sans-serif; font-weight:400; font-style:normal; letter-spacing:normal; word-spacing:normal; font-kerning:normal; border:1px solid #11111112; background:var(--paper); color:var(--ink); box-shadow:0 8px 40px #11111110; }
#fresh-dialog::backdrop { background:#11111124; }
#fresh-dialog[open] { animation:sketch-arrive 180ms ease both; }
#fresh-dialog h2 { margin:0 0 16px; font-size:20px; line-height:1.3; font-weight:400; }
#fresh-dialog p { margin:0; font-size:14px; line-height:1.65; }
#fresh-dialog form { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:8px; border-top:1px solid #11111112; }
#fresh-dialog button { padding:0; opacity:.6; }
#fresh-dialog button[value="confirm"] { opacity:1; }
#fresh-dialog button:is(:hover,:focus-visible) { opacity:1; }
@keyframes sketch-arrive { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { #fresh-dialog[open] { animation:none; } }
#question-next { position:fixed; z-index:3; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 62px); left:50%; transform:translateX(-50%); gap:9px; opacity:.5; background:var(--paper); white-space:nowrap; }
#question-next:is(:hover,:focus-visible,:active) { opacity:1; }
body:has(.panel:not([hidden])) #question-next { visibility:hidden; }
.prompt-panel { width:292px; }
.prompt-panel button:not(.restore-heading) { padding:10px; line-height:1.5; }
#prompt-panel .restore-heading { gap:8px; border-bottom:1px solid #11111112; margin-bottom:4px; opacity:.65; }

#prompt-deeper { width:44px; padding:0; }

#fresh-dialog button:focus-visible::after { display:none; }

/* Invitations belong to the paper; their quiet actions never enter an export. */
#studio-actions { position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.studio-action-row { position:absolute; display:flex; align-items:stretch; gap:8px; transform-origin:top left; pointer-events:none; }
.studio-action-row button { justify-content:center; flex:1; min-width:0; height:auto; min-height:72px; padding:12px 14px; border:1px solid #11111118; border-radius:4px; font-size:12px; line-height:1.5; text-align:center; color:#77716d; background:var(--paper); pointer-events:auto; transition:color 180ms ease,border-color 180ms ease,background-color 180ms ease; }
.studio-action-row button:is(:focus-visible,:active) { color:var(--ink); border-color:#11111130; background:color-mix(in srgb,var(--paper) 98%,var(--ink)); }
@media(hover:hover) and (pointer:fine) { .studio-action-row button:hover { color:var(--ink); border-color:#11111130; background:color-mix(in srgb,var(--paper) 98%,var(--ink)); } }
.studio-action-row button:focus-visible { outline:1px solid #11111188; outline-offset:3px; }
.studio-action-row button:focus-visible::after { display:none; }
.studio-action-row.studio-overview button { pointer-events:none; color:transparent; border-color:#11111118; }
#page-name-control:has(:is(#explore-guidance-toggle,#template-name-static):not([hidden])) { width:max-content; max-width:min(284px,calc(50vw - max(var(--site-edge,16px),env(safe-area-inset-left)) - 30px)); }
#explore-guidance-toggle { min-width:44px; width:auto; max-width:100%; padding:0; gap:8px; justify-content:flex-start; color:#2c6085; font-weight:400; }
#explore-guidance-toggle svg { flex:none; width:18px; height:18px; }
#template-name,#template-name-static { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#template-name-static { display:block; height:44px; line-height:44px; font-size:12px; color:#2c6085; }
#explore-guidance-toggle:is(:hover,:focus-visible) { color:#174565; }
#studio-next { position:fixed; z-index:3; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 62px); left:50%; transform:translateX(-50%); max-width:calc(100% - 128px); padding:0 12px; font-size:12px; opacity:.5; background:var(--paper); }
#studio-next:is(:hover,:focus-visible) { opacity:1; }
body:has(.panel:not([hidden]),#fresh-dialog[open]) :is(#studio-actions,#studio-next) { visibility:hidden; }

/* A reading room for each starting point. The canvas and its camera stay where they were. */
#explore-guidance { font-family:"neue-haas-grotesk-text",sans-serif; font-weight:400; font-style:normal; width:720px; max-width:calc(100% - 32px); height:860px; max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom))); margin:auto; padding:0; border:1px solid #11111112; background:var(--paper); color:var(--ink); box-shadow:0 8px 48px #11111110; overflow:hidden; }
#explore-guidance[open] { display:flex; flex-direction:column; animation:sketch-arrive 180ms ease both; }
#explore-guidance::backdrop { background:#11111124; }
.guidance-header { display:flex; flex:none; justify-content:space-between; align-items:center; padding:10px 20px 6px 32px; color:#77716d; font-size:12px; }
#explore-guidance-close { width:44px; padding:0; opacity:.6; }
#explore-guidance-close:focus-visible { outline:1px solid #11111155; outline-offset:-8px; }
#explore-guidance-close svg { width:16px; height:16px; }
#explore-guidance button:is(:hover,:focus-visible) { opacity:1; }
#explore-guidance button:focus-visible::after { display:none; }
.guidance-reading { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; padding:18px 48px 40px; font-size:16px; line-height:1.75; -webkit-user-select:text; user-select:text; scrollbar-width:thin; }
.guidance-reading:focus { outline:none; }
.guidance-reading h1 { margin:0 0 24px; font-size:28px; line-height:1.25; font-weight:400; letter-spacing:-.02em; }
.guidance-reading p { margin:0 0 18px; }
.guidance-opening { color:#555550; }
.guidance-reading section { margin-top:44px; scroll-margin-top:20px; }
.guidance-reading h2 { margin:0 0 14px; font-size:20px; line-height:1.4; font-weight:400; letter-spacing:-.01em; }
.guidance-reading ul { margin:0 0 22px; padding-left:22px; }
.guidance-reading li { margin:6px 0; padding-left:4px; }
#explore-guidance-return { gap:10px; margin-top:24px; padding:0; opacity:.65; }
body:has(#explore-guidance[open]) :is(#studio-actions,#studio-next,#question-next) { visibility:hidden; }
@media(max-width:480px) {
 .guidance-header { padding:8px 10px 4px 24px; }
 .guidance-reading { padding:14px 24px 30px; font-size:14px; line-height:1.8; }
 .guidance-reading h1 { font-size:24px; margin-bottom:20px; }
 .guidance-reading h2 { font-size:18px; margin-bottom:12px; }
 .guidance-reading section { margin-top:34px; }
 .guidance-reading p { margin-bottom:16px; }
}
@media(prefers-reduced-motion:reduce) { #explore-guidance[open] { animation:none; } }

.reading-views { display:flex; gap:4px; }
.reading-views button { padding:0 8px; color:#77716d; font-size:12px; }
.reading-views button[aria-pressed="true"] { color:#42668b; }
.reading-views button[aria-pressed="true"]::before { content:''; position:absolute; bottom:6px; left:8px; right:8px; border-bottom:1px solid #42668b55; }
/* A complete short reading and a fuller essay, with independent scroll positions. */
.reader-glance { display:none; }
#explore-guidance[data-reader-view="glance"] .reader-depth { display:none; }
#explore-guidance[data-reader-view="glance"] .reader-glance { display:block; }
/* Copy leads; reader drawings make a specific relationship visible. */
.reader-glance p:last-child,.reader-depth section p:last-child { margin-bottom:0; }
.guidance-opening { color:inherit; }
.reader-part { width:260px; max-width:100%; margin:32px auto 0; text-align:center; font-size:13px; line-height:1.6; color:#62625c; }
.reader-part svg { display:block; width:220px; max-width:100%; height:auto; margin:14px auto 4px; fill:none; stroke:#938b83; stroke-width:1.4; }
.reader-part .reader-part-selected { stroke:#42668b; }
.reader-part rect.reader-part-selected { fill:#42668b0c; }
.reader-part figcaption { color:var(--ink); font-size:16px; }
@media(max-width:480px) {
 .reader-part { margin-top:26px; font-size:12px; }
 .reader-part svg { width:200px; }
 .reader-part figcaption { font-size:14px; }
}

.reader-venn { width:420px; max-width:100%; margin:32px auto 0; color:var(--ink); font-size:16px; line-height:1.5; }
.reader-venn-stage { position:relative; width:100%; }
.reader-venn svg { display:block; width:100%; height:auto; }
.reader-venn-outlines { fill:none; stroke:#938b83; stroke-width:1.3; }
.reader-venn-overlap { fill:#42668b18; }
.reader-venn-label { position:absolute; top:50%; width:28.6%; transform:translate(-50%,-50%); text-align:center; overflow-wrap:normal; }
.reader-venn-left { left:19.65%; }
.reader-venn-middle { left:50%; width:27%; font-weight:500; }
.reader-venn-right { left:80.35%; }
.reader-venn figcaption,.reader-decision figcaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:480px) { .reader-venn { width:95%; margin-top:26px; font-size:14px; } }

.reader-decision { width:500px; max-width:100%; margin:32px auto 0; color:var(--ink); font-size:14px; line-height:1.5; }
.reader-decision-stage { position:relative; height:320px; }
.reader-decision svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.reader-decision svg path { fill:none; stroke:#938b83; stroke-width:1.3; }
.reader-decision-node,.reader-decision-branch { position:absolute; transform:translate(-50%,-50%); text-align:center; }
.reader-decision-node { width:44%; }
.reader-decision-root { left:50%; top:11%; width:90%; }
.reader-decision-leave { left:25%; top:45%; }
.reader-decision-check { left:75%; top:45%; }
.reader-decision-try { left:25%; top:86%; }
.reader-decision-accept { left:75%; top:86%; }
.reader-decision-branch { padding:0 4px; background:var(--paper); color:#62625c; font-size:12px; }
.reader-decision-no { left:37.5%; top:26%; }
.reader-decision-yes { left:62.5%; top:26%; }
.reader-decision-check-yes { left:50%; top:61%; }
.reader-decision-check-no { left:75%; top:66%; }
@media(max-width:480px) {
 .reader-decision { margin-top:26px; font-size:13px; }
 .reader-decision-stage { height:360px; }
 .reader-decision-branch { font-size:11px; }
}

/* A section's tools belong to the paper, not the screen chrome. */
/* Section controls belong to the paper; version labels never crowd the title. */
#branch-actions { position:fixed; inset:0; z-index:3; pointer-events:none; }
.branch-action-row { position:absolute; height:44px; display:flex; justify-content:flex-end; align-items:center; transform-origin:top left; pointer-events:auto; }
.branch-action-row button { padding:0; width:44px; font-size:12px; color:#77776f; background:var(--paper); }
.branch-action-row svg { width:15px; height:15px; }
.branch-action-row .branch-version { position:absolute; bottom:0; left:88px; transform:none; min-width:0; width:calc(100% - 220px); max-width:none; padding:0; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.branch-arrows { display:flex; margin-right:auto; }
.branch-arrows svg { width:12px; height:12px; }
.branch-main[aria-pressed="true"] { color:#b18a30; opacity:1; }
.branch-main[aria-pressed="true"] svg { fill:currentColor; }
.branch-action-row button:focus-visible,.branch-action-row button:hover { color:#326b91; opacity:1; }
.branch-name { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:44px; padding:0 8px; font-size:16px; text-align:center; border:0; border-bottom:1px solid #326b9160; border-radius:0; background:var(--paper); outline:none; }
body:has(.panel:not([hidden]):not(#object-controls):not(#multi-controls):not(#order-controls),dialog[open]) #branch-actions { visibility:hidden; }
#studio-navigation { position:fixed; z-index:3; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 46px); left:50%; transform:translateX(-50%); display:flex; align-items:center; max-width:calc(100% - 64px); background:var(--paper); }
#studio-navigation button { opacity:.5; }
#studio-navigation button:hover,#studio-navigation button:focus-visible { opacity:1; }
#studio-navigation #studio-next { position:static; transform:none; flex-shrink:1; min-width:0; max-width:230px; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#studio-navigation svg { width:13px; height:13px; }
body:has(.panel:not([hidden]),dialog[open]) #studio-navigation { visibility:hidden; }
#zoom-controls { position:fixed; z-index:4; bottom:max(8px,env(safe-area-inset-bottom)); right:max(16px,env(safe-area-inset-right)); display:flex; background:var(--paper); }
#zoom-controls button { padding:0; opacity:.5; }
#zoom-level { font-size:11px; font-variant-numeric:tabular-nums; }
#zoom-controls button:hover { opacity:1; }
@media(max-width:800px),(pointer:coarse) { #zoom-controls { display:none; } }
#inline-text { position:fixed; z-index:5; pointer-events:none; }
#inline-text #sketch-text { pointer-events:auto; display:block; margin:0; min-height:0; max-height:none; min-width:0; border:0; border-radius:0; padding:0; resize:none; outline:none; background:var(--paper); line-height:1.3; transform-origin:top left; overflow:auto; overflow-wrap:break-word; caret-color:#326b91; box-shadow:none; }
#inline-text #sketch-text::placeholder { color:#a2a29b; }
.text-panel { grid-template-columns:minmax(90px,1fr) auto auto auto; width:300px; bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--keyboard-lift,0px)); padding:0 8px; gap:4px; border:0; box-shadow:none; }
body[data-text-mode] :is(.site-home,#page-controls,#page-name-control,#explore-guidance-toggle,.controls,#fit-page,#zoom-controls,#studio-navigation,#studio-actions,#branch-actions) { visibility:hidden; }
.text-panel { z-index:11; top:calc(var(--editing-top,0px) + max(8px,env(safe-area-inset-top))); bottom:auto; left:calc(var(--editing-left,0px) + var(--editing-width,100vw)/2); width:360px; max-width:calc(var(--editing-width,100vw) - 24px); gap:8px; }
 .text-panel button { font-size:14px; }
 #text-font { font-size:16px; max-width:100%; }
 .text-panel .case-menu { top:48px; bottom:auto; max-height:calc(var(--editing-height,100dvh) - 80px); overflow:auto; }

.branch-action-row:has(.branch-name) button { visibility:hidden; }

/* One explicit drag behavior, visible in the active toolbar icon. */
#paper[data-tool="select"][data-pointer="hand"] { cursor:grab; }
#paper[data-tool][data-panning] { cursor:grabbing; }
.pointer-panel { width:188px; padding:6px; }
.pointer-panel button { display:flex; justify-content:flex-start; gap:16px; width:100%; opacity:.5; }
.pointer-panel button[aria-pressed="true"],button[data-confirm] { opacity:1; }
.page-entry>button.page-remove[data-confirm] { opacity:1; }
body:has(#pointer-panel:not([hidden])) :is(#object-controls,#multi-controls,#order-controls) { visibility:hidden; }

#archived-pages-toggle { margin-top:4px; }
#archived-pages .restore-heading { gap:8px; padding:0 10px 8px; margin-bottom:4px; border-bottom:1px solid #11111112; opacity:1; color:#77716d; }
#archived-pages .page-entry>button:first-child { flex:1; min-width:0; justify-content:flex-start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body:has(#archived-pages:not([hidden])) :is(#object-controls,#multi-controls,#order-controls) { visibility:hidden; }
#pages-panel :is(#clear,#page-archive,#page-delete) { border-top:0; margin-top:0; }
#pages-panel #clear:not([hidden]) { border-top:1px solid #11111112; margin-top:4px; }

#pages-panel #clear[hidden]+#page-archive { border-top:1px solid #11111112; margin-top:4px; }

/* Local paper behind each control leaves the rest of the viewport available. */
#archived-pages-toggle { padding-left:8px; }
.draw-page .site-home { opacity:1; background:var(--paper); box-shadow:0 0 0 8px var(--paper); }
.draw-page .site-home-full { opacity:.33; }
.draw-page .site-home[data-compact] .site-home-full { opacity:0; }
.draw-page .site-home[data-compact] .site-home-short { opacity:.33; }
.draw-page .site-home:is(:hover,:focus-visible,:active) .site-home-full { opacity:1; }
.draw-page .site-home[data-compact]:is(:hover,:focus-visible,:active) .site-home-full { opacity:0; }
.draw-page .site-home[data-compact]:is(:hover,:focus-visible,:active) .site-home-short { opacity:1; }
:is(.controls,#studio-navigation,#page-controls,#page-name-control,#fit-page,#zoom-controls) { box-shadow:0 0 0 4px var(--paper); }

#page-name-control { background:var(--paper); }

#fit-page { background:var(--paper); opacity:1; }
#fit-page svg { opacity:.35; transition:opacity 200ms ease; }
#fit-page:focus-visible svg { opacity:1; }
@media(hover:hover) { #fit-page:hover svg { opacity:1; } }

/* WRDS lives above the empty paper, independently of its pan/zoom and document. */
#blank-invitation { position:fixed; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:min(500px,calc(75vw - 40px)); min-height:44px; height:auto; padding:0; color:#565656; background:transparent; font-family:"neue-haas-grotesk-text",var(--sketch-ui-font); font-size:20px; font-weight:400; line-height:1.6; text-transform:lowercase; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; opacity:1; transition:opacity 500ms ease;  }
#blank-invitation:not([data-fading]) { animation:sketch-words-arrive 500ms ease; }
#blank-words { display:block; width:100%; margin:0; }
#blank-invitation[data-fading] { opacity:0; }
#blank-invitation[data-kind="goodbye"] { cursor:default; }
#blank-invitation[data-kind="goodbye"][data-sendoff] #blank-words { position:relative; isolation:isolate; width:max-content; max-width:100%; line-height:1.25; }
#blank-invitation[data-kind="goodbye"][data-sendoff] #blank-words::before { content:''; position:absolute; z-index:-1; inset:-2px -22px; border-radius:2px; background:var(--paper); pointer-events:none; }
#blank-invitation[data-departing] { transition-duration:800ms; }
#blank-invitation:focus-visible { outline:1px solid #56565655; outline-offset:12px; }
#blank-invitation:focus-visible::after { display:none; }
@keyframes sketch-words-arrive { from { opacity:0; } to { opacity:1; } }
@media(max-width:768px) { #blank-invitation { font-size:18px; } }
@media(prefers-reduced-motion:reduce) { #blank-invitation,#blank-invitation:not([data-fading]) { animation:none; transition:none; } }

/* Reading has a real lower edge, even when a short Glance leaves extra room. */
.guidance-reading { display:flex; flex-direction:column; }
.guidance-reading>* { flex-shrink:0; }
#explore-guidance-return { align-self:flex-start; margin-top:auto; padding-top:24px; min-height:68px; height:auto; }

/* Paper plates and hit targets are separate: every control keeps its full area. */
.draw-page { --header-top:max(0px,env(safe-area-inset-top)); --footer-bottom:max(0px,env(safe-area-inset-bottom)); --dock-height:60px; }
:is(.draw-page .site-home,#page-name-control,#page-controls,.controls,#studio-navigation,#zoom-controls,#fit-page) { background:transparent; box-shadow:none; isolation:isolate; }
:is(.draw-page .site-home,#page-name-control,#page-controls,.controls,#studio-navigation,#zoom-controls,#fit-page)::before { content:''; position:absolute; z-index:-1; pointer-events:none; background:var(--paper); }
.draw-page .site-home { top:var(--header-top); padding-bottom:8px; }
.draw-page .site-home::before { inset:calc(-1 * var(--header-top)) -12px 8px; border-radius:0 0 4px 4px; }
#page-name-control { top:var(--header-top); left:max(12px,env(safe-area-inset-left)); height:44px; }
#page-name-control::before { inset:calc(-1 * var(--header-top)) -10px 8px calc(-1 * max(12px,env(safe-area-inset-left))); border-radius:0 0 4px 0; }
#page-name,#explore-guidance-toggle { background:transparent; padding-bottom:8px; }
#template-name-static { transform:translateY(-4px); }
#page-controls { top:var(--header-top); right:max(0px,env(safe-area-inset-right)); }
#page-controls::before { inset:calc(-1 * var(--header-top)) calc(-1 * max(0px,env(safe-area-inset-right))) 8px -8px; border-radius:0 0 0 4px; }
#page-controls button,#page-controls #page-number { padding-bottom:8px; }
.controls { bottom:var(--footer-bottom); height:var(--dock-height); padding:0; }
.controls::before { inset:6px -6px calc(-1 * var(--footer-bottom)); border-radius:4px 4px 0 0; }
.controls>button { height:var(--dock-height); padding:0; }
#studio-navigation { bottom:calc(var(--footer-bottom) + var(--dock-height)); }
#studio-navigation::before { inset:16px 0 -6px; border-radius:4px 4px 0 0; }
#studio-navigation button,#studio-navigation #studio-next { padding-top:24px; }
#zoom-controls { bottom:var(--footer-bottom); right:max(0px,env(safe-area-inset-right)); }
#zoom-controls::before { inset:8px calc(-1 * max(0px,env(safe-area-inset-right))) calc(-1 * var(--footer-bottom)) -6px; border-radius:4px 0 0 0; }
#zoom-controls button { padding-top:8px; }
#fit-page { bottom:var(--footer-bottom); left:max(0px,env(safe-area-inset-left)); padding-top:8px; }
#fit-page::before { inset:8px -6px calc(-1 * var(--footer-bottom)) calc(-1 * max(0px,env(safe-area-inset-left))); border-radius:0 4px 0 0; }
.panel,.case-menu { border-radius:4px; }
:is(.object-controls,#multi-controls,#order-controls,#align-panel) { isolation:isolate; background:transparent; border:0; box-shadow:none; }
:is(.object-controls,#multi-controls,#order-controls,#align-panel)::before { content:''; position:absolute; z-index:-1; pointer-events:none; inset:8px -2px; background:var(--paper); border-radius:4px; }
.branch-action-row button { isolation:isolate; background:transparent; }
.branch-action-row button::before { content:''; position:absolute; z-index:-1; pointer-events:none; inset:7px 6px; background:var(--paper); border-radius:4px; }
.branch-action-row .branch-version::before { display:none; }
.branch-version>span { padding:4px 8px; border-radius:4px; background:var(--paper); }
.branch-action-row .branch-nav:disabled { opacity:1; color:#bdbdb6; }
/* The temporary rows share one spacing rhythm above the dock. */
.panel { bottom:calc(var(--footer-bottom) + var(--dock-height) + 8px + var(--keyboard-lift,0px)); }
:is(.object-controls,#multi-controls) { bottom:calc(var(--footer-bottom) + var(--dock-height) + var(--keyboard-lift,0px)); }
:is(#order-controls,#align-panel) { bottom:calc(var(--footer-bottom) + var(--dock-height) + var(--selection-toolbar-height,52px) + var(--keyboard-lift,0px)); }
.text-panel { bottom:auto; }
.page-list { top:calc(var(--header-top) + 44px); bottom:auto; }
@media(max-width:320px) { .controls::before { border-radius:0; } }
#studio-navigation #studio-next { background:transparent; }
#studio-navigation { max-width:min(312px,calc(100% - 64px)); }
#studio-navigation::after { content:''; position:absolute; z-index:-1; pointer-events:none; left:-4px; right:-4px; bottom:-6px; height:4px; background:radial-gradient(circle at left top,transparent 4px,var(--paper) 4.2px) left bottom / 4px 4px no-repeat,radial-gradient(circle at right top,transparent 4px,var(--paper) 4.2px) right bottom / 4px 4px no-repeat; }
/* Single-section actions and multi-section navigation occupy the same dock
   slot. Eligibility is shared; these two controls never compete for space. */
#question-next { bottom:calc(var(--footer-bottom) + var(--dock-height)); padding:24px 14px 0; background:transparent; isolation:isolate; }
#question-next::before { content:''; position:absolute; z-index:-1; pointer-events:none; inset:16px 0 -6px; background:var(--paper); border-radius:4px 4px 0 0; }
body[data-text-mode] #question-next,body:has(dialog[open]) #question-next { visibility:hidden; }

/* A page title hugs its live text while retaining the existing overlap limit. */
#page-name-control { width:clamp(44px,var(--page-name-width,64px),min(240px,calc(50vw - 42px))); }
#page-name-measure { position:fixed; visibility:hidden; pointer-events:none; white-space:pre; font:inherit; font-size:12px; }
#selection :is([data-handle="n"],[data-handle="s"]) { cursor:ns-resize; }
#selection :is([data-handle="e"],[data-handle="w"]) { cursor:ew-resize; }

/* Short text keeps width targets clear of the corner size grabbers. */
#selection .text-width-offset::before { content:""; position:absolute; top:50%; width:26px; height:1px; background:#11111140; pointer-events:none; }
#selection [data-handle="e"].text-width-offset::before { right:50%; }
#selection [data-handle="w"].text-width-offset::before { left:50%; }
#selection .text-width-offset span { position:relative; }

/* A temporary browsing control; the main dock always keeps its original center. */
#assortment-actions { position:fixed; z-index:4; left:50%; transform:translateX(-50%); bottom:calc(var(--footer-bottom) + var(--dock-height) + 4px); display:flex; isolation:isolate; }
#assortment-actions::before { content:''; position:absolute; z-index:-1; inset:0 -4px; border-radius:4px; background:var(--paper); }
#assortment-actions button { width:44px; padding:0; opacity:.5; }
#assortment-actions button:is(:active,:focus-visible) { opacity:1; }
@media(hover:hover) { #assortment-actions button:hover { opacity:1; } }
body:has(.panel:not([hidden]),dialog[open]) #assortment-actions,body[data-text-mode] #assortment-actions { visibility:hidden; }

/* The same lock language for an individual rectangle or ellipse. */
#shape-proportions { width:44px; padding:0; }
#shape-proportions[data-locked] { color:#2c6085; opacity:1; }
#shape-proportions:not([data-locked]) .proportions-locked,#shape-proportions[data-locked] .proportions-unlocked { display:none; }