.studio{width:min(100% - 2 * var(--gutter), 1480px);gap:20px;margin-inline:auto;padding-block:12px 48px;display:grid}.sketch{align-content:start;gap:10px;min-width:0;display:grid}@media (min-width:1024px){.studio{grid-template-columns:minmax(0,1.7fr) minmax(360px,1fr);align-items:start;padding-top:18px}.sketch{position:sticky;top:12px}}.toolbar{flex-wrap:wrap;align-items:center;gap:4px 14px;display:flex;position:relative}.tools-row{align-items:center;gap:2px;min-width:0;display:flex}.tools-row:last-child{flex:auto}.spacer{flex:1 1 0}.rule{background:var(--line-strong);flex:none;width:1px;height:20px;margin-inline:7px}.toolbar svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.toolbar svg circle{fill:currentColor;stroke:none}.seg{flex:none;gap:2px;display:inline-flex}.seg button,.toolbar .btn-icon{border-radius:var(--radius);min-width:40px;height:40px;min-height:40px;color:var(--ink-2);font:600 .9rem/1 var(--font);cursor:pointer;touch-action:manipulation;background:0 0;border:0;justify-content:center;align-items:center;gap:7px;padding:0 11px 0 10px;display:inline-flex}.toolbar .btn-icon{width:40px;padding:0}.seg button svg,.toolbar .btn-icon svg{flex:none;width:20px;height:20px}.seg button[aria-checked=true]{background:var(--ink);color:var(--bg)}.seg button[data-options]{position:relative}.seg button[data-options]:after{content:"";opacity:.55;border:3px solid;border-color:#0000 currentColor currentColor #0000;position:absolute;bottom:4px;right:4px}@media (hover:hover){.seg button[aria-checked=false]:hover,.toolbar .btn-icon:not(:disabled):hover,.toolbar .btn-icon[aria-expanded=true]{background:var(--surface-2);color:var(--ink)}}.toolbar .btn-icon[aria-expanded=true]{background:var(--surface-2);color:var(--ink)}.toolbar .btn-icon:disabled{opacity:.35}@media (prefers-reduced-motion:no-preference){.seg button{transition:background-color .12s ease-out,color .12s ease-out}}.seg button{padding:0}.seg button span{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.inks{border:0;flex:none;gap:0;margin:0;padding:0;display:inline-flex}.inks input{opacity:0;width:1px;height:1px;position:absolute}.inks label{border-radius:var(--radius);cursor:pointer;place-items:center;width:31px;height:40px;display:grid}.inks .swatch{border-radius:50%;width:18px;height:18px;box-shadow:inset 0 0 0 1px #0000002e;box-shadow:inset 0 0 0 1px lab(0% 0 0/.18)}.inks input:checked+label .swatch{box-shadow:inset 0 0 0 1px #0000002e, 0 0 0 2.5px var(--bg), 0 0 0 4px var(--ink)}@supports (color:lab(0% 0 0)){.inks input:checked+label .swatch{box-shadow:inset 0 0 0 1px lab(0% 0 0/.18), 0 0 0 2.5px var(--bg), 0 0 0 4px var(--ink)}}@media (hover:hover){.inks input:not(:checked)+label:hover{background:var(--surface-2)}}.inks input:focus-visible+label{outline:2px solid var(--focus);outline-offset:-2px}@media (forced-colors:active){.seg button[aria-checked=true],.inks input:checked+label{outline-offset:-2px;outline:2px solid canvastext}}.go{gap:7px;height:40px;min-height:40px;padding:0 15px 0 13px;font-weight:650;position:relative}.go svg{stroke-width:1.8px}.go[data-stale=true]:after{content:"";background:var(--accent-ink);opacity:.7;border-radius:50%;width:6px;height:6px;position:absolute;top:5px;right:5px}@media (max-width:719px){.tools-row{flex:100%}.toolbar .more,.toolbar .tools{position:static}.toolbar .menu,.toolbar .add .menu{width:auto;min-width:0;left:0;right:0}}@media (max-width:419px){.rule{margin-inline:4px}.go{padding-inline:11px 12px}}@media (max-width:399px){.inks label{width:30px}.toolbar .btn-icon,.seg button{width:36px;min-width:36px}.rule{margin-inline:4px}.go svg{display:none}.go{padding-inline:12px}}@media (max-width:349px){.inks label{width:27px}.toolbar .btn-icon,.seg button{width:32px;min-width:32px}.tools-row:last-child .rule{display:none}}.more,.tools{position:relative}.menu{z-index:20;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--surface);min-width:260px;box-shadow:var(--shadow-card);gap:2px;margin:0;padding:6px;list-style:none;display:grid;position:absolute;top:calc(100% + 6px);left:0}.menu[hidden]{display:none}.menu button{width:100%;min-height:44px;color:var(--ink);font:450 .95rem/1.2 var(--font);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:0 12px}.menu [role=menuitemcheckbox]{padding-left:40px;position:relative}.menu [role=menuitemcheckbox]:before{content:"";border:1.5px solid var(--line-strong);border-radius:4px;width:16px;height:16px;margin-top:-8px;position:absolute;top:50%;left:12px}.menu [role=menuitemcheckbox][aria-checked=true]:before{border-color:var(--accent);background:var(--accent)}.menu [role=menuitemcheckbox][aria-checked=true]:after{content:"";border:solid var(--accent-ink);border-width:0 2px 2px 0;width:5px;height:9px;margin-top:-6.5px;position:absolute;top:50%;left:17.5px;transform:rotate(45deg)}.menu [role=menuitemradio]{padding-left:40px;position:relative}.menu [role=menuitemradio][aria-checked=true]:before{content:"";background:var(--accent);border-radius:50%;width:8px;height:8px;margin-top:-4px;position:absolute;top:50%;left:16px}.menu button small{color:var(--ink-3);margin-top:2px;font-size:.8rem;display:block}.tool-menu{width:290px}.tool-menu button{padding-block:8px}.menu [role=separator]{background:var(--line);height:1px;margin:4px 6px}@media (hover:hover){.menu button:hover{background:var(--surface-2)}}.menu button:focus-visible{outline-offset:-2px}.add .menu{overscroll-behavior:contain;width:340px;max-height:min(70svh,560px);overflow-y:auto}.menu-head{color:var(--ink-3);font:600 .8rem/1.2 var(--font);margin:8px 12px 4px}.menu-head:first-child{margin-top:4px}.add-shapes{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;display:grid}.add-shapes button{align-items:center;gap:10px;min-height:42px;padding:0 8px;font-size:.9rem;display:flex}.add-shapes svg{stroke-width:1.4px;flex:none;width:28px;height:20px}.add-shapes svg circle{fill:none;stroke:currentColor}.add-shapes svg .fill{fill:currentColor;stroke:none}.add-arrows{grid-template-columns:minmax(0,1fr)}.add-templates{gap:2px;display:grid}.add-templates button{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.pad{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);position:relative;overflow:hidden}@media (max-width:719px){.pad{margin-inline:calc(-1 * var(--gutter));border-inline:0;border-radius:0}}.pad canvas{touch-action:none;cursor:crosshair;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:100%;height:clamp(340px,100svh - 250px,1100px);display:block}.pad canvas[data-tool=erase],.pad canvas[data-tool=cut]{cursor:cell}.pad canvas[data-tool=select]{cursor:default}.pad canvas[data-tool=select][data-over]{cursor:move}.pad canvas[data-tool=hand],.pad canvas[data-space]{cursor:grab}.pad canvas[data-panning]{cursor:grabbing}@media (min-width:1024px){.pad canvas{height:clamp(420px,100svh - 210px,1100px)}}@media (orientation:landscape) and (max-height:540px){.pad canvas{height:max(120px, calc(100svh - var(--toolbar,52px) - 90px))}.toolbar .seg button{padding:0 11px}.toolbar .seg button span{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sketch .read-row{flex-wrap:nowrap;align-items:center}.sketch .read{align-items:center;gap:10px;min-width:0;font-size:.86rem;line-height:1.35;display:flex}.sketch .read>span:first-child{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;min-width:0;display:-webkit-box;overflow:hidden}.sketch .read .ms{display:none}.sketch .read .to-result,.sketch .read-row .check{flex:none}}@media (orientation:landscape) and (max-height:540px) and (max-width:699px){.sketch .read-row .check{display:none}}.pad-hint{color:var(--ink-2);text-align:center;pointer-events:none;place-content:center;justify-items:center;gap:14px;padding:24px;display:grid;position:absolute;inset:0}.pad-hint p{max-width:30ch;margin:0;font-size:1rem;line-height:1.5}.pad-hint strong{color:var(--ink);margin-bottom:4px;font-size:1.06rem;font-weight:600;display:block}.pad-hint .btn{pointer-events:auto}.pad-chip{border:1px solid var(--line);background:color-mix(in oklch, var(--surface) 90%, transparent);max-width:calc(100% - 16px);color:var(--ink-2);border-radius:8px;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:3px 3px 3px 10px;font-size:.82rem;line-height:1.3;display:flex;position:absolute;bottom:8px;left:8px}.pad-chip button,.pad-zoom{border:1px solid var(--line);background:var(--surface);min-height:30px;color:var(--ink);font:600 .8rem/1 var(--font);cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:0 9px;display:inline-flex}.pad-corner{gap:6px;display:flex;position:absolute;top:8px;right:8px}.pad-full{border:1px solid var(--line);background:color-mix(in oklch, var(--surface) 90%, transparent);width:32px;height:32px;color:var(--ink-2);cursor:pointer;border-radius:6px;place-items:center;padding:0;display:grid}.pad-full svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.pad-zoom{background:color-mix(in oklch, var(--surface) 90%, transparent);min-height:32px;color:var(--ink-2);font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}.pad-zoom:after{content:"Fit";color:var(--ink);font-family:var(--font);font-weight:600}.pad-zoom[hidden]{display:none}.sel-bar{z-index:6;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;flex-wrap:wrap;gap:1px;max-width:calc(100% - 8px);padding:3px;display:flex;position:absolute;box-shadow:0 1px 2px #0000001f,0 8px 20px -6px #00000052;box-shadow:0 1px 2px lab(0% 0 0/.12),0 8px 20px -6px lab(0% 0 0/.32)}.sel-bar[hidden],.sel-bar button[hidden]{display:none}.sel-bar button{height:32px;color:var(--ink);font:600 .82rem/1 var(--font);white-space:nowrap;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:6px;padding:0 9px}.sel-bar button[data-sel=delete]{color:var(--error)}@media (max-width:399px){.sel-bar button{padding:0 7px}}.full[aria-pressed=false] .leave,.full[aria-pressed=true] .enter{display:none}@media (hover:hover){.pad-full:hover{background:var(--surface-2);color:var(--ink)}.sel-bar button:hover,.pad-zoom:hover,.pad-chip button:hover{background:var(--surface-2)}}.name-edit{z-index:5;margin:0;position:absolute}.name-edit input{border:2px solid var(--accent);border-radius:var(--radius);background:var(--surface);width:100%;min-height:44px;color:var(--ink);font:600 1rem/1.2 var(--font);text-align:center;box-shadow:var(--shadow-card);padding:0 12px}.read-row{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;display:flex}.read{min-width:0;color:var(--ink-2);margin:0;font-size:.94rem;line-height:1.5}.read strong{color:var(--ink)}.read .kept{color:var(--warning);font-weight:600}.read .ms{color:var(--ink-3);font:.8rem var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}.read .to-result{white-space:nowrap;margin-left:4px;font-weight:560}@media (min-width:1024px){.read .to-result{display:none}}.check{min-height:36px;color:var(--ink-2);cursor:pointer;align-items:center;gap:8px;font-size:.94rem;display:inline-flex}.check input{width:18px;height:18px;accent-color:var(--accent);margin:0}.result{gap:14px;min-width:0;scroll-margin-top:12px;display:grid}.back{justify-self:start;font-size:.92rem;font-weight:560}@media (min-width:1024px){.back{display:none}}.panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);gap:12px;min-width:0;padding:16px;display:grid}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;display:flex}.panel h2{margin:0;font-size:1rem;font-weight:650}.panel h2 label{cursor:inherit}.panel-head span{color:var(--ink-3);font-size:.86rem}.diagram{border-radius:var(--radius);background:var(--surface);place-items:center;min-height:220px;transition:opacity .16s ease-out;display:grid;overflow-x:auto}.diagram.is-busy{opacity:.55}.diagram svg{max-width:100%;height:auto}.diagram g.node,.diagram g.rough-node,.diagram g.cluster{cursor:pointer}.empty{max-width:32ch;color:var(--ink-3);text-align:center;margin:0;font-size:.94rem}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.status{color:var(--ink-3);margin:0;font-size:.88rem}.err{color:var(--error);margin:0;font-size:.9rem}.names{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:8px 14px;display:grid}.names>.status{grid-column:1/-1}.name-row{align-items:center;gap:6px;min-width:0;display:flex}.names label{flex:auto;align-items:center;gap:8px;min-width:0;display:flex}.names select,.shape-note{flex:none;width:8.4em}.pick{color:var(--ink-2);align-items:center;gap:8px;font-size:.94rem;display:inline-flex}.names select,.pick select{border:1px solid var(--line);background:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%) right 14px center / 5px 5px no-repeat, linear-gradient(135deg, var(--ink-2) 50%, transparent 50%) right 9px center / 5px 5px no-repeat, var(--surface-2);min-height:40px;color:var(--ink);font:400 .9rem/1.2 var(--font);appearance:none;cursor:pointer;border-radius:6px;padding:0 26px 0 9px}.names select:disabled,.pick select:disabled{opacity:.55;cursor:default}.shape-note{color:var(--ink-3);padding-left:10px;font-size:.86rem}.names input{border:1px solid var(--line);background:var(--surface-2);min-width:0;min-height:40px;color:var(--ink);font:400 .95rem/1.3 var(--font);border-radius:6px;flex:auto;padding:0 10px}.names input::placeholder{color:var(--ink-3)}.names input:disabled{opacity:.55}.tag{background:var(--accent);min-width:28px;color:var(--accent-ink);font:600 .78rem/1 var(--mono);text-align:center;border-radius:4px;flex:none;padding:5px 6px}.line-tag{border:1px solid var(--accent);background:var(--accent-soft);color:var(--ink);padding:4px 5px}textarea.code{resize:vertical;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);width:100%;min-height:240px;color:var(--ink);font:.86rem/1.55 var(--mono);tab-size:2;white-space:pre;padding:12px;overflow:auto}@media (prefers-reduced-motion:reduce){.diagram{transition:none}}.is-full{overflow:hidden}.is-full .sketch{z-index:60;padding:max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));background:var(--bg);grid-template-rows:auto minmax(0,1fr) auto;gap:6px;position:fixed;inset:0}.is-full .pad{border-radius:var(--radius);min-height:0;display:grid}.is-full .pad canvas{height:100%;min-height:0}.is-full .read-row{flex-wrap:nowrap;align-items:center;min-height:30px;padding-inline:4px}.is-full .read{align-items:center;gap:2px 10px;font-size:.86rem;line-height:1.35;display:flex}.is-full .read>span:first-child{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;min-width:0;display:-webkit-box;overflow:hidden}.is-full .read .ms{display:none}.is-full .read .to-result{flex:none;margin-left:0;display:inline}@media (max-width:559px){.is-full .read-row .check{display:none}}.is-full .read-row .check{flex:none;min-height:30px;font-size:.86rem}