@font-face{font-family:Space;src:url('SpaceGrotesk-Variable.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:Inter;src:url('InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--page:#f7f8fa;--surface:#fff;--ink:#252423;--muted:#6f6964;--line:#dcdde0;--accent:#81522f;--accent-deep:#472d1b;--accent-soft:#f3e9e0;--radius:18px;--corner:4.5px;--density:4;--control-height:calc(32px + var(--density)*1.5px);--row-height:calc(28px + var(--density)*1.5px);--ease:cubic-bezier(.2,.8,.2,1);--duration:220ms}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--page);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;line-break:strict}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0;background:none;padding:0}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1,h2{font-weight:650}h3{font-family:Space,Inter,sans-serif;font-weight:650}svg{display:block}::selection{background:var(--accent);color:#fff}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input{accent-color:var(--accent);caret-color:var(--accent)}.mono,code,pre,kbd,output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}.wrap{width:min(1328px,calc(100% - 80px));margin-inline:auto}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}.muted{color:var(--muted)}
.site-header{height:60px;display:flex;align-items:center;gap:60px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-family:Space,sans-serif;font-size:34px;line-height:1;font-weight:700;letter-spacing:-1.8px}.brand-mark{display:block;width:24px;height:28px;position:relative;transform:rotate(-6deg)}.brand-mark:before,.brand-mark:after{content:'';position:absolute;width:15px;height:18px;border-radius:9px 2px 9px 2px;background:var(--accent)}.brand-mark:before{left:0;top:0}.brand-mark:after{right:0;bottom:0;transform:rotate(180deg)}.site-header nav{display:flex;gap:32px;height:100%;align-items:center}.site-header nav a{height:100%;display:flex;align-items:center;position:relative;color:var(--muted)}.site-header nav a.current{color:var(--ink);font-weight:600}.site-header nav a.current:after{content:'';position:absolute;bottom:-1px;height:3px;left:0;right:0;background:var(--accent);border-radius:2px}.site-header nav a:hover{color:var(--accent)}.header-search{margin-left:auto;display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--muted)}.header-search:hover{background:var(--accent-soft);color:var(--accent)}kbd{font-size:11px;color:var(--muted);background:#eff0f2;line-height:1;padding:4px 5px;border-radius:4px}.prompt{color:var(--accent)}.icon-button{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);flex:none;transition:background var(--duration),border-radius var(--duration)}.icon-button:hover{background:var(--accent-soft);color:var(--accent)}
.theme-panel{background:var(--accent);color:#fff;display:grid;grid-template-columns:1.8fr .9fr .9fr .75fr 1.1fr;gap:25px;padding:16px 24px;border-radius:24px 6px 24px 6px;align-items:center;box-shadow:inset 0 1px 0 #ffffff26,0 3px 0 var(--accent-deep);transition:background var(--duration),box-shadow var(--duration)}.theme-heading{display:flex;align-items:center;gap:15px}.theme-heading h2{font-size:16px;letter-spacing:-.4px}.theme-heading p{font-size:11px;color:#ffffffc7;margin-top:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.shape-pad{width:106px;height:64px;flex:none;position:relative;background:#00000019;border:1px solid #ffffff35;border-radius:14px 3px 14px 3px;touch-action:none;cursor:crosshair}.pad-axis{position:absolute;background:#ffffff30;pointer-events:none}.pad-axis.horizontal{height:1px;width:calc(100% - 16px);left:8px;top:50%}.pad-axis.vertical{width:1px;height:calc(100% - 16px);left:50%;top:8px}.shape-pad:after{content:'';position:absolute;left:18%;right:18%;top:24%;bottom:24%;border:1px dashed #ffffff25;border-radius:5px;pointer-events:none}.shape-pad.dragging{border-color:#fff}.shape-pad.dragging #shape-handle{box-shadow:0 0 0 4px #ffffff22,0 2px 0 var(--accent-deep)}#shape-handle{position:absolute;z-index:1;width:28px;height:28px;border-radius:calc(var(--radius)*.6) 2px calc(var(--radius)*.6) 2px;background:#fff;box-shadow:0 2px 0 #00000025;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);cursor:grab;touch-action:none;transition:border-radius var(--duration)}#shape-handle:active{cursor:grabbing}#shape-handle>span{width:8px;height:8px;border:1px solid var(--accent);border-radius:3px 1px 3px 1px}
.control-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;font-size:13px}.control-label output{font-size:18px;font-weight:500}.control-label output span{font-size:11px;opacity:.75}.theme-fields{display:contents}#toggle-theme-details{display:none}.theme-control input[type=range]{appearance:none;-webkit-appearance:none;width:100%;display:block;height:6px;background:linear-gradient(to right,#fff 0 var(--fill),#ffffff40 var(--fill) 100%);border-radius:4px;cursor:ew-resize;margin:0}.theme-control input::-webkit-slider-thumb{appearance:none;width:18px;height:22px;border:2px solid #fff;border-radius:6px 2px 6px 2px;background:var(--accent);box-shadow:0 2px 0 var(--accent-deep)}.theme-control input::-moz-range-thumb{width:14px;height:18px;border:2px solid #fff;border-radius:6px 2px 6px 2px;background:var(--accent)}.theme-control input:focus-visible{outline-color:#fff;outline-offset:7px}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:#ffffffc7;margin-top:8px}.color-swatches{display:flex;gap:12px}.color-swatches button{width:25px;height:25px;border-radius:9px 2px 9px 2px;background:var(--swatch);border:1px solid #ffffff60;display:flex;align-items:center;justify-content:center}.color-swatches button .icon{opacity:0;width:14px;height:14px}.color-swatches button[aria-pressed=true]{outline:2px solid #fff;outline-offset:3px}.color-swatches button[aria-pressed=true] .icon{opacity:1}.color-control .control-label output{font-size:13px}.theme-presets{display:flex;background:#00000018;padding:3px;border-radius:10px 3px 10px 3px}.theme-presets button{flex:1;color:#ffffffd9;font-size:12px;padding:5px 9px;border-radius:8px 2px 8px 2px}.theme-presets button[aria-pressed=true]{background:#fff;color:var(--accent-deep);box-shadow:0 1px 2px #00000015}.theme-export{margin-top:8px;display:flex;justify-content:space-between;align-items:center}.theme-export>#export-theme{display:flex;align-items:center;gap:8px;font-size:12px;color:#fff}.theme-export .icon-button{height:24px;width:24px}.theme-panel .icon-button:hover{background:#ffffff24;color:#fff}.theme-panel :focus-visible{outline-color:#fff}.workbench{margin-top:20px}.wall-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.category-nav{display:flex;gap:5px;align-items:center}.category-nav button{padding:6px 15px;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);font-size:13px;color:var(--muted);transition:border-radius var(--duration),background var(--duration)}.category-nav button:hover{color:var(--accent)}.category-nav button.active{background:var(--ink);color:#fff}.catalog-link{display:flex;gap:9px;align-items:center;font-size:13px}.catalog-link:hover{color:var(--accent)}.wall-grid{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:28px}.wall-column{display:flex;flex-direction:column;gap:23px;min-width:0}.specimen{min-width:0}.specimen-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:8px}.specimen-head h3{font-size:20px;line-height:1.2;letter-spacing:-.65px}.specimen-caption{font-size:11px;color:var(--muted);white-space:nowrap}.button-matrix{padding:calc(15px + var(--density)*.75px);background:var(--accent-soft);border-radius:calc(var(--radius)*2) var(--corner) calc(var(--radius)*2) var(--corner);transition:border-radius var(--duration),background var(--duration)}.variant-label{font-size:11px;color:var(--muted);margin-bottom:5px}.variant-label:not(:first-child){margin-top:13px}.variant-row{display:flex;align-items:center;gap:9px}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--control-height);padding:0 14px;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);font-weight:600;font-size:13px;line-height:1;white-space:nowrap;transition:border-radius var(--duration) var(--ease),height var(--duration) var(--ease),background 140ms,box-shadow 140ms,transform 90ms}.ui-btn.primary{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px #ffffff25,inset 0 2px 0 #ffffff25,0 3px 0 var(--accent-deep);border:1px solid #00000015}.ui-btn.primary:hover{background:var(--accent-deep);box-shadow:inset 0 1px 0 #ffffff28,0 2px 0 var(--accent-deep)}.ui-btn.primary:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #00000018,0 1px 0 var(--accent-deep)}.ui-btn.secondary{background:#fff;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));color:var(--accent-deep);box-shadow:0 1px 0 #dcdde0}.ui-btn.secondary:hover{background:var(--accent-soft);border-color:var(--accent)}.ui-btn.secondary:active,.ui-btn.ghost:active,.ui-btn.icon-only:active{transform:translateY(1px)}.ui-btn.ghost{color:var(--accent-deep);padding:0 8px}.ui-btn.ghost:hover,.ui-btn.icon-only:hover{background:#ffffffb0}.ui-btn.icon-only{width:var(--control-height);padding:0;color:var(--accent-deep);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}.ui-btn[aria-pressed=true]{background:var(--accent);color:#fff}.ui-btn[aria-pressed=true] .icon{fill:currentColor}.ui-btn:disabled{background:#e6ddd5;color:#968879;border-color:transparent;box-shadow:none;font-weight:500}.ui-btn.secondary:disabled{background:#ffffff80;color:#998c82}.featured-button{flex:1;height:calc(var(--control-height) + 10px);font-size:15px;padding:0 20px}.variant-row>.ui-btn:disabled{font-size:12px;padding:0 11px}.ui-btn.primary:has(>.icon){padding-right:7px;gap:15px}.ui-btn.primary>.icon{width:26px;height:26px;padding:6px;background:#ffffff20;border:1px solid #ffffff35;border-radius:calc(var(--radius)*.6) 2px calc(var(--radius)*.6) 2px;box-shadow:0 1px 0 #00000013;transition:border-radius var(--duration)}.featured-button>.icon{margin-left:auto}.micro-components{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.avatar-stack{display:flex;padding-left:5px}.avatar{width:calc(29px + var(--density)*1px);height:calc(29px + var(--density)*1px);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);background:var(--accent-soft);border:2px solid var(--page);color:var(--accent-deep);font-family:Space,Inter,sans-serif;font-size:12px;font-weight:600;transition:border-radius var(--duration)}.avatar-stack .avatar{margin-left:-5px}.avatar-stack .avatar:nth-child(2){background:#e8d9ce}.avatar-stack .avatar:nth-child(3){background:#dac1ac}.demo-badge{color:var(--accent-deep);border:0;background:var(--accent-soft);padding:2px 6px;font:11px Space,sans-serif;border-radius:7px 2px 7px 2px}.compact-switch{display:flex;align-items:center;gap:7px;font-size:12px;margin-left:auto}.ui-switch{appearance:none;width:34px;height:20px;border:1px solid var(--line);background:#e6e4e1;border-radius:calc(var(--radius)*.5) 2px calc(var(--radius)*.5) 2px;position:relative;cursor:pointer;margin:0;flex:none;transition:background 180ms}.ui-switch:before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:calc(var(--radius)*.3) 1px calc(var(--radius)*.3) 1px;background:#fff;box-shadow:0 1px 1px #25242330;transition:transform 180ms var(--ease)}.ui-switch:checked{background:var(--accent);border-color:var(--accent-deep)}.ui-switch:checked:before{transform:translateX(14px)}.token-strip{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:15px;padding-top:10px;font-size:11px;color:var(--muted)}.token-strip output{margin-left:8px;color:var(--ink)}.mini-specimen{padding-top:4px}.form-demo{display:flex;flex-direction:column;gap:7px}.form-demo>label:not(.checkbox-label){font-size:12px;margin-top:2px}.ui-input{height:var(--control-height);min-width:0;width:100%;padding:0 12px;border:1px solid #cccac7;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);background:#fff;box-shadow:inset 0 1px 2px #25242306;font-size:13px;transition:border-radius var(--duration),height var(--duration),border-color 140ms}.ui-input:hover{border-color:#a79b90}.ui-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.ui-input[aria-invalid=true]{border-color:var(--accent-deep);border-style:dashed;background:color-mix(in srgb,var(--accent-soft) 20%,white)}.input-error{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--accent-deep)}.input-error b{font-size:10px;border:1px solid currentColor;border-radius:4px 1px 4px 1px;width:13px;height:13px;text-align:center;line-height:11px}.select-wrap{position:relative}.select-wrap select{appearance:none;padding-right:34px}.select-wrap>.icon{position:absolute;right:12px;top:calc(50% - 8px);pointer-events:none}.checkbox-label{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;cursor:pointer}.checkbox-label input,input[type=checkbox]:not(.ui-switch){appearance:none;width:15px;height:15px;flex:none;border:1px solid #b8afa7;border-radius:calc(var(--radius)*.3) 1px calc(var(--radius)*.3) 1px;background:#fff;position:relative;cursor:pointer;margin:0;transition:border-radius var(--duration)}.checkbox-label input:checked,input[type=checkbox]:not(.ui-switch):checked{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 1px 0 #ffffff45,0 1px 0 var(--accent-deep)}input[type=checkbox]:not(.ui-switch):checked:after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}input[type=checkbox]:indeterminate{background:var(--accent);border-color:var(--accent)}input[type=checkbox]:indeterminate:after{content:'';position:absolute;top:6px;left:3px;width:7px;height:1.5px;background:#fff}.table-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 15px}.table-top strong{font-size:13px;font-weight:600;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-filters{display:flex;gap:2px;background:#eeedef;padding:3px;border-radius:var(--radius) var(--corner) var(--radius) var(--corner)}.table-filters button{padding:4px 9px;border-radius:calc(var(--radius)*.7) 2px calc(var(--radius)*.7) 2px;color:var(--muted);font-size:11px;white-space:nowrap}.table-filters button.active{background:#fff;color:var(--accent-deep);box-shadow:0 1px 2px #25242312}.table-scroll{border:1px solid var(--line);border-radius:var(--radius) var(--corner) var(--radius) var(--corner);overflow:hidden;background:#fff;transition:border-radius var(--duration)}table{width:100%;border-collapse:collapse;table-layout:auto;font-size:12px}th{text-align:left;font-weight:500;color:var(--muted);background:#f0f1f3;height:33px;font-size:11px}td{height:var(--row-height);transition:height var(--duration);border-top:1px solid #ecebed}td,th{padding:0 10px}.check-cell{width:35px;padding-left:12px;padding-right:4px}.check-cell input{vertical-align:middle}.owner-cell{text-align:center;width:58px}.updated{text-align:right;color:var(--muted);white-space:nowrap;padding-right:12px;font-size:11px}.project-name{display:flex;align-items:center;gap:9px;text-align:left;font-size:13px;font-weight:500;white-space:nowrap}.project-name:hover{color:var(--accent)}.project-symbol{width:23px;height:23px;flex:none;background:var(--accent-soft);border:0;box-shadow:inset 0 0 0 1px #ffffff90;color:var(--muted);display:flex;align-items:center;justify-content:center;border-radius:7px 2px 7px 2px;font:11px Space,sans-serif;border-radius:calc(var(--radius)*.45) 2px calc(var(--radius)*.45) 2px}.owner-avatar{width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px 2px 7px 2px;background:#efe9e3;color:var(--accent-deep);font:10px Space,sans-serif}.state-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 5px;font-size:11px;white-space:nowrap;color:var(--accent-deep);border:0;border-radius:6px 2px 6px 2px}.state-pill .icon{width:11px;height:11px}.status-dot{width:4px;height:4px;display:inline-block;border-radius:50%;background:var(--accent)}.state-pill.done{color:var(--muted)}tr.selected{background:var(--accent-soft)}tr.selected .project-symbol{background:#fff;color:var(--accent-deep);box-shadow:inset 0 0 0 1px #ffffff90,0 1px 0 color-mix(in srgb,var(--accent) 25%,white)}tr.selected .state-pill{background:transparent}tr.selected .project-name{font-weight:600}.table-bottom{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding-top:10px}.table-bottom #table-count{color:var(--accent-deep)}.table-empty{text-align:center;padding:20px}.calendar{background:#fff;border:1px solid var(--line);border-radius:calc(var(--radius)*1.5) var(--corner) calc(var(--radius)*1.5) var(--corner);padding:14px;transition:border-radius var(--duration)}.calendar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.calendar-top strong{font-size:13px;font-weight:600}.calendar-top>div{display:flex}.calendar-top .icon-button{width:24px;height:24px}.calendar-week,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-week{color:var(--muted);font-size:10px;text-align:center;margin-bottom:7px}.calendar-days button{height:calc(25px + var(--density)*.65px);min-width:0;font:12px Space,Inter,sans-serif;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);transition:border-radius var(--duration),height var(--duration),background 140ms}.calendar-days button:hover{background:var(--accent-soft);color:var(--accent-deep)}.calendar-days button.outside{color:#7c746e}.calendar-days button.selected{color:#fff;background:var(--accent);box-shadow:0 1px 0 var(--accent-deep)}.calendar-days button.today{outline:1px solid var(--accent);outline-offset:-3px;font-weight:700;color:var(--accent)}.calendar-days button.selected.today{color:#fff}.calendar-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--accent-deep);text-align:center}.command-search{display:flex;align-items:center;gap:9px;height:var(--control-height);border:1px solid var(--line);border-radius:var(--radius) var(--corner) var(--radius) var(--corner);background:#fff;padding:0 12px;transition:border-radius var(--duration),height var(--duration)}.command-search>.icon{color:var(--muted)}.command-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:12px}.command-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.command-options{padding:5px 0}.command-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;height:calc(var(--row-height) - 4px);padding:0 10px;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);font-size:13px;transition:border-radius var(--duration),height var(--duration),background 140ms}.command-item>.icon{color:var(--muted);width:14px;height:14px}.command-item:hover,.command-item.highlighted{background:var(--accent-soft);color:var(--accent-deep)}.command-item kbd{margin-left:auto}.inline-toast{display:flex;align-items:center;gap:11px;padding:15px 12px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 18%,white);border-radius:var(--radius) var(--corner) var(--radius) var(--corner);color:var(--accent-deep);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 22%,white);transition:border-radius var(--duration),background var(--duration)}.result-mark{outline:1px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:3px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;background:var(--accent);color:#fff;border-radius:calc(var(--radius)*.5) 2px calc(var(--radius)*.5) 2px;box-shadow:0 1px 0 var(--accent-deep)}.inline-toast>div{min-width:0;flex:1}.inline-toast strong{font-size:12px;font-weight:600;display:block}.inline-toast>div>span{font-size:10px;color:var(--muted);display:block;margin-top:3px}.inline-toast>.icon-button{width:21px;height:24px}.text-link{display:inline-flex;gap:7px;align-items:center;color:var(--accent-deep);font-size:12px}.text-link:hover{text-decoration:underline;text-underline-offset:4px}.feedback-specimen{margin-top:1px}.feedback-specimen .specimen-head h3{font-size:18px}.tooltip-anchor{position:relative;display:inline-flex}.tooltip-anchor [role=tooltip]{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,3px);background:var(--ink);color:#fff;padding:7px 10px;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);font-size:11px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 130ms,transform 130ms;z-index:2}.tooltip-anchor:hover [role=tooltip],.tooltip-anchor:focus-within [role=tooltip]{opacity:1;visibility:visible;transform:translate(-50%,0)}.loading .icon{animation:spin 750ms linear infinite}.loading{cursor:wait!important}@keyframes spin{to{transform:rotate(360deg)}}
.quick-start{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}.start-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.start-heading h2{font-size:27px;line-height:1.3;letter-spacing:-.7px;margin-top:7px}.code-workspace{border:1px solid var(--line);border-radius:calc(var(--radius)*1.5) var(--corner) calc(var(--radius)*1.5) var(--corner);overflow:hidden;background:#fff;transition:border-radius var(--duration)}.code-toolbar{display:flex;align-items:center;padding:12px 18px;background:#f0f1f3;border-bottom:1px solid var(--line);gap:18px}.code-tabs{display:flex;gap:2px}.code-tabs button{padding:6px 13px;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);color:var(--muted);font-size:12px}.code-tabs button.active{background:var(--accent);color:#fff;box-shadow:0 1px 0 var(--accent-deep)}.code-file{margin-left:auto;font-size:11px;color:var(--muted)}.code-content{display:grid;grid-template-columns:1.45fr 1fr}pre{margin:0;padding:27px 30px;overflow:auto;font-size:12px;line-height:1.8;background:#252423;color:#e7dfd8;scrollbar-color:#6f6964 #252423}.token-string{color:#e1bb91}.token-keyword{color:#fff;font-weight:600}.code-preview{position:relative;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);padding:50px 35px;transition:background var(--duration)}.preview-label{position:absolute;left:24px;top:19px;font-size:11px;color:var(--accent-deep)}.preferences{width:min(290px,100%);background:#fff;border:1px solid var(--line);padding:26px;border-radius:calc(var(--radius)*1.6) var(--corner) calc(var(--radius)*1.6) var(--corner);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 16%,white);transition:border-radius var(--duration)}.preferences .avatar{width:42px;height:42px;border:0;margin-bottom:15px}.preferences>strong{font:600 18px Space,Inter,sans-serif;display:block}.preferences>p{font-size:12px;color:var(--muted);margin-top:7px;margin-bottom:25px}.switch-row{display:flex;align-items:center;justify-content:space-between;padding-block:11px;border-top:1px solid #ecebed;font-size:12px}.preferences>.ui-btn{margin-top:22px;width:100%}.preference-feedback{font-size:11px;color:var(--accent-deep);min-height:17px;margin-top:9px}.usage-section{display:flex;align-items:center;justify-content:space-between;border-block:1px solid var(--line);margin-top:42px;padding-block:27px;gap:30px}.usage-heading h2{font-family:Space,Inter,sans-serif;font-size:15px}.usage-heading p{font-size:11px;color:var(--muted);margin-top:6px}.usage-metrics{display:flex;gap:56px}.usage-metrics>div{display:flex;align-items:baseline;gap:12px}.usage-metrics strong{font-size:26px;font-weight:500;color:var(--accent-deep)}.usage-metrics span{font-size:11px;color:var(--muted)}.site-footer{display:flex;align-items:center;gap:30px;padding-block:27px}.site-footer .brand{font-size:27px}.site-footer .brand-mark{transform:scale(.8) rotate(-6deg);margin-right:-3px}.site-footer>span{color:var(--muted);font-size:11px}.site-footer>button{margin-left:auto;font-size:12px}.site-footer>button:hover{color:var(--accent)}
.toast{position:fixed;bottom:24px;right:30px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent-deep);box-shadow:0 3px 0 var(--accent-soft),0 8px 24px #25242314;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);padding:10px 10px 10px 17px;max-width:calc(100vw - 40px);z-index:20;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 180ms,visibility 180ms,transform 180ms}.toast.visible{opacity:1;visibility:visible;transform:none}.toast>span{font-size:12px}.ui-dialog{border:1px solid var(--line);border-radius:calc(var(--radius)*1.5) var(--corner) calc(var(--radius)*1.5) var(--corner);padding:0;max-width:min(520px,calc(100vw - 40px));width:520px;max-height:calc(100dvh - 64px);color:var(--ink);background:#fff;box-shadow:0 4px 0 var(--accent-soft),0 20px 100px #25242330;overflow:hidden}.ui-dialog::backdrop{background:#25242350}.ui-dialog[open]{display:flex;flex-direction:column}.ui-dialog>form{display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 64px)}.dialog-header{padding:23px 25px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);flex:none;background:var(--accent-soft)}.dialog-header h2{font-size:22px;line-height:1.3}.dialog-eyebrow{font:11px Space,sans-serif;color:var(--accent-deep);display:block;margin-bottom:6px}.dialog-body{padding:25px;overflow:auto;min-height:0}.dialog-body>label{display:block;font-size:12px;margin-bottom:8px}.dialog-body>label:not(:first-child){margin-top:20px}.dialog-body textarea{height:auto;min-height:95px;padding-block:12px;resize:vertical}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:17px 25px;border-top:1px solid var(--line);background:#f7f8fa;flex:none}.field-error{font-size:12px;min-height:18px;margin-top:7px;color:var(--accent-deep)}.command-dialog{width:620px;max-width:min(620px,calc(100vw - 40px))}.command-dialog .dialog-search{flex:none;height:62px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 22px;box-shadow:none}.dialog-search input{font-size:15px}.command-dialog .command-options{padding:12px;overflow:auto;max-height:450px;min-height:0}.command-group-label{padding:9px 10px 5px;font-size:11px;color:var(--muted)}.command-dialog .command-item{height:40px;font-size:13px}.command-kind{margin-left:auto;color:var(--muted);font-size:10px}.command-dialog .command-item kbd{margin-left:5px}.command-help{display:flex;gap:20px;padding:12px 22px;background:#f0f1f3;flex:none;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}.command-help kbd{margin-right:4px;border:1px solid var(--line);background:#fff}.empty-result{padding:25px 10px;color:var(--muted);font-size:12px}.catalog-dialog{width:760px;max-width:min(760px,calc(100vw - 40px))}.catalog-search{position:relative;margin-bottom:20px}.catalog-search>.icon{position:absolute;left:13px;top:calc(50% - 8px)}.catalog-search input{padding-left:38px}.catalog-group{margin-bottom:25px}.catalog-group h3{font-family:inherit;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:10px}.catalog-items{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.catalog-item{background:var(--page);border:1px solid var(--line);padding:11px;border-radius:var(--radius) var(--corner) var(--radius) var(--corner);text-align:left;font-size:13px}.catalog-item:hover{background:var(--accent-soft);border-color:var(--accent)}.catalog-item>span{display:block;color:var(--muted);font-size:11px;font-family:Space,Inter,sans-serif;margin-top:4px}.catalog-detail p{font-size:14px;line-height:1.75}.catalog-detail>code{display:block;background:var(--page);padding:13px;font-size:11px;margin-block:20px;overflow-wrap:anywhere}.catalog-detail>h3{font-size:24px;margin-bottom:15px}.info-links{display:flex;gap:10px;margin-top:25px}.project-detail{display:grid;grid-template-columns:80px 1fr;gap:17px 20px;font-size:13px;margin:0}.project-detail dt{color:var(--muted)}.project-detail dd{margin:0;overflow-wrap:anywhere}.wall-grid.filtered .wall-column:has(>article:not([hidden])){display:flex}.wall-grid.filtered .wall-column:not(:has(>article:not([hidden]))){display:none}.wall-grid.filtered{grid-template-columns:repeat(2,minmax(0,1fr));min-height:350px}
@media(min-width:1700px){.wrap{width:1440px}.wall-grid{grid-template-columns:1fr 1.7fr 1fr}}
@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.theme-panel{grid-template-columns:1.5fr 1fr 1fr .8fr;gap:20px}.theme-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.theme-presets{width:200px}.theme-export{margin:0;gap:20px}.wall-grid{grid-template-columns:1fr 1.6fr;gap:24px}.wall-column:nth-child(3){grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:24px}.site-header{gap:45px}.table-filters button{padding-inline:7px}.owner-cell{display:none}.usage-metrics{gap:28px}.usage-metrics>div{display:block}.usage-metrics span{display:block}}
@media(max-width:700px){:root{--control-height:calc(42px + var(--density)*.5px);--row-height:calc(39px + var(--density)*1px)}.wrap{width:calc(100% - 32px)}.site-header{height:64px;gap:24px}.brand{font-size:30px;gap:9px}.brand-mark{transform:scale(.85) rotate(-6deg);margin-right:-3px}.site-header nav{gap:18px}.site-header nav a{font-size:12px}.site-header nav a:nth-child(2){display:none}.header-search{padding:8px 5px;margin-left:auto}.header-search span,.header-search kbd{display:none}.header-search>.icon{width:19px;height:19px}.theme-panel{grid-template-columns:1fr 1fr;gap:14px 22px;padding:16px 20px;border-radius:22px 5px 22px 5px}.theme-heading{grid-column:1/-1;gap:16px}.theme-heading h2{font-size:16px}.theme-heading p{font-size:11px;margin-top:2px}.shape-pad{width:105px;height:70px}.theme-heading h2{font-size:16px}.control-label{margin-bottom:11px;font-size:12px}.control-label output{font-size:17px}.range-ends{font-size:10px;margin-top:11px}.color-control{grid-column:1/2;display:flex;gap:15px;align-items:center}.color-control .control-label{display:block;margin:0}.color-control .control-label>span{font-size:11px}.color-control .control-label output{display:none}.color-swatches{gap:9px}.color-swatches button{width:22px;height:22px}.theme-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px}.theme-fields{display:none}.theme-panel.details-open .theme-fields{display:contents}.theme-panel.details-open .theme-actions{flex-wrap:wrap}.theme-panel.details-open .color-control{grid-column:1/-1;justify-content:space-between}.theme-panel.details-open .color-control .control-label{display:flex;gap:14px}.theme-panel.details-open .color-control .control-label output{display:block}.theme-actions .theme-presets{min-width:132px}.theme-actions .theme-export{margin:0;gap:9px}#toggle-theme-details{display:flex;align-items:center;gap:3px;font-size:10px;white-space:nowrap;height:32px}#toggle-theme-details .icon{width:12px;height:12px}.theme-panel.details-open #toggle-theme-details .icon{transform:rotate(180deg)}.theme-presets{width:auto}.theme-presets button{font-size:10px;padding:4px 5px}.theme-export{margin-top:8px;gap:8px}.theme-export>#export-theme{font-size:10px;gap:5px;white-space:nowrap}.theme-export>#export-theme .icon{width:13px;height:13px}.theme-export .icon-button{width:18px;height:18px}.workbench{margin-top:20px}.wall-toolbar{margin-bottom:16px;gap:10px}.category-nav{gap:0}.category-nav button{font-size:12px;padding:6px 10px}.catalog-link{font-size:10px;gap:3px;white-space:nowrap}.catalog-link .icon{width:12px;height:12px}.wall-grid,.wall-grid.filtered{display:flex;flex-direction:column;gap:30px}.wall-column,.wall-column:nth-child(3){display:contents}.specimen-head h3{font-size:21px}.specimen-caption{font-size:11px}.button-matrix{padding:23px}.variant-label{font-size:12px}.variant-label:not(:first-child){margin-top:19px}.featured-button{font-size:17px}.ui-btn{font-size:14px}.variant-row>.ui-btn:disabled{font-size:12px}.form-demo{gap:9px}.form-demo>label:not(.checkbox-label){font-size:13px;margin-top:7px}.ui-input{font-size:14px;padding-inline:14px}.input-error{font-size:12px}.checkbox-label{font-size:13px;margin-top:11px}.checkbox-label input,input[type=checkbox]:not(.ui-switch){width:17px;height:17px}.checkbox-label input:checked:after,input[type=checkbox]:not(.ui-switch):checked:after{left:5px;top:2px}.table-top{gap:7px}.table-top strong{font-size:12px}.table-filters button{font-size:11px;padding:5px 7px}.table-scroll{overflow-x:auto}.table-scroll table{min-width:345px}.owner-cell{display:none}.updated{font-size:10px;padding-right:10px}.project-name{font-size:12px;gap:6px}.project-symbol{width:20px;height:22px}.state-pill{font-size:10px;padding:2px 4px}.table-bottom{font-size:10px}.command-specimen{order:6}.calendar-specimen{order:5}.mini-specimen{order:7}.feedback-specimen{order:8}.calendar{padding:14px}.calendar-top{margin-bottom:18px}.calendar-top strong{font-size:15px}.calendar-top .icon-button{width:32px;height:32px}.calendar-week{font-size:12px;margin-bottom:10px}.calendar-days button{height:max(44px,calc(34px + var(--density)*1px));font-size:14px}.calendar-foot{font-size:12px;padding-top:13px;margin-top:18px}.micro-components{padding:10px 0}.avatar{width:40px;height:40px;font-size:13px}.demo-badge{font-size:12px}.compact-switch{font-size:13px;min-height:44px}.ui-switch{width:38px;height:24px}.ui-switch:before{width:18px;height:18px}.ui-switch:checked:before{transform:translateX(14px)}.token-strip{font-size:12px}.command-search input{font-size:13px}.command-item{font-size:13px;padding-inline:12px}.inline-toast{padding:17px 14px}.inline-toast strong{font-size:13px}.inline-toast>div>span{font-size:11px}.quick-start{margin-top:45px;padding-top:24px}.start-heading{align-items:flex-end;gap:20px}.start-heading h2{font-size:24px;max-width:270px}.start-heading .text-link{font-size:11px;white-space:nowrap}.code-toolbar{padding:9px 10px;gap:7px}.code-tabs button{font-size:11px;padding:6px 9px}.code-file{font-size:9px}.code-content{display:flex;flex-direction:column}pre{padding:24px 18px;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.code-preview{padding:55px 22px 30px}.preferences{width:100%;max-width:280px;padding:25px}.preferences>strong{font-size:19px}.preferences>p,.switch-row{font-size:13px}.usage-section{display:block;margin-top:30px;padding-block:23px}.usage-heading h2{font-size:16px}.usage-heading p{font-size:11px}.usage-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:23px}.usage-metrics strong{font-size:26px}.usage-metrics span{font-size:10px;margin-top:4px}.site-footer{flex-wrap:wrap;gap:18px;padding-block:24px}.site-footer .brand{font-size:27px}.site-footer>span:nth-child(2){flex:1;font-size:10px}.site-footer>button{margin-left:0;font-size:11px}.site-footer>span:last-child{margin-left:auto}.ui-dialog{max-height:calc(100dvh - 32px);max-width:calc(100vw - 24px)}.ui-dialog>form{max-height:calc(100dvh - 32px)}.dialog-header{padding:20px}.dialog-header h2{font-size:21px}.dialog-body{padding:21px}.dialog-body>label{font-size:13px}.dialog-footer{padding:16px 20px}.dialog-footer .ui-btn{font-size:13px}.catalog-items{grid-template-columns:repeat(2,1fr)}.catalog-item{font-size:12px}.catalog-item>span{font-size:10px}.command-dialog .command-options{max-height:calc(100dvh - 180px)}.command-dialog .command-item{font-size:13px;height:44px}.command-help{font-size:10px;gap:12px;padding:12px 18px}.toast{bottom:16px;left:16px;right:16px;max-width:none;padding-left:13px}.toast>span{font-size:12px}.toast>.icon-button{margin-left:auto}}
@media(max-width:370px){.wrap{width:calc(100% - 24px)}.site-header{gap:18px}.site-header nav{gap:13px}.category-nav button{padding-inline:8px}.theme-panel{padding-inline:16px;gap:16px}.theme-heading p{font-size:10px}.button-matrix{padding:18px}.featured-button{padding-inline:14px}.table-top strong{max-width:115px}.usage-metrics span{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}

/* The component and its source stay in the same context. */
.specimen-head-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.source-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:48px;height:24px;font-size:11px;color:var(--muted);border-radius:var(--radius) var(--corner) var(--radius) var(--corner)}.source-toggle .icon{width:13px;height:13px}.source-toggle:hover{color:var(--accent-deep);background:var(--accent-soft)}.source-toggle[aria-expanded=true]{color:var(--accent-deep);background:var(--accent-soft)}.local-code{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius) var(--corner) var(--radius) var(--corner);overflow:hidden}.local-code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;background:#f0f1f3;border-bottom:1px solid var(--line)}.local-code-toolbar .mono{font-size:10px;color:var(--muted)}.local-copy{display:flex;align-items:center;gap:5px;min-height:28px;font-size:11px;color:var(--accent-deep)}.local-copy .icon{width:13px;height:13px}.local-code pre{padding:15px 13px;font-size:11px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.local-api{border-top:1px solid var(--line);padding:12px 13px}.local-api summary{cursor:pointer;color:var(--accent-deep);font-size:11px;width:max-content}.local-api dl{margin:12px 0 0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;font-size:11px}.local-api dt{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.local-api dd{margin:0;color:var(--muted)}
@media(max-width:700px){.specimen-head-actions{gap:7px}.source-toggle{height:36px;min-width:54px;font-size:12px}.source-toggle .icon{width:14px;height:14px}.local-code pre{font-size:13px;padding:18px 15px}.local-code-toolbar .mono,.local-copy,.local-api summary{font-size:12px}.local-copy{min-height:36px}.local-api dl{font-size:12px}.theme-actions{gap:8px}.theme-actions .theme-presets{min-width:122px}.theme-actions .theme-export{gap:7px}.theme-actions .theme-export .icon-button{width:24px;height:32px}}
@media(max-width:370px){.theme-actions{flex-wrap:wrap}.theme-actions .theme-presets{flex:1}.theme-actions .theme-export{width:100%;justify-content:space-between}.theme-heading{gap:12px}.shape-pad{width:92px}}

/* Refinement: make the shaping surface and each selected atom carry the edge. */
.theme-panel{padding-block:12px}.shape-pad{width:180px;height:80px;border-radius:18px 3px 18px 3px}.theme-heading{gap:14px}.shape-pad:after{left:24%;right:24%;top:30%;bottom:32%}.pad-axis.horizontal{top:30%}.pad-axis.vertical{left:24%}.shape-trace-x,.shape-trace-y{position:absolute;background:#ffffffad;pointer-events:none;z-index:1}.shape-trace-x{left:24%;top:30%;height:2px;width:calc(var(--shape-x) - 24%)}.shape-trace-y{left:var(--shape-x);top:30%;width:2px;height:calc(var(--shape-y) - 30%)}#shape-handle{width:74px;height:var(--control-height);border-radius:var(--radius) var(--corner) var(--radius) var(--corner);box-shadow:inset 0 2px 0 #fff,0 3px 0 #00000036;gap:10px;color:var(--accent-deep);font-size:11px;font-weight:650;border:1px solid #ffffff80}#shape-handle>.handle-label{width:auto;height:auto;border:0;border-radius:0}#shape-handle>.handle-face{width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--accent) 30%,white);background:var(--accent-soft);border-radius:calc(var(--radius)*.45) 1px calc(var(--radius)*.45) 1px;font:13px ui-monospace,monospace}.shape-pad.dragging #shape-handle{box-shadow:0 0 0 4px #ffffff22,0 1px 0 var(--accent-deep)}.theme-heading p,.range-ends{color:#ffffffe6}
.ui-input{box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--accent-soft) 70%,white)}.ui-input:focus{box-shadow:inset 0 -2px 0 var(--accent-soft),0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}input[type=checkbox]:not(.ui-switch):checked{box-shadow:inset 0 2px 0 #ffffff40,0 2px 0 var(--accent-deep)}.ui-switch:checked{box-shadow:inset 0 1px 0 #ffffff30,0 2px 0 var(--accent-deep)}.calendar-days button.selected{box-shadow:inset 0 2px 0 #ffffff30,0 3px 0 var(--accent-deep)}tr.selected{background:transparent}tr.selected td{background:var(--accent-soft);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--accent) 12%,white)}tr.selected td:first-child{border-top-left-radius:calc(var(--radius)*.7);border-bottom-left-radius:var(--corner)}tr.selected td:last-child{border-top-right-radius:var(--corner);border-bottom-right-radius:calc(var(--radius)*.7)}
.local-code{margin-top:0}.local-code pre{font-size:12px;white-space:pre;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#918278 #252423}.complete-source{border-top:1px solid var(--line)}.complete-source>summary{padding:12px 13px;cursor:pointer;color:var(--accent-deep);font-size:11px}.complete-source>summary .mono{float:right;color:var(--muted);font-size:10px}.complete-toolbar{display:flex;justify-content:flex-end;padding:5px 13px;background:#f0f1f3}.local-api+.complete-source{border-top:1px solid var(--line)}.site-footer{gap:28px}.site-footer>button{margin-left:auto}.site-footer>span{color:var(--muted);font-size:11px}
@media(max-width:1100px){.theme-panel{grid-template-columns:1.65fr 1fr 1fr .8fr;gap:16px}.shape-pad{width:116px}#shape-handle{width:52px;gap:5px;font-size:10px}#shape-handle>.handle-face{width:12px;height:14px}.theme-heading{gap:10px}}
@media(max-width:700px){.theme-panel{padding-block:16px;grid-template-columns:1fr 1fr;gap:14px 22px}.shape-pad{width:115px;height:70px}#shape-handle{width:45px;height:calc(28px + var(--density)*.5px)}#shape-handle>.handle-label{display:none}#shape-handle>.handle-face{width:15px;height:15px}.theme-heading{gap:16px}.theme-heading p{font-size:11px}.local-code pre{font-size:13px}.complete-source>summary{padding:14px 15px;font-size:12px}.complete-source>summary .mono{font-size:11px}.site-footer>button{margin-left:auto}.site-footer>span:last-child{margin-left:0}}
@media(max-width:370px){.theme-panel{gap:14px}.shape-pad{width:92px}.theme-heading{gap:12px}.theme-heading p{font-size:10px}}

/* Component-first entrance: install is a working action in the nav, never a hero. */
.header-tools{display:flex;align-items:center;gap:22px;margin-left:auto}.header-tools .header-search{margin-left:0}.install-action{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;font-size:12px;color:var(--ink);border-radius:var(--radius) var(--corner) var(--radius) var(--corner)}.install-action>.prompt{color:var(--accent);font:15px ui-monospace,SFMono-Regular,monospace}.install-action>code{font-size:12px}.install-action>.icon{width:15px;height:15px;color:var(--muted)}.install-action:hover{background:var(--accent-soft)}.install-action:hover>.icon{color:var(--accent)}.theme-panel{margin-top:22px}.wall-tools{display:flex;align-items:center;gap:24px}.workbench-meta{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--muted)}
@media(max-width:1100px){.site-header{gap:28px}.site-header nav{gap:24px}.header-tools{gap:12px}.header-search kbd{display:none}.install-action{gap:8px;padding-inline:6px}}
@media(max-width:700px){.site-header{height:108px;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:64px 38px;gap:0 24px;align-items:center;padding-bottom:6px}.site-header .brand{grid-column:1;grid-row:1}.site-header nav{grid-column:2;grid-row:1;gap:18px}.header-tools{display:contents}.header-search{grid-column:3;grid-row:1;margin:0;padding:6px}.install-action{grid-column:1/-1;grid-row:2;width:100%;justify-content:flex-start;padding:0 9px;background:#fff;border:1px solid var(--line);border-radius:12px 3px 12px 3px;min-height:36px}.install-action>code{font-size:11px}.install-action>.icon{margin-left:auto;width:16px;height:16px}.theme-panel{margin-top:20px}.wall-tools{gap:0}.workbench-meta{display:none}.site-footer{align-items:center}.site-footer .brand{font-size:28px}}
@media(max-width:370px){.site-header{gap:0 16px}.site-header nav{gap:13px}}

/* Final review: the object is the handle; source retains authored line breaks. */
.theme-heading p{margin-top:0;max-width:116px;line-height:1.7}.shape-pad{width:208px}.shape-pad:after{left:28%;right:28%;top:32%;bottom:34%}.pad-axis.horizontal{top:32%}.pad-axis.vertical{left:28%}.shape-trace-x{left:28%;top:32%;width:calc(var(--shape-x) - 28%)}.shape-trace-y{top:32%;height:calc(var(--shape-y) - 32%)}#shape-handle{width:100px;height:calc(var(--control-height) + 4px);font-size:13px;justify-content:space-between;padding:0 13px}#shape-handle>.handle-face{width:21px;height:21px;font-size:16px}.control-label output span{margin-left:2px}.combined-source{min-width:0;background:#252423}.combined-source pre{white-space:pre;overflow-wrap:normal;overflow-x:auto}.combined-source>.complete-source{background:#fff}.combined-source .complete-source summary{font-size:12px;padding:14px 22px}.code-file{font-size:10px}
@media(max-width:1100px) and (min-width:701px){.theme-heading{display:grid;gap:5px}.theme-heading p{max-width:none;font-size:10px}.shape-pad{width:148px;height:72px}#shape-handle{width:76px;height:calc(var(--control-height) + 2px);font-size:11px;padding-inline:10px}#shape-handle>.handle-face{width:17px;height:17px;font-size:13px}}
@media(max-width:700px){.shape-pad{width:142px;height:70px}#shape-handle{width:70px;height:var(--control-height);gap:5px;font-size:11px;padding-inline:9px}#shape-handle>.handle-label{display:inline;width:auto;height:auto}#shape-handle>.handle-face{width:16px;height:17px;font-size:13px}.theme-heading{gap:14px}.theme-heading p{max-width:135px}.code-preview{order:-1;border-bottom:1px solid var(--line);padding-top:48px}.combined-source pre{font-size:13px;white-space:pre;overflow-wrap:normal;padding:24px 18px}.code-file{font-size:9px}.combined-source .complete-source summary{padding:15px 18px}.combined-source .complete-source summary .mono{font-size:9px}.usage-section[hidden]{display:none}}
@media(max-width:370px){.shape-pad{width:132px}.theme-heading{gap:12px}.theme-heading p{max-width:115px;font-size:10px}.code-file{font-size:8px}}