.about-prose{max-width:720px;margin-top:20px}.ghost-chip{font-family:var(--mono);color:var(--ink-3);border:1px solid var(--rule-2);white-space:nowrap;border-radius:4px;align-items:center;gap:5px;padding:4px 10px;font-size:11px;display:inline-flex}.ghost-chip:hover{color:var(--ink);border-color:var(--ink-3)}.ghost-chip .icon,.devices button .icon{flex:none;width:13px;height:13px}.ghost-chip[data-noop]{color:var(--ink-3);border-style:dashed}.ghost-chip[data-noop]:hover{color:var(--ink-2);border-color:var(--ink-3)}.ghost-chip[data-busy]{opacity:.6;cursor:progress}.ghost-chip[aria-pressed=true]{color:var(--ink);border-color:var(--ink-3);background:var(--surface-tint)}.ghost-chip.is-pulsing{animation:.45s cubic-bezier(.2,.8,.2,1) chip-pulse}@keyframes chip-pulse{0%{border-color:var(--ink-3);background:var(--surface-tint);color:var(--ink)}60%{border-color:var(--ink-3);background:var(--surface-tint);color:var(--ink)}to{border-color:var(--rule-2);background:0 0}}@media (prefers-reduced-motion:reduce){.ghost-chip.is-pulsing{border-color:var(--ink-3);background:var(--surface-tint);color:var(--ink);animation:none}}.studio{z-index:1;flex-direction:column;height:calc(100dvh - 44px);padding:12px 16px 16px;display:flex;position:relative}.studio-inner,.studio-card{background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--radius-lg);max-width:none;min-height:0;margin:0;overflow:hidden;box-shadow:0 30px 80px #00000073}.studio-inner{grid-template-columns:minmax(0,var(--split,50%))8px minmax(0,1fr);flex:1;grid-template-rows:minmax(0,1fr);min-height:0;display:grid}.studio-card{flex-direction:column;flex:none;display:flex}.studio-inner>.pane{border:0;min-width:0;min-height:0}.pane{flex-direction:column;min-width:0;display:flex}.pane-header{background:var(--bg-1);border-bottom:1px solid var(--rule);height:32px;font-family:var(--mono);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;justify-content:space-between;align-items:center;padding:6px 12px;font-size:11px;display:flex}.pane-tools{align-items:center;gap:6px;display:flex}.pane-tools-wrap{flex:none;align-items:center;gap:8px;display:flex}.pane-header>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;overflow:hidden}.pane-hint{font-family:var(--mono);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;font-size:10px}.pane-fullscreen-btn{letter-spacing:0;min-width:24px;min-height:24px;padding:3px 8px;font-size:13px;line-height:1}.pane.pane-fullscreen{z-index:60;background:var(--bg);border-radius:0;position:fixed;inset:0}body.is-fullscreen .s-nav,body.is-fullscreen .site-footer{display:none}.divider{background:var(--bg-1);border-inline-start:1px solid var(--rule);border-inline-end:1px solid var(--rule);cursor:col-resize;justify-content:center;align-items:center;transition:background .15s;display:flex;position:relative}.divider:hover,.divider:active{background:var(--surface-tint)}body.is-dragging-split{cursor:col-resize;-webkit-user-select:none;user-select:none}body.is-dragging-split iframe{pointer-events:none}.divider-grip{flex-direction:column;gap:3px;display:flex}.divider-grip span{background:var(--ink-4);border-radius:999px;width:2px;height:2px}.divider:hover .divider-grip span{background:var(--ink)}.studio-tabs{gap:4px;padding:0 0 8px;display:none}.studio-tab{min-height:44px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--radius);flex:1;padding:10px 14px;font-size:13px}.studio-tab.is-active{color:var(--bg);background:var(--ink);border-color:var(--ink)}.devices{gap:2px;display:flex}.devices button{color:var(--ink-3);font-family:var(--mono);text-transform:lowercase;white-space:nowrap;border:1px solid #0000;border-radius:4px;align-items:center;gap:4px;padding:3px 10px;font-size:11px;display:inline-flex}.devices button:hover{color:var(--ink)}.devices button.active{color:var(--bg);background:var(--ink);border-color:var(--ink)}.preview-stage{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.preview-empty{z-index:2;text-align:center;background:var(--bg-3);color:var(--ink-3);font-family:var(--mono);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;font-size:12px;line-height:1.5;display:flex;position:absolute;inset:0}.preview-empty-title{color:var(--ink-2);font-size:13px}.preview-empty p{max-width:38ch;margin:0}.preview-empty-btn{border:1px solid var(--rule-2);border-radius:var(--radius);min-height:44px;color:var(--ink);font-family:var(--mono);align-items:center;gap:6px;margin-top:4px;padding:0 16px;font-size:12px;display:inline-flex}.preview-empty-btn:hover{border-color:var(--ink-3);background:var(--surface-tint)}.preview-empty-btn .icon{width:14px;height:14px}.preview-wrap{background:var(--bg-3);flex:1;justify-content:center;align-items:stretch;min-height:0;display:flex;position:relative;overflow:auto}.preview-wrap.desktop{padding:0}.preview-wrap.tablet,.preview-wrap.phone{align-items:center;padding:20px}.preview-wrap.custom{justify-content:center;align-items:stretch;padding:20px 24px;position:relative}.preview-wrap.custom.is-dragging{-webkit-user-select:none;user-select:none;cursor:col-resize}.preview-wrap.custom.is-dragging iframe{pointer-events:none}.custom-stage{border:1px solid var(--rule-2);background:#fff;border-radius:4px;flex-shrink:0;height:100%;position:relative;overflow:hidden}.custom-stage>iframe{background:#fff;border:0;width:100%;height:100%;display:block}.custom-handle{top:0;cursor:col-resize;z-index:4;justify-content:center;align-items:center;width:14px;height:100%;display:flex;position:absolute;inset-inline-end:-10px}.custom-handle:hover .custom-handle-grip,.preview-wrap.custom.is-dragging .custom-handle-grip{background:var(--ink)}.custom-handle-grip{background:var(--ink-3);border-radius:2px;width:3px;height:36px;transition:background .12s}.custom-readout{top:8px;z-index:5;font-family:var(--mono);color:var(--ink-3);align-items:center;gap:4px;font-size:11px;display:inline-flex;position:absolute;inset-inline-end:24px}.custom-readout input{width:5.5ch;font:inherit;color:var(--ink);background:var(--bg-1);border:1px solid var(--rule-2);text-align:end;appearance:textfield;border-radius:4px;padding:2px 4px}.custom-handle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.custom-handle:focus-visible .custom-handle-grip{background:var(--ink)}.custom-label{font-family:var(--mono);color:var(--ink);background:var(--bg-1);border:1px solid var(--rule-2);border-radius:var(--radius);pointer-events:none;z-index:5;padding:4px 10px;font-size:11px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.preview-frame-desktop{background:#fff;border:0;width:100%;height:100%;display:block}.device{background:#000;border-radius:36px;flex-shrink:0;padding:10px;position:relative;box-shadow:0 30px 80px #00000073}.device.phone{width:390px;height:780px;max-height:100%}.device.tablet{border-radius:22px;width:820px;height:620px;max-height:100%;padding:14px}.device .notch{z-index:2;background:#000;border-radius:999px;width:100px;height:22px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.device.tablet .notch{display:none}.device iframe{background:#fff;border:0;border-radius:26px;width:100%;height:100%;display:block}.device.tablet iframe{border-radius:10px}.lib-picker{display:inline-block;position:relative}.lib-menu{top:calc(100% + 4px);z-index:40;background:var(--bg-2);border:1px solid var(--rule-2);border-radius:var(--radius);width:280px;max-height:380px;padding:6px;position:absolute;inset-inline-start:0;overflow:auto;box-shadow:0 16px 40px #00000073}.lib-group+.lib-group{border-top:1px solid var(--rule);margin-top:4px;padding-top:6px}.lib-group-label{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:6px 10px 4px;font-size:10px}.lib-item{border-radius:var(--radius);text-align:start;width:100%;color:var(--ink);cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:stretch;padding:8px 10px;display:flex}.lib-item:hover,.lib-item:focus-visible{background:var(--surface-tint);outline:none}.lib-item-name{font-family:var(--mono);color:var(--ink);font-size:12px}.lib-item-desc{font-family:var(--mono);color:var(--ink-3);margin-top:2px;font-size:11px}.drop-zone{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.drop-zone-overlay{z-index:5;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:2px dashed var(--ink-2);border-radius:var(--radius);background:#0000008c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.drop-zone-label{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--bg-2);border:1px solid var(--rule-2);border-radius:var(--radius);padding:12px 18px;font-size:13px}.console-panel{border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg-2);font-family:var(--mono);margin:12px 16px 0;font-size:12px;overflow:hidden}.console-toggle{width:100%;color:var(--ink-2);background:var(--bg-1);text-align:start;cursor:pointer;border:0;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.console-toggle:hover{color:var(--ink)}.console-toggle-label{letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:8px;font-size:11px;display:inline-flex}.console-count{color:var(--ink-3);font-weight:400}.console-badge{border-radius:999px;justify-content:center;align-items:center;min-width:20px;height:18px;padding:0 6px;font-size:10px;font-weight:600;display:inline-flex}.console-badge-error{color:#d76b6b;background:#dc505029}.console-badge-warn{color:#c9a463;background:#dcaa5029}.console-toggle-caret{color:var(--ink-3)}.console-body{flex-direction:column;max-height:220px;display:flex}.console-preserve{font-family:var(--mono);color:var(--ink-3);cursor:pointer;align-items:center;gap:6px;margin-inline-start:8px;font-size:11px;display:inline-flex}.console-tools{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);justify-content:flex-end;padding:6px 10px;display:flex}.console-list{flex:1;min-height:0;overflow:auto}.console-empty{color:var(--ink-3);padding:18px 14px;font-size:12px;line-height:1.5}.console-row{border-bottom:1px solid var(--rule);grid-template-columns:64px 60px 1fr;align-items:start;gap:10px;padding:6px 14px;display:grid}.console-row:last-child{border-bottom:0}.console-time{color:var(--ink-4);padding-top:1px;font-size:11px}.console-level{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding-top:2px;font-size:10px}.console-error .console-level{color:#d76b6b}.console-warn .console-level{color:#c9a463}.console-info .console-level{color:#6ba3c4}.console-debug .console-level{color:var(--ink-4)}.console-args{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);font-family:var(--mono);margin:0;font-size:12px;line-height:1.5}.console-error .console-args{color:#e8a3a3}.console-warn .console-args{color:#d6bc88}.section{border-top:1px solid var(--rule);z-index:1;padding:80px 28px;position:relative}.section-inner{max-width:var(--maxw);margin:0 auto}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px;display:flex}.section-eyebrow{font-family:var(--mono);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:10px;margin-bottom:14px;font-size:12px;display:inline-flex}.section-eyebrow .dot{background:var(--ink);border-radius:999px;width:7px;height:7px}.section-title{font-family:var(--mono);letter-spacing:-.02em;color:var(--ink);max-width:720px;margin:0;font-size:clamp(28px,3.4vw,42px);font-weight:600;line-height:1.05}.section-title em{font-family:var(--serif);color:var(--ink);font-style:italic;font-weight:400}.section-desc{font-family:var(--mono);color:var(--ink-3);max-width:560px;margin:12px 0 0;font-size:14px}.toast{background:var(--bg-1);border:1px solid var(--rule-2);border-radius:var(--radius);font-family:var(--mono);color:var(--ink);z-index:80;align-items:center;gap:10px;padding:10px 16px;font-size:12px;animation:.26s cubic-bezier(.2,.8,.2,1) toastIn;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 20px 40px #00000080}.toast .dot{background:var(--ok);border-radius:999px;width:7px;height:7px}.toast-action{font-family:var(--mono);color:var(--ink);background:var(--surface-tint);border:1px solid var(--rule-strong);cursor:pointer;letter-spacing:.04em;border-radius:4px;margin-inline-start:4px;padding:3px 9px;font-size:11px;font-weight:500}.toast-action:hover{background:#ffffff1f}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}body:has(.consent) .toast{bottom:72px}@media (max-width:520px){body:has(.consent) .toast{bottom:92px}}.modal-backdrop{z-index:90;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000a6;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:var(--bg-2);border:1px solid var(--rule-2);border-radius:var(--radius-lg);width:480px;max-width:100%;overflow:hidden}.modal-head{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.modal-title{font-family:var(--mono);color:var(--ink);font-size:14px;font-weight:600}.modal-body{padding:18px}.modal-body .label{font-family:var(--mono);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;font-size:10px}.url-field{background:var(--bg);border:1px solid var(--rule-2);border-radius:var(--radius);font-family:var(--mono);color:var(--ink);word-break:break-all;align-items:center;gap:8px;padding:10px 12px;font-size:12px;display:flex}.url-field .prot{color:var(--ink-3)}.url-field-text{text-overflow:ellipsis;flex:1;overflow:hidden}.share-warning{font-family:var(--mono);color:var(--ink-2);background:var(--surface-tint);border-inline-start:2px solid var(--ink-3);border-radius:var(--radius);border-start-start-radius:0;border-end-start-radius:0;margin:12px 0 0;padding:10px 12px;font-size:12px;line-height:1.5}.share-buttons{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;display:grid}.share-btn{border:1px solid var(--rule-2);border-radius:var(--radius);font-family:var(--mono);color:var(--ink-2);text-align:center;letter-spacing:.04em;padding:10px;font-size:11px}.share-btn:hover{border-color:var(--ink);color:var(--ink)}.editor-slot{width:100%;height:100%;position:relative;overflow:hidden}.editor-skeleton{font-family:var(--mono);color:var(--ink-2);white-space:pre;pointer-events:none;-webkit-user-select:none;user-select:none;contain:paint;background:0 0;margin:0;padding:6px 12px 6px 60px;font-size:13px;line-height:20px;position:absolute;inset:0;overflow:hidden}.cm-editor{height:100%;font-family:var(--mono);font-size:13px;background:0 0!important}.cm-editor.cm-focused{box-shadow:inset 0 0 0 1px var(--rule-strong)}.cm-editor .cm-panels{background:var(--bg-1);color:var(--ink-2);border-color:var(--rule);font-family:var(--mono);font-size:11px}.cm-editor .cm-panels.cm-panels-bottom{border-top:1px solid var(--rule)}.cm-editor .cm-panel.cm-search{flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 10px;display:flex}.cm-editor .cm-panel.cm-search br{display:none}.cm-editor .cm-panel.cm-search input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--rule-2);border-radius:4px;min-width:12ch;padding:3px 6px}.cm-editor .cm-panel.cm-search input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.cm-editor .cm-panel.cm-search button{font:inherit;color:var(--ink-2);cursor:pointer;border:1px solid var(--rule-2);text-shadow:none;background:0 0;border-radius:4px;padding:3px 8px}.cm-editor .cm-panel.cm-search button:hover{color:var(--ink);border-color:var(--ink-3)}.cm-editor .cm-panel.cm-search button[name=close]{margin-inline-start:auto;position:static}.cm-editor .cm-panel.cm-search label{color:var(--ink-3);align-items:center;gap:4px;display:inline-flex}.cm-editor .cm-searchMatch{outline:1px solid var(--rule-strong);background:#ffffff24}.cm-editor .cm-searchMatch-selected{background:#ffffff47}.cm-editor .cm-selectionMatch{background:#ffffff14}.cm-editor .cm-tooltip{background:var(--bg-2);color:var(--ink);border:1px solid var(--rule-2);border-radius:var(--radius);font-family:var(--mono);font-size:12px}.cm-editor .cm-tooltip-autocomplete>ul>li{padding:3px 8px}.cm-editor .cm-tooltip-autocomplete>ul>li[aria-selected]{background:var(--surface-tint);color:var(--ink)}.cm-editor .cm-completionIcon{opacity:.6}.cm-editor .cm-foldGutter .cm-gutterElement{color:var(--ink-3);cursor:pointer}.cm-editor .cm-foldPlaceholder{background:var(--bg-3);color:var(--ink-2);border:1px solid var(--rule-2)}.cm-editor .cm-placeholder{color:var(--ink-3);font-style:normal}.cm-editor .cm-scroller{font-family:var(--mono);line-height:20px}.cm-editor .cm-gutters{background:var(--bg-1);border-right:1px solid var(--rule);color:var(--ink-3);font-family:var(--mono);min-width:48px;font-size:12px}.cm-editor .cm-activeLineGutter{background:var(--surface-tint);color:var(--ink)}.cm-editor .cm-activeLine{background:#ffffff08}.cm-editor .cm-cursor{border-left-color:var(--ink);border-left-width:2px}.cm-editor .cm-selectionBackground,.cm-editor.cm-focused .cm-selectionBackground{background:#ffffff2e!important}.cm-editor .cm-content{caret-color:var(--ink)}.cm-editor .cm-matchingBracket{background:var(--surface-tint);outline:1px solid var(--rule-strong);color:var(--ink)!important}.cm-editor .cm-scroller::-webkit-scrollbar{width:8px;height:8px}.cm-editor .cm-scroller::-webkit-scrollbar-track{background:0 0}.cm-editor .cm-scroller::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:4px}.cm-editor .cm-scroller::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}@media (min-width:961px) and (max-width:1120px){.pane-tools .ghost-chip,.devices button{padding-inline:6px}}@media (min-width:961px){.pane-header{height:auto;min-height:32px;padding-block:2px}.pane-tools .ghost-chip{gap:4px;padding-inline:8px}.pane-tools-wrap{max-width:100%}.pane-tools{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}body:has(.studio) .lang-suggest{inset-block-start:119px}}@media (max-width:960px){.studio{height:calc(100dvh - 44px);padding:14px}.studio-inner{flex:1;grid-template-rows:minmax(0,1fr);min-height:0;grid-template-columns:1fr!important}.studio-inner>.pane{border-top:0;min-height:0}.divider{display:none}.studio-tabs{display:flex}.studio-inner[data-active="0"]>.pane[data-pane="1"],.studio-inner[data-active="1"]>.pane[data-pane="0"],.devices,.pane-fullscreen-btn{display:none}.lib-menu{inset-inline:12px;inset-block:auto calc(12px + var(--consent-h,0px));z-index:90;width:auto;max-height:60dvh;position:fixed;top:auto}body:has(.studio) .lang-suggest{inset-block:auto calc(12px + var(--consent-h,0px));max-width:none;inset-inline:12px}.ghost-chip{min-height:44px;padding:12px 14px}.pane-header{gap:8px;height:auto;min-height:44px;padding:4px 10px}.pane-header>span:first-child{display:none}.pane-tools-wrap{flex-wrap:wrap;flex:1;justify-content:flex-end;min-width:0}.pane-tools{flex-wrap:wrap;flex:1;justify-content:flex-end;row-gap:4px;min-width:0}.pane-tools>*{flex:none}.pane-tools .ghost-chip{padding-inline:10px}.pane-fullscreen-btn{min-width:44px;min-height:44px;padding:6px 10px}.devices button{min-height:44px;padding:12px 14px}.section{padding:48px 20px}.preview-wrap.tablet,.preview-wrap.phone{padding:0}.cm-editor{font-size:16px}.cm-editor .cm-scroller{line-height:24px}.editor-skeleton{font-size:16px;line-height:24px}}@media (max-width:420px){.url-field{flex-direction:column;align-items:stretch;gap:10px}.url-field-text{white-space:normal;word-break:break-all}.url-field .btn{width:100%;min-height:44px}.share-buttons{grid-template-columns:1fr 1fr}}:where([dir=rtl]) .editor-skeleton,:where([dir=rtl]) .console-args{text-align:start;direction:ltr;unicode-bidi:isolate}[dir=rtl] .console-toggle-caret{display:inline-block;transform:scaleX(-1)}.pane-status{white-space:nowrap;color:var(--err);flex:none;margin-inline:10px auto}@media (max-width:960px){.pane-header:has(.pane-status){flex-wrap:wrap}.pane-status{flex-basis:100%;margin-inline-start:0}}@media (min-width:961px){.pane-header:has(.pane-status)>span:first-child{flex-shrink:0}.pane-header:has(.pane-status) .pane-tools-wrap{flex-shrink:1;min-width:0}}