.workshop-head{border-bottom:1px solid var(--rule-strong);justify-content:space-between;align-items:center;gap:24px;padding-block:42px 32px;display:flex}.workshop-head h1{letter-spacing:-.055em;margin:12px 0 16px;font-size:clamp(38px,5.4vw,80px);font-weight:400;line-height:1.08}.workshop-head h1 em{color:var(--teal);font-weight:400}.workshop-head p:last-child{font:15px / 1.6 var(--sans);color:var(--muted);margin:0}.desk-number{font:76px / .9 var(--serif);text-align:right;letter-spacing:-.05em;color:var(--rule-strong)}.desk-number span{font:12px var(--mono);letter-spacing:.08em;white-space:nowrap;margin-top:16px;display:block}.live-dot{background:var(--teal);width:6px;height:6px;box-shadow:0 0 0 4px color-mix(in srgb, var(--teal) 10%, transparent);border-radius:50%;margin:0 6px 1px 16px;display:inline-block}.design-desk{grid-template-columns:285px minmax(0,1fr);align-items:start;gap:32px;padding-block:30px 24px;display:grid}.design-controls{--dropdown-radius:0;--dropdown-font:400 13px var(--sans);font-family:var(--sans);min-width:0}.design-controls fieldset{border:0;min-width:0;margin:0;padding:0}.design-controls details{border-bottom:1px solid var(--rule)}.design-controls summary{cursor:pointer;font:600 14px var(--sans);align-items:center;gap:12px;padding:16px 0;list-style:none;display:flex}.design-controls summary:after{content:"+";font:20px var(--mono);color:var(--muted);margin-left:auto}.design-controls details[open] summary:after{content:"−"}.design-controls summary span{font:12px var(--mono);color:var(--teal)}.control-body{padding:0 0 20px}.palette-picker{grid-template-columns:1fr 1fr;gap:8px;min-height:234px;padding-bottom:20px;display:grid}.palette-card{border:1px solid var(--rule);background:var(--card);color:var(--ink);text-align:left;cursor:pointer;padding:10px;transition:border-color .2s,transform .2s;position:relative}.palette-card:hover{border-color:var(--teal);transform:translateY(-2px)}.palette-card[aria-pressed=true]{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}.palette-card strong{font:550 12px var(--sans);margin-top:8px;display:block}.palette-swatches{height:23px;display:flex;overflow:hidden}.palette-swatches i{flex:1}.palette-card[aria-pressed=true]:after{content:"↗";color:var(--teal);font-size:12px;position:absolute;bottom:7px;right:8px}.field{font:500 12px / 1.6 var(--sans);color:var(--ink-2);margin-bottom:14px;display:block}.field input[type=text]{border:1px solid var(--rule-strong);background:var(--card);width:100%;color:var(--ink);font:13px var(--sans);border-radius:0;margin-top:5px;padding:9px;display:block}.field .dropdown{margin-top:5px}.field-pair{grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:10px;display:grid}.control-note{font:12px / 1.6 var(--sans);color:var(--muted);margin:6px 0 14px}.toggle-grid{gap:0;display:grid}.toggle{border-bottom:1px dotted var(--rule);font:12px var(--sans);cursor:pointer;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;display:flex}.toggle input{appearance:none;background:var(--rule-strong);cursor:pointer;border:0;border-radius:16px;flex-shrink:0;width:28px;height:16px;margin:0;transition:background .2s;position:relative}.toggle input:after{content:"";background:var(--card);border-radius:50%;width:10px;height:10px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle input:checked{background:var(--teal)}.toggle:has(input:disabled){opacity:.5;cursor:default}.color-grid{grid-template-columns:1fr 1fr;gap:10px 12px;display:grid}.color-field{font:12px var(--sans);grid-template-columns:30px 1fr;align-items:center;gap:8px;display:grid}.color-field input{border:1px solid var(--rule);cursor:pointer;background:0 0;width:30px;height:30px;padding:0}.color-field code{font:12px var(--mono);color:var(--muted);text-transform:uppercase;margin-top:2px;display:block}.field input[type=range]{width:100%;accent-color:var(--teal);margin:8px 0 0;display:block}.field output{float:right;font:12px var(--mono);color:var(--teal)}.design-output{min-width:0}.drawing-board{border:1px solid var(--rule-strong);box-shadow:0 8px 25px color-mix(in srgb, var(--shadow) 35%, transparent);background:var(--card)}.board-bar{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;display:flex}.renderer-switch{border:0;gap:4px;min-width:0;margin:0;padding:0;display:flex}.renderer-switch button{color:var(--muted);font:550 12px var(--sans);cursor:pointer;background:0 0;border:0;padding:7px 10px}.renderer-switch button[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}.board-state{font:12px var(--mono);color:var(--teal)}.board-paper{background:radial-gradient(var(--rule) .7px, transparent .7px) 0 0 / 12px 12px;padding:16px 24px 10px;position:relative}.board-coordinate{font:12px var(--mono);letter-spacing:.15em;color:var(--muted);padding-bottom:10px}.board-edition{font:12px var(--mono);color:var(--muted);border-top:1px solid var(--rule);justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;display:flex}.board-edition span:first-child{color:var(--ink)}#design-map{aspect-ratio:1;width:min(100%,620px);min-height:300px;margin:auto;position:relative}#design-map>svg{width:100%;display:block}#design-map:has(.sf-explorer-feature-controls:not([hidden])){aspect-ratio:auto}#design-map .sf-explorer{background:0 0;border:0;border-radius:0;margin:0}#design-map .sf-explorer-body{display:block}#design-map .sf-explorer-map-column{background:0 0;padding:0}#design-map .sf-explorer-toolbar{z-index:2;background:0 0;border:0;gap:3px;max-width:calc(100% - 24px);margin:0;padding:0;position:absolute;top:12px;right:12px}#design-map .sf-explorer-toolbar button{background:var(--card);color:var(--ink);border-color:var(--rule-strong);min-height:32px;padding:5px 8px;font-size:12px}#design-map .sf-explorer-feature-controls{background:var(--card);margin:0;padding:6px 8px;font-size:12px}#design-map .sf-explorer-feature-controls label{color:var(--ink);font-size:12px}#design-map .sf-explorer-feature-controls .dropdown{--dropdown-font:400 12px var(--sans);max-width:240px}#design-map .sf-explorer-hint{font:12px / 1.4 var(--sans);color:var(--muted);background:0 0;margin:0;padding:6px 0}#design-map .sf-explorer-canvas{aspect-ratio:1}#design-map .stage-loading{text-align:center;font:13px var(--sans);color:var(--muted);position:absolute;inset:40% 0}.board-footer{border-top:1px solid var(--rule);justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.board-footer p{font:12px / 1.5 var(--sans);color:var(--muted);max-width:65%;margin:0}.history-actions{gap:4px;display:flex}.history-actions button{border:1px solid var(--rule);color:var(--ink);font:12px var(--sans);cursor:pointer;background:0 0;padding:6px 9px}.history-actions button:first-child,.history-actions button:nth-child(2){font-size:17px;line-height:15px}:is(.design-desk,.design-takeaways) button:disabled{opacity:.45;cursor:default}:is(.design-desk,.design-takeaways) :is(button,input,select,summary):focus-visible{outline:2px solid var(--teal);outline-offset:3px}.design-takeaways{padding-left:calc(var(--gutter) + 317px);padding-bottom:40px}.takeaway-bar{justify-content:space-between;align-items:center;gap:20px;padding:24px 0 8px;display:flex}.takeaway-bar .eyebrow{font-size:12px}.takeaway-bar p{font:20px var(--serif);margin:6px 0}.takeaway-bar>div:last-child{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.export-note{font:12px / 1.6 var(--sans);color:var(--muted);margin:0 0 30px}.design-code{border:1px solid var(--rule);background:var(--card);min-width:0;padding:22px}.code-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.code-heading .eyebrow{font-size:12px}.code-heading h2{font:28px var(--serif);margin:6px 0 14px}.design-code pre{max-height:380px;font:12px / 1.7 var(--mono);tab-size:2;white-space:pre;margin:0;overflow:auto}.state-inspector{border-block:1px solid var(--rule);font:12px / 1.6 var(--sans);margin-top:20px;padding:16px 0}.state-inspector summary{cursor:pointer;font-weight:600}.state-inspector summary span{float:right;color:var(--muted);font-weight:400}.state-inspector p{color:var(--muted);font-size:12px}.inspector-row{border-bottom:1px dotted var(--rule);justify-content:space-between;padding:6px 0;display:flex}.inspector-row span:last-child{font:12px var(--mono);color:var(--teal)}.desk-footnote{justify-content:space-between;align-items:center;gap:30px;padding-block:0 60px;display:flex}.desk-footnote p{font:15px / 1.8 var(--serif);max-width:65ch}.desk-footnote a{white-space:nowrap;font:12px var(--sans)}@media (width>=1000px){.drawing-board{z-index:3;position:sticky;top:16px}.design-output{align-self:stretch}.board-paper{padding-inline:32px}#design-map{max-width:min(100%,100vh - 255px)}}@media (width<=800px){.design-takeaways{padding-left:calc(var(--gutter) + 263px)}.design-desk{grid-template-columns:245px minmax(0,1fr);gap:18px}.desk-number{display:none}.board-bar{padding:10px}.board-state{display:none}.board-paper{padding:12px}.takeaway-bar{display:block}.takeaway-bar>div:last-child{justify-content:flex-start;margin-top:12px}.board-footer{gap:6px;padding:10px}.board-footer p{font-size:12px}}@media (width<=620px){.design-takeaways{padding-left:var(--gutter)}.workshop-head{padding-block:28px 24px}.workshop-head h1{max-width:330px;font-size:43px}.workshop-head .eyebrow{font-size:12px}.live-dot{margin-left:8px}.design-desk{flex-direction:column;gap:22px;padding-top:18px;display:flex}.design-controls{order:2;width:100%}.design-output{display:contents}.drawing-board{z-index:auto;width:100%;box-shadow:0 4px 12px var(--shadow);order:1;position:relative;top:auto}.board-paper{padding:8px 14px}.board-coordinate{display:none}#design-map{width:100%;max-width:280px;min-height:0}#design-map .sf-explorer-toolbar{background:0 0;border:0;padding:0;top:7px;right:7px}.board-edition{margin-top:4px;padding-top:5px;font-size:12px}.board-footer{padding:7px 10px}.board-footer p{font-size:12px}.board-bar{padding:7px}.renderer-switch button{padding:5px 9px;font-size:12px}#design-map .sf-explorer-hint{background:0 0;padding:3px 0;font-size:12px}.takeaway-bar{order:3;width:100%;padding:0}.export-note{order:4;margin:12px 0 18px}.design-code{order:5;width:100%;padding:18px}.state-inspector{order:6;width:100%;margin:18px 0 0}.palette-picker{grid-template-columns:repeat(3,1fr);min-height:160px}.color-grid{grid-template-columns:repeat(3,1fr)}.desk-footnote{padding-bottom:35px;display:block}.code-heading h2{font-size:25px}.state-inspector summary span{font-size:12px}.design-controls details:first-of-type summary{padding-top:0}}@media (prefers-reduced-motion:reduce){.palette-card,.toggle input,.toggle input:after{transition:none}}#design-map .sf-explorer-zoom{display:none}#design-map:has(.sf-explorer-feature-controls:not([hidden])) .sf-explorer-toolbar{justify-content:flex-end;padding-bottom:8px;position:static}.code-heading{flex-wrap:wrap;gap:16px}.code-language{font:12px var(--sans);color:var(--muted);gap:4px;margin-left:auto;display:grid}.code-language .dropdown{min-width:150px}@media (height<=700px){.drawing-board{position:relative;top:auto}}.playground-page{--radius:12px;--dropdown-radius:8px;--side:285px}.workshop-head{border-bottom:3px double var(--rule-strong);align-items:flex-end}.workshop-head h1{letter-spacing:-.03em}.workshop-head p:last-child{max-width:52ch;font-size:17px}.desk-coords{border:1px solid var(--rule-strong);border-radius:var(--radius,12px);background:var(--card);font:500 12px / 1.3 var(--mono);letter-spacing:.04em;color:var(--muted);text-align:right;white-space:nowrap;gap:4px;margin:0 0 8px;padding:12px 16px;display:grid}.desk-coords span{font:600 15px / 1.2 var(--serif);letter-spacing:0;color:var(--ink)}.design-controls{border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--card);--dropdown-font:400 14px var(--sans);--dropdown-radius:8px;padding:4px 20px}.design-controls details:last-child{border-bottom:0}.design-controls summary{font-size:15px}.design-controls summary span{background:color-mix(in srgb, var(--teal) 14%, transparent);width:24px;height:24px;font:600 12px var(--mono);border-radius:50%;place-items:center;display:inline-grid}.palette-card{border-radius:10px;padding:8px}.palette-swatches{border-radius:6px;height:26px}.palette-card strong{font-size:12px}.field{font-size:13px}.field input[type=text]{border-radius:8px;padding:10px 12px;font-size:14px}.control-note{font-size:12px}.toggle{padding:10px 0;font-size:14px}.toggle input{border-radius:20px;width:34px;height:20px}.toggle input:after{background:#fff;width:14px;height:14px;top:3px;left:3px}.toggle input:checked:after{transform:translate(14px)}.color-field{font-size:12px}.color-field input{border-radius:8px;overflow:hidden}.color-field code,.field output{font-size:12px}.drawing-board{border-radius:var(--radius);overflow:hidden}.board-bar{background:var(--paper-2)}.renderer-switch{background:color-mix(in srgb, var(--ink) 8%, transparent);border-radius:999px;padding:3px}.renderer-switch button{border-radius:999px;padding:7px 14px;font-size:13px}.board-state,.board-coordinate{font-size:12px}.board-paper{padding-bottom:14px}#design-map{margin-bottom:34px}.field-pair{grid-template-columns:minmax(0,1fr);gap:0}.board-edition{font-size:12px}#design-map .sf-explorer-toolbar button{border-radius:8px;font-size:12px}#design-map .sf-explorer-hint{font-size:12px}.board-footer p{font-size:13px}.history-actions button{border-radius:8px;padding:6px 12px;font-size:13px}.takeaway-bar p{font-size:22px}.takeaway-bar .eyebrow,.code-heading .eyebrow{font-size:12px}.export-note{font-size:13px}.design-code{border-radius:var(--radius);border-color:var(--rule-strong)}.design-code pre{background:var(--paper-2);border-radius:8px;padding:16px 18px;font-size:13px}.state-inspector{font-size:14px}.state-inspector p{font-size:13px}.inspector-row span:last-child{font-size:12px}.desk-footnote p{font-size:17px}.desk-footnote a{font-size:14px}@media (width>=621px){.design-takeaways{grid-template-columns:var(--side) minmax(0, 1fr);padding-left:var(--gutter);align-items:start;gap:0 32px;display:grid}.takeaway-bar{grid-column:1;gap:14px;padding:0 0 14px;display:grid}.takeaway-bar>div:last-child{flex-direction:column;justify-content:flex-start}.takeaway-bar .button{justify-content:center;width:100%}.export-note{grid-column:1}.design-code{grid-area:1/2/span 2}.state-inspector{grid-column:2}}@media (width<=800px){.playground-page{--side:245px}.board-footer p{font-size:12px}.design-controls{padding-inline:14px}}@media (width<=620px){.desk-coords{display:none}.board-footer p,.board-edition,.renderer-switch button,#design-map .sf-explorer-hint{font-size:12px}.design-controls{padding-inline:16px}.design-takeaways{padding-left:var(--gutter)}.code-heading>div,.code-language{min-width:0;max-width:100%}.code-language{flex:100%;margin-left:0}.code-language .dropdown{min-width:0}.takeaway-bar>div:last-child .button{flex:100%}.desk-footnote a{white-space:normal}}.color-grid{grid-template-columns:minmax(0,1fr);gap:0}.color-field{border-bottom:1px dotted var(--rule);cursor:pointer;grid-template-columns:26px minmax(0,1fr);gap:12px;padding:7px 0;font-size:14px}.color-field input{border:1px solid var(--rule-strong);appearance:none;background:0 0;border-radius:50%;width:26px;height:26px;overflow:hidden}.color-field input::-webkit-color-swatch-wrapper{padding:0}.color-field input::-webkit-color-swatch{border:0;border-radius:50%}.color-field input::-moz-color-swatch{border:0;border-radius:50%}.color-field>span{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.color-field code{margin:0;font-size:12px;display:inline}