/* My Maps on the shared Iris system (see DESIGN-SYSTEM.md). Tokens match the Iris app: the
   red header, Public Sans / JetBrains Mono / Instrument Serif, and the operation palette,
   which is validated for colour-vision separation in both themes. Do not restyle it here. */
@font-face{font-family:"Public Sans";font-weight:400 600;font-display:swap;src:url(/fonts/PublicSans.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400 500;font-display:swap;src:url(/fonts/JetBrainsMono.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-400i.woff2) format("woff2")}
:root{--mad-red:#CC1100;--header:#CC1100;--paper:#F4F4F2;--paper-2:#EAEAE6;--surface:#FFFFFF;--ink:#14161A;
 --ink-60:rgba(20,22,26,.70);--ink-35:rgba(20,22,26,.74);--ink-12:rgba(20,22,26,.16);--rule:rgba(20,22,26,.16);--ink-05:rgba(20,22,26,.05);
 --shadow:rgba(20,22,26,.12);--dot:rgba(20,22,26,.20);
 --op-differentiate:#C4161C;--op-group:#2F5DB0;--op-sequence:#A87908;--op-predict:#7B2A8F;
 --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--serif:"Instrument Serif",Georgia,serif;
 --ease:cubic-bezier(.22,1,.3,1);--glance:.16s;color-scheme:light}
:root[data-theme=dark]{--header:#A81100;--paper:#16181C;--paper-2:#1F2226;--surface:#22252A;--ink:#E4E6E0;
 --ink-60:rgba(228,230,224,.62);--ink-35:rgba(228,230,224,.68);--ink-12:rgba(228,230,224,.20);--rule:rgba(228,230,224,.20);--ink-05:rgba(228,230,224,.09);
 --shadow:rgba(0,0,0,.6);--dot:rgba(228,230,224,.15);
 --op-differentiate:#E95549;--op-group:#5792E9;--op-sequence:#DEB049;--op-predict:#BF66B4;color-scheme:dark}
:root{--differentiate:var(--op-differentiate);--group:var(--op-group);--sequence:var(--op-sequence);--predict:var(--op-predict);
 --note-ink:var(--ink);--note-red:var(--mad-red);--note-blue:var(--op-group);--note-gold:var(--op-sequence)}
*{box-sizing:border-box}html,body{margin:0}body{overflow:hidden;background:var(--paper);color:var(--ink);font:13.5px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Buttons: pills, as in Iris. Mono uppercase for small controls; sans for actions in prose. */
button{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--rule);border-radius:999px;min-height:30px;padding:4px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--glance),color var(--glance),border-color var(--glance)}
button:hover:not(:disabled){border-color:var(--ink)}button:disabled{opacity:.35;cursor:default}
button.prominent{background:var(--ink);color:var(--paper);border-color:var(--ink);min-height:38px;padding:6px 20px}button.prominent:hover:not(:disabled){opacity:.88}
button.tinted{background:color-mix(in srgb,var(--accent,var(--ink)) 12%,var(--surface));color:var(--accent,var(--ink));border-color:color-mix(in srgb,var(--accent,var(--ink)) 40%,transparent);font-weight:500}
button.bordered{background:var(--surface)}button.plain{background:transparent;border-color:transparent;color:var(--ink-60)}button.plain:hover:not(:disabled){color:var(--ink);border-color:var(--rule)}button.destructive{color:var(--mad-red)}
button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill,.wide,.group-label,.eyebrow,.eyebrow-label{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.icon svg,svg.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;display:block}
input,textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:8px 10px;width:100%}textarea{resize:vertical;line-height:1.45}input::placeholder,textarea::placeholder{color:var(--ink-60)}
.meta{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-60)}
/* The red Iris header. */
.topbar{height:46px;background:var(--header);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;position:relative;z-index:10}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}.brand{display:flex}.iris-header{display:block;height:24px;width:auto;filter:brightness(0) invert(1)}
.tb-divider{width:1px;height:18px;background:rgba(255,255,255,.42)}.product{font:italic 20px var(--serif);white-space:nowrap}
.topbar nav{display:flex;gap:8px;align-items:center}
.tbtn{background:none;border:1px solid rgba(255,255,255,.42);color:#fff;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0 13px;height:30px;min-height:30px;border-radius:999px;display:inline-flex;align-items:center;text-decoration:none}
.tbtn:hover{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.42)!important}.tbtn.theme{font-size:14px;padding:0;width:34px;justify-content:center}#account{display:flex;align-items:center;min-width:24px}
/* The canvas: a working surface. The dot grid moves and scales with the camera. */
#canvas{height:calc(100svh - 46px);position:relative;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden;overflow:clip;touch-action:none;background-color:var(--paper)}
#canvas.grabbing{cursor:grabbing}#canvas[data-tool]:not([data-tool=select]){cursor:crosshair}
#canvas input,#canvas textarea,#canvas [contenteditable=true]{-webkit-user-select:text;user-select:text}
#world{position:absolute;transform-origin:0 0}#edges,#ink{position:absolute;overflow:visible;width:1px;height:1px;pointer-events:none}#edges{z-index:0}#ink{z-index:3}
#edges path{fill:none;vector-effect:non-scaling-stroke;stroke-width:1.6;opacity:.85}#edges path.library{opacity:.4;stroke-width:1.2}#edges path.taxonomy{opacity:.55;stroke-width:1.1}
#edges .vars{font:500 9.5px var(--mono);letter-spacing:.04em;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
#nodes{position:absolute;z-index:1}#notes{position:absolute;z-index:3}
#edges path.edge-hit{stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer}
#edges .edge-handle{pointer-events:all;fill:var(--surface);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:move}
.custom-node{border:1px dashed var(--ink-60);border-radius:12px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:8px}
.custom-node .name{font:11px var(--mono);overflow-wrap:anywhere}.custom-symbol{font:22px var(--serif)}
.block select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:8px;min-height:40px;padding:8px;width:100%}
.evidence summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.evidence-example{padding:12px 0;border-top:1px solid var(--rule)}.evidence-example img{width:72px;height:72px;object-fit:contain;float:left;margin:0 12px 8px 0}.evidence-example p{clear:both;font-size:12px;padding-top:8px}
.node{position:absolute;transform:translate(-50%,-50%);touch-action:none;cursor:grab}
/* Images: your work on white; library examples dashed and quieter. */
.upload-node,.library-node{background:var(--surface);padding:6px 6px 4px;border-radius:6px;box-shadow:0 1px 2px var(--shadow),0 8px 24px var(--ink-05)}
.picture{width:100%;height:calc(100% - 56px);border-radius:3px;overflow:hidden;background:var(--paper-2);position:relative}.picture img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.unavailable{position:absolute;inset:12px;font:10px var(--mono);color:var(--ink-60);text-align:center}
.caption{font-size:12px;padding:6px 2px 0;height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;gap:4px;align-items:center;height:22px;padding:0 2px}.chip{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;background:var(--surface)}.chip.supporting{border-style:dashed}.chip .mark{width:13px;height:13px;color:var(--ink);fill:currentColor}.status{font:10px var(--mono);color:var(--ink-60)}
.node.selected:not(.technique-node):not(.operation-node){outline:2px solid var(--ink);outline-offset:4px}
.library-node{box-shadow:none;border:1px dashed var(--rule);background:color-mix(in srgb,var(--surface) 70%,transparent)}.library-node .caption{font-size:11px;color:var(--ink-60);height:22px}.library-node .tag{position:absolute;top:10px;left:10px;font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--surface);color:var(--ink-60);padding:2px 6px;border-radius:4px}
/* Techniques: a ringed disc carrying the Iris mark, mono label beneath (as on the Iris map). */
.technique-node{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding-top:2px}.technique-node .name{margin-top:7px}
.disc{width:60px;height:60px;border-radius:50%;background:var(--paper);border:1px solid var(--ink-12);display:grid;place-items:center;box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--accent);transition:background-color var(--glance),box-shadow var(--glance)}
.disc .mark{width:36px;height:36px;color:var(--ink);fill:currentColor}
.technique-node:hover .disc,.technique-node.selected .disc,.technique-node:focus-visible .disc{background:var(--ink);border-color:var(--ink)}.technique-node:hover .disc .mark,.technique-node.selected .disc .mark,.technique-node:focus-visible .disc .mark{color:var(--paper)}
.technique-node:focus-visible{outline:none}
.technique-node .name{font:10px/1.25 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--ink);max-width:140px;padding:0 4px;background:color-mix(in srgb,var(--paper) 86%,transparent);border-radius:4px}
.uses{font:9px var(--mono);color:var(--ink-60);letter-spacing:.04em}
.technique-node .sprout{position:absolute;top:2px;left:calc(50% + 22px);width:24px;height:24px;min-height:24px;padding:0;border-radius:50%;font:14px/1 var(--mono);display:none;place-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--ink)}
.technique-node:hover .sprout,.technique-node.selected .sprout,.technique-node:focus-within .sprout{display:grid}.technique-node .sprout:hover{background:var(--ink);color:var(--paper)}
/* Domains: a box in the operation colour with the Iris domain glyph. */
.cell-node{background:var(--paper);border:1.3px solid var(--accent);border-radius:3px;padding:6px 10px 6px 8px;display:flex;align-items:center;gap:8px}
.cell-node .glyph{width:20px;height:20px;flex:none;color:var(--ink);fill:currentColor}.cell-text{display:flex;flex-direction:column;min-width:0}
.kicker{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}.cell-node .ask{font-size:11px;color:var(--ink-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-node:hover,.cell-node.selected{background:var(--paper-2)}.cell-node.selected{outline:none;border-width:2.4px}
/* Operations: circles in the operation colour with the Iris operation mark. */
.operation-node{border-radius:50%;background:var(--paper);border:1.5px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.op-mark{width:30px;height:30px;color:var(--accent);fill:currentColor}.op-name{font:18px/1 var(--serif);color:var(--ink)}
.operation-node:hover,.operation-node.selected{background:var(--paper-2)}.operation-node.selected{border-width:2.6px}
.hide-model .cell-node,.hide-model .operation-node,.hide-model #edges .taxonomy{display:none}
/* Annotations. */
.annotation{position:absolute;pointer-events:auto;cursor:move;white-space:pre-wrap;word-break:break-word;outline:none}
.annotation.note{background:color-mix(in srgb,var(--ink) 6%,var(--surface));border-top:3px solid var(--ink);border-radius:3px;padding:10px 12px;font-size:13px;line-height:1.45;box-shadow:0 1px 2px var(--shadow),0 10px 26px var(--ink-05);color:var(--ink)}
.annotation.text{font:22px/1.15 var(--serif);color:var(--ink);padding:2px 4px}
.annotation[data-empty]::before{content:attr(data-empty);color:var(--ink-60)}
.annotation[contenteditable=true]{cursor:text;outline:2px solid var(--ink);outline-offset:3px}
.annotation.selected{outline:2px dashed var(--ink);outline-offset:4px}
#ink .shape{pointer-events:auto;cursor:move}#ink .hit{fill:none;stroke:transparent;stroke-width:16px;vector-effect:non-scaling-stroke;pointer-events:stroke}
#ink .stroke{fill:none;stroke:var(--ink);stroke-width:2.2px;vector-effect:non-scaling-stroke;stroke-linecap:round}#ink .shape.selected .stroke{stroke-dasharray:6 4}
/* The map bar and its menu. */
.mapbar{position:absolute;top:14px;left:16px;display:flex;align-items:center;gap:6px;z-index:4;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:4px 6px 4px 4px;box-shadow:0 3px 14px var(--shadow)}
.mapbar input{border:0;background:transparent;font:20px var(--serif);width:200px;padding:2px 12px;border-radius:999px}.mapbar input:hover{background:var(--ink-05)}.mapbar .pill{min-height:28px;padding:2px 12px}.mapbar .meta{padding:0 8px;white-space:nowrap}
.menu{position:absolute;top:62px;left:16px;z-index:8;width:290px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:6px;display:flex;flex-direction:column;gap:1px;box-shadow:0 12px 40px var(--shadow)}
.menu button{border:0;border-radius:8px;text-align:left;display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:32px;background:transparent}.menu button:hover{background:var(--ink-05)}.menu button.current{font-weight:600}
.menu hr{border:0;border-top:1px solid var(--rule);margin:5px 6px}.menu p.note{font-size:11px;color:var(--ink-60);line-height:1.45;margin:6px 8px 4px}.group-label{color:var(--ink-60);margin:6px 8px 4px}
/* Empty state, gate, drop overlay, loading. */
#empty,#gate{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}#gate{z-index:15;background:var(--paper);pointer-events:auto}
.drop{pointer-events:auto;max-width:440px;text-align:center;padding:36px 34px;background:var(--surface);border:1px solid var(--rule);border-radius:18px;box-shadow:0 20px 80px var(--shadow)}.drop .eyebrow{color:var(--mad-red);margin:0 0 10px}
.drop h1{font:44px/1.05 var(--serif);font-weight:400;margin:0 0 12px}.drop p{color:var(--ink-60);line-height:1.55;margin:0 0 18px}.drop .prominent{margin-bottom:14px}.drop .meta{margin:0}
#dropping{position:absolute;inset:12px;border:2px dashed var(--ink);border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 80%,transparent);z-index:9;pointer-events:none;font:30px var(--serif)}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper);z-index:20;color:var(--ink-60);font:11px var(--mono);letter-spacing:.09em;text-transform:uppercase}
/* The capsule: the same refined control as the Iris map's zoom bar. */
.bottom{position:absolute;bottom:32px;left:16px;right:16px;display:flex;gap:8px;align-items:flex-end;pointer-events:none;z-index:4}.bottom>*{pointer-events:auto}
#add{min-height:38px;padding:4px 18px;background:var(--paper);box-shadow:0 3px 14px var(--shadow)}
.capsule{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--ink-12);border-radius:999px;background:var(--paper);box-shadow:0 3px 14px var(--shadow)}
.capsule button{min-width:34px;height:34px;min-height:34px;border:1px solid transparent;border-radius:999px;background:transparent;font:13px var(--mono);color:var(--ink);display:grid;place-items:center;padding:0}
.capsule button:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}.capsule button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.capsule .wide{padding:0 10px;font-size:9.5px}.tools{margin-left:auto}.rule{width:1px;height:20px;background:var(--rule);margin:0 4px}
.palette{position:absolute;right:0;bottom:50px}.swatch{min-width:26px!important;width:26px;height:26px!important;min-height:26px!important}.swatch::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--swatch)}.swatch[aria-pressed=true]{background:transparent!important;border-color:var(--ink)!important}
.legend{position:absolute;bottom:10px;left:18px;right:18px;display:flex;gap:16px;font:9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60);pointer-events:none;align-items:center}.legend i{display:inline-block;width:18px;border-top:1.6px solid var(--ink-60);margin-right:6px;vertical-align:middle}.legend i.dotted{border-top-style:dashed}.legend i.faint{opacity:.45;border-top-width:1px}#saved{margin-left:auto}
.empty .bottom .tools,.empty .legend{visibility:hidden}.inspecting .bottom,.inspecting .legend{right:416px}
/* The inspector. */
#inspect{position:fixed;top:46px;right:0;bottom:0;width:400px;background:var(--surface);border-left:1px solid var(--rule);overflow:auto;z-index:6;padding:0 18px 40px}
.inspect-head{display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--surface);padding:14px 0 10px;z-index:1;border-bottom:1px solid var(--rule)}.inspect-head .thumb{width:40px;height:40px;object-fit:cover;border-radius:4px;background:var(--paper-2);flex-shrink:0}
.inspect-head h2{font:24px/1.1 var(--serif);font-weight:400;margin:0;flex:1}.inspect-head .mark,.head-glyph{width:30px;height:30px;color:var(--ink);fill:currentColor;flex-shrink:0}.inspect-head .head-glyph{color:var(--accent,var(--ink))}
.title-input{font:22px var(--serif);border-color:transparent;background:transparent;padding:2px 6px}.title-input:hover{background:var(--ink-05)}.close{flex-shrink:0;margin-left:auto;width:32px;height:32px;padding:0;display:grid;place-items:center;border-color:transparent;background:transparent}.close:hover{border-color:var(--rule)!important}
.block{padding:16px 0 4px;display:flex;flex-direction:column;gap:10px}.block+.block{border-top:1px solid var(--rule)}.block h3{font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);font-weight:400;margin:0}.block p{margin:0;line-height:1.5}
p.note{color:var(--ink-60);font-size:12.5px}.summary{font:19px/1.25 var(--serif)}.eyebrow-label{color:var(--ink-60)}
.card{border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:8px;background:var(--paper);border-left:3px solid var(--accent)}.assigned.supporting{border-left-style:dashed}
.row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row-head .mark{width:24px;height:24px;color:var(--ink);fill:currentColor}.row-head strong{font:19px var(--serif);font-weight:400}.link-name{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:0;min-height:0}.link-name:hover strong{text-decoration:underline}
.badge{font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 8px;border:1px solid var(--rule);color:var(--ink-60)}.badge.primary{background:var(--accent,var(--ink));color:var(--surface);border-color:transparent}
.trail{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.trail .step{min-height:24px;padding:1px 10px;font:9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:transparent}.trail .step:disabled{opacity:1;color:var(--ink-60);border-color:var(--rule)}.sep{color:var(--ink-60)}.here{font:9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button{min-height:30px;font-size:12.5px}
.segmented{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:2px;align-self:flex-start;background:var(--surface)}.segmented button{border:0;min-height:26px;padding:2px 12px;font:9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:transparent}.segmented button[aria-pressed=true]{background:var(--accent,var(--ink));color:var(--surface)}
.props-row{display:flex;flex-wrap:wrap;gap:4px}.prop{min-height:26px;padding:2px 10px;font:10px var(--mono);letter-spacing:.04em}.prop[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.picker{display:flex;flex-direction:column;gap:8px}.picker-list{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:1px;border:1px solid var(--rule);border-radius:12px;padding:4px;background:var(--paper)}
.pick{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;background:transparent;border:1px solid transparent;border-radius:8px;padding:5px 8px;min-height:42px}.pick:hover:not(:disabled){background:var(--surface);border-color:var(--rule)}
.pick .mark{grid-row:span 2;width:26px;height:26px;color:var(--ink);fill:currentColor;align-self:center}.pick-name{font:16px var(--serif)}.pick-alt{font-size:11px;color:var(--ink-60)}.pick:disabled{opacity:.4}
.linked{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid transparent;text-align:left;padding:5px;border-radius:8px}.linked img{width:38px;height:38px;object-fit:cover;border-radius:4px;background:var(--paper-2)}.linked-title{flex:1;font-size:13px}
dialog{background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:18px;padding:22px 24px;max-width:min(560px,calc(100vw - 28px));box-shadow:0 20px 90px var(--shadow)}dialog::backdrop{background:rgba(20,20,20,.25)}dialog p{line-height:1.6;color:var(--ink-60)}
h2{font:30px var(--serif);font-weight:400;margin:0}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head button{font-size:20px;width:34px;height:34px;padding:0;display:grid;place-items:center}
#toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);padding:10px 16px;background:var(--ink);color:var(--paper);border-radius:999px;max-width:90vw;z-index:30;font-size:13px;box-shadow:0 6px 24px var(--shadow)}
@media(max-width:720px){.topbar{height:52px;padding:0 12px}.product{font-size:18px}.topbar nav .tbtn:not(.theme){display:none}#canvas{height:calc(100svh - 52px)}#inspect{top:auto}
 .mapbar{top:10px;left:10px;right:10px}.mapbar input{width:auto;flex:1;min-width:0;font-size:18px}.mapbar .meta{display:none}.menu{top:60px;left:10px;right:10px;width:auto}
 .bottom{left:10px;right:10px;bottom:30px}.capsule button{min-width:38px;height:38px}.capsule .wide[aria-label^="How"]{display:none}.legend{left:12px;right:12px;font-size:8.5px;gap:10px}.legend span:nth-child(3){display:none}
 #inspect{left:0;width:auto;height:54svh;border-left:0;border-top:1px solid var(--rule);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px var(--shadow)}.inspecting .bottom,.inspecting .legend{display:none}
 .pick{min-height:44px}.drop{margin:0 14px;padding:28px 22px}.drop h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Suggestions: on-device measurements and Claude's reading */
.badge.measured{border-color:var(--accent,var(--rule));color:var(--ink)}
.card.device{border-left-style:dashed}
.note.looking{animation:looking 1.4s var(--ease) infinite alternate}
@keyframes looking{from{opacity:.45}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.note.looking{animation:none}}
/* Canvas objects are images, not cards. Controls appear on hover, focus and selection. */
.node.upload-node,.node.library-node{padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.upload-node .picture,.library-node .picture{height:100%;width:100%;border-radius:0;background:none}
.upload-node .picture img,.library-node .picture img{width:100%;height:100%;object-fit:contain;border-radius:0}
.node.selected{outline:2px solid var(--ink);outline-offset:5px}
.image-add{position:absolute;top:-46px;left:calc(50% - 20px);width:40px;height:40px;padding:0;font-size:24px;opacity:0;pointer-events:none}
.node:hover .image-add,.node.selected .image-add,.node:focus-within .image-add{opacity:1;pointer-events:auto}
.connector-port{position:absolute;width:24px;height:24px;border-radius:50%;bottom:-16px;left:calc(50% - 12px);background:var(--surface);border:2px solid var(--accent,var(--ink));opacity:0;cursor:crosshair}
.upload-node .connector-port,.library-node .connector-port{top:-16px;bottom:auto;left:calc(50% - 12px)}
.node:hover .connector-port,.node.selected .connector-port,.node:focus-within .connector-port{opacity:1}
.technique-node .connector-port{top:50px;bottom:auto}
#connection-preview{position:absolute;overflow:visible;width:1px;height:1px;pointer-events:none;z-index:0}
#connecting{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:4 5}
#add.add-button{width:52px;height:52px;padding:0;font:32px var(--sans);background:var(--ink);color:var(--paper);box-shadow:0 4px 20px var(--shadow)}
#add-menu{position:absolute;z-index:15;left:16px;bottom:95px;width:min(340px,calc(100% - 32px));max-height:calc(100% - 180px);overflow:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:16px;box-shadow:0 12px 40px var(--shadow)}
#add-menu .row-head{justify-content:space-between;margin-bottom:8px}#add-menu .picker-list{max-height:260px}#add-menu .add-choice{display:block;width:100%;text-align:left;border:0;border-radius:8px;background:none;padding:10px;min-height:44px}#add-menu .add-choice:hover{background:var(--ink-05)}
#marquee{position:absolute;z-index:5;pointer-events:none;border:1px solid var(--group);background:color-mix(in srgb,var(--group) 12%,transparent)}
#selection-count{position:absolute;top:66px;left:18px;font-size:12px;color:var(--ink-60);pointer-events:none}
#ink .resize-handle{pointer-events:all;fill:var(--surface);stroke:var(--group);stroke-width:1.5;cursor:nwse-resize}
.note-resize{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:var(--surface);border:1.5px solid var(--group);cursor:nwse-resize;z-index:1}
.annotation[data-note=preview]{opacity:.55;pointer-events:none}
.annotation{overflow:visible}.annotation.text{white-space:pre-wrap;overflow-wrap:anywhere;min-width:40px}
.annotation:focus-within .connector-port,.annotation:hover .connector-port,.annotation.selected .connector-port{opacity:1}
.annotation[contenteditable=true]{white-space:pre-wrap;overflow-wrap:anywhere;caret-color:var(--ink)}
.annotation[data-note=preview]{outline:1px dashed var(--ink-60)}
.connect-target{outline:2px solid var(--op-group)!important;outline-offset:6px}
.connector-port:focus-visible{opacity:1;outline:2px solid var(--op-group);outline-offset:3px}
#ink .shape-connector{fill:var(--surface);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;cursor:crosshair;pointer-events:all}
#ink .shape:hover .shape-connector,#ink .shape.selected .shape-connector,#ink .shape-connector:focus{opacity:1}
#edges path.personal{stroke:var(--ink-60);stroke-width:1.3}
@media(max-width:640px){.tools #undo,.tools #redo{display:none}.tools{overflow-x:auto;scrollbar-width:none}.tools::-webkit-scrollbar{display:none}}
.tools{max-width:calc(100vw - 92px);overflow-x:auto}.tools button{flex-shrink:0}
@media(hover:none){.image-add,.connector-port,#ink .shape-connector{opacity:1;pointer-events:auto}.palette{max-width:calc(100vw - 24px);overflow-x:auto}}