:root{--blue:#1ea7ff;--blue2:#00a3ff;--text:#e8e9eb;--muted:#a0a0a0;--muted2:#696969;--glass:#ffffff0e;--border:#ffffff1f;--ok:#66bb6a;--shadow:0 20px 50px #0000008c;--mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{height:100dvh;min-height:100dvh;color:var(--text);background:radial-gradient(1000px 520px at 50% 105%,#1ea7ff29,#0000 62%),radial-gradient(850px 460px at 8% 5%,#ffffff0f,#0000 60%),linear-gradient(#292929 0%,#17191d 50%,#0b0d11 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}body:before{content:"";pointer-events:none;background-color:#0000;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff04 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:44px 44px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#00000073,#0000 78%);mask-image:linear-gradient(#00000073,#0000 78%)}.app{justify-content:center;align-items:stretch;height:100dvh;min-height:0;padding:10px;display:flex;overflow:hidden}.shell{border:1px solid var(--border);width:min(1440px,100%);height:100%;min-height:0;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f11143d;border-radius:18px;flex-direction:column;display:flex;overflow:hidden}.topbar{border-bottom:1px solid #ffffff14;flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-logo-link{flex:none;place-items:center;text-decoration:none;display:grid}.brand-logo{object-fit:contain;background:0 0;border-radius:14px;width:56px;height:56px;display:block}.logo-mark{width:48px;height:48px;color:var(--blue);letter-spacing:.04em;background:linear-gradient(145deg,#1ea7ff1a,#0000003d);border:1px solid #1ea7ff52;border-radius:14px;place-items:center;font-size:.75rem;font-weight:800;display:grid;box-shadow:0 10px 26px #0000005c,inset 0 0 22px #1ea7ff1a}.brand-copy h1{letter-spacing:.02em;color:#aeb2b8;font-size:20px;font-weight:650}.brand-copy h1 span{color:var(--blue)}.brand-copy h1 .tm{color:var(--muted2);vertical-align:super;margin-left:1px;font-size:.7em}.brand-copy p{color:var(--muted2);letter-spacing:.06em;text-transform:uppercase;margin-top:0;font-size:11px}.top-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.pill{border:1px solid var(--border);color:var(--muted);background:#0000002e;border-radius:999px;align-items:center;gap:7px;padding:8px 11px;font-size:12px;display:inline-flex}.pill.active-inspect{color:#d7efff;background:#1ea7ff1a;border-color:#1ea7ff66}.dot{background:var(--ok);border-radius:50%;width:7px;height:7px;box-shadow:0 0 8px #66bb6ab3}.btn{cursor:pointer;border:1px solid var(--border);color:var(--muted);background:#ffffff08;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:650}.btn:hover{color:#fff;background:#1ea7ff17;border-color:#1ea7ff47}.btn.active{color:#fff;background:#1ea7ff29;border-color:#1ea7ff73}.btn-primary{color:#fff;border-color:var(--blue);background:linear-gradient(#1ea7ff59,#1ea7ff29);box-shadow:0 10px 24px #1ea7ff26}.workspace{flex:1;grid-template-columns:minmax(0,1fr) minmax(360px,1.05fr);gap:10px;min-height:0;padding:10px;display:grid;overflow:hidden}.glass{border:1px solid var(--border);background:var(--glass);border-radius:14px;flex-direction:column;min-height:0;display:flex;overflow:hidden;box-shadow:0 10px 25px #0000002e}.panel-head{background:#0000002b;border-bottom:1px solid #ffffff14;flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;display:flex}.label{text-transform:uppercase;letter-spacing:.1em;color:#6f747c;font-size:11px;font-weight:700}.preview-wrap{background:#fff;flex:1;min-height:0;position:relative}.preview-frame{background:#fff;border:0;width:100%;height:100%;min-height:0}.inspect-hint{z-index:2;color:#d7efff;pointer-events:none;background:#0a0e12e0;border:1px solid #1ea7ff59;border-radius:999px;padding:8px 11px;font-size:11px;position:absolute;bottom:12px;left:12px}.inspector{flex-direction:column;gap:6px;height:100%;min-height:0;padding:8px;display:flex;overflow:hidden}.inspector-head{flex-direction:column;flex:none;gap:6px;display:flex}.inspector-title{letter-spacing:.1em;text-transform:uppercase;color:#6f747c;padding:0 2px;font-size:11px;font-weight:700}.card-selection{flex:none}.code-view-tabs{flex-wrap:nowrap;flex:none;gap:6px;display:flex}.code-view-tabs .btn{flex:1 1 0;min-width:0;padding:7px 8px;font-size:12px}.code-workspace{flex:auto;gap:6px;min-height:0;display:grid;overflow:hidden}.inspector[data-code-view=all] .code-workspace{grid-template-rows:minmax(0,2fr) minmax(0,5fr) minmax(0,1fr)}.inspector[data-code-view=html] .code-workspace,.inspector[data-code-view=css] .code-workspace,.inspector[data-code-view=js] .code-workspace{grid-template-rows:minmax(0,1fr)}.inspector[data-code-view=html] .card-css,.inspector[data-code-view=html] .card-js,.inspector[data-code-view=css] .card-html,.inspector[data-code-view=css] .card-js,.inspector[data-code-view=js] .card-html,.inspector[data-code-view=js] .card-css{display:none}.card-html,.card-css,.card-js{min-height:0;overflow:hidden}.card-css{border-color:#1ea7ff38;box-shadow:inset 0 1px #1ea7ff14}.inspector[data-code-view=css] .card-css{border-color:#1ea7ff47;box-shadow:inset 0 1px #1ea7ff1a}.card-html textarea,.card-js .code-view,.card-css .rule-list{flex:auto;min-height:0;overflow:auto}@media (width<=768px){.code-view-tabs [data-code-view=all]{display:none}}.card{background:#0000002e;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.card-head{background:#00000029;border-bottom:1px solid #ffffff0f;flex:none;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;display:flex}.card-head strong{color:#d8dadd;font-size:12px;font-weight:650}.card-head-actions{align-items:center;gap:8px;min-width:0;display:flex}.card-head-actions span{font-family:var(--mono);color:var(--muted2);font-size:10px}.copy-btn{border:1px solid var(--border);width:30px;height:30px;min-height:30px;color:var(--muted);cursor:pointer;background:#ffffff08;border-radius:8px;flex:none;place-items:center;padding:0;display:grid}.copy-btn svg{width:14px;height:14px;display:block}.copy-btn:hover{color:#fff;background:#1ea7ff1f;border-color:#1ea7ff66}.copy-btn.copied{color:#b9f6ca;background:#66bb6a1a;border-color:#66bb6a73}.rule-head{flex:none;justify-content:space-between;align-items:center;gap:8px;display:flex}.rule-toggle{cursor:pointer;min-width:0;font-family:var(--mono);color:#9fd4ff;text-align:left;background:0 0;border:0;flex:auto;padding:7px 10px;font-size:11px}.rule-toggle .rule-selector{text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block;overflow:hidden}.rule-head .copy-btn{border-radius:7px;flex:none;width:26px;height:26px;min-height:26px;margin-right:6px}.rule.is-open .rule-head{background:#1ea7ff12;border-bottom:1px solid #ffffff0f}.rule:not(.is-open) .rule-body{display:none}.path-chip{font-family:var(--mono);color:#b9dfff;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px solid #ffffff0f;flex:none;min-height:0;padding:8px 10px;font-size:11px;overflow:hidden}textarea,.code-view{resize:none;color:#f2f7f4;width:100%;min-height:0;font-family:var(--mono);tab-size:2;white-space:pre;background:#00000047;border:0;outline:none;flex:1;padding:10px;font-size:.78rem;line-height:1.45;overflow:auto}.code-view{color:var(--muted)}.empty-state{color:var(--muted2);padding:18px 14px;font-size:12px;line-height:1.5}.rule-list{overflow-anchor:none;scroll-behavior:auto;flex-direction:column;flex:1;gap:6px;min-height:0;padding:8px;display:flex;overflow:auto}.rule{background:#ffffff06;border:1px solid #ffffff14;border-radius:10px;flex-direction:column;flex:none;min-height:0;display:flex;position:relative;overflow:hidden}.rule.is-open{background:#1ea7ff0d;border-color:#1ea7ff47;flex:auto;grid-template-rows:auto minmax(0,1fr);min-height:0;display:grid;overflow:hidden}.rule-body{grid-template-rows:auto minmax(0,1fr);min-height:0;display:grid;overflow:hidden}.rule textarea{background:#00000038;min-height:0;max-height:none;overflow-y:auto}.rule:not(.is-open){flex:none}.css-tools{z-index:2;overflow-anchor:none;flex:none;position:relative;overflow:visible}.color-pick-bar{background:#080c108c;border-bottom:1px solid #ffffff0f;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;display:flex}.color-pick-bar .css-tool-label{color:#9fd4ff;padding-top:0}.css-tools-dropdown{background:#00000024;border-bottom:1px solid #ffffff0f}.css-tools-summary{cursor:pointer;color:#9fd4ff;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;font-size:11px;font-weight:650;list-style:none;display:flex}.css-tools-summary::-webkit-details-marker{display:none}.css-tools-summary:after{content:"▾";color:#6f747c;font-size:10px;transition:transform .12s}.css-tools-dropdown[open]>.css-tools-summary:after{transform:rotate(180deg)}.css-tools-summary-label{letter-spacing:.04em;text-transform:uppercase;color:#7f9bb0;font-size:10px}.css-tools-meta{font-family:var(--mono);color:var(--muted2);margin-left:auto;font-size:10px;font-weight:600}.css-tools-panel{background:#080c10eb;border-top:1px solid #ffffff0d;gap:8px;max-height:132px;padding:8px 10px 10px;display:grid;overflow:auto}.css-tool-row{flex-wrap:wrap;align-items:flex-start;gap:8px;display:flex}.css-tool-label{letter-spacing:.08em;text-transform:uppercase;color:#6f747c;flex:none;min-width:44px;padding-top:6px;font-size:10px;font-weight:700}.css-tool-empty{color:var(--muted2);font-size:11px}.color-swatches,.length-tools{flex-wrap:wrap;flex:1;align-items:center;gap:6px;min-width:0;display:flex}.color-swatch{cursor:pointer;border:1px solid #ffffff59;border-radius:3px;flex:none;width:22px;height:22px;position:relative;overflow:visible;box-shadow:inset 0 0 0 1px #00000059}.color-swatch.is-active{outline:2px solid var(--blue);outline-offset:1px;border-color:#1ea7ffd9}.color-swatch .swatch-chip{border-radius:inherit;width:100%;height:100%;display:block;overflow:hidden}.color-swatch input[type=color]{opacity:0;cursor:pointer;border-radius:inherit;z-index:1;border:0;padding:0;position:absolute;inset:0}.color-swatch .swatch-tip{color:#e8eef5;font-family:var(--mono);letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;z-index:20;background:#0c1016f5;border:1px solid #ffffff1f;border-radius:6px;padding:5px 8px;font-size:10px;font-weight:600;transition:opacity .12s,transform .12s,visibility .12s;position:absolute;top:calc(100% + 6px);bottom:auto;left:50%;transform:translate(-50%)translateY(-4px);box-shadow:0 8px 20px #00000073}.color-swatch .swatch-tip:after{content:"";border:5px solid #0000;border-bottom-color:#0c1016f5;margin-left:-5px;position:absolute;top:auto;bottom:100%;left:50%}.color-swatch:hover .swatch-tip,.color-swatch:focus-within .swatch-tip{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.tool-btn{border:1px solid var(--border);min-height:26px;color:var(--muted);cursor:pointer;background:#ffffff08;border-radius:7px;padding:0 8px;font-size:11px;font-weight:650}.tool-btn:hover{color:#fff;background:#1ea7ff1f;border-color:#1ea7ff66}.eye-btn{place-items:center;width:26px;height:26px;min-height:26px;padding:0;display:grid}.eye-btn svg{width:14px;height:14px}.length-chip{font-family:var(--mono);color:#dbe7f0;box-sizing:border-box;background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;flex:none;align-items:center;gap:4px;height:28px;padding:2px 4px 2px 6px;font-size:10px;display:inline-flex}.length-chip .length-prop{text-overflow:ellipsis;white-space:nowrap;color:#7f9bb0;letter-spacing:.02em;text-transform:lowercase;border-right:1px solid #ffffff1a;flex:0 0 5.6rem;width:5.6rem;margin-right:2px;padding-right:4px;font-size:9px;font-weight:700;overflow:hidden}.length-chip button{color:#9fd4ff;cursor:pointer;background:#1ea7ff1f;border:0;border-radius:6px;width:20px;height:20px;font-size:12px;line-height:1}.length-chip button:hover{color:#fff;background:#1ea7ff3d}.length-chip span:not(.length-prop),.length-chip .length-input{text-align:center;box-sizing:border-box;flex:0 0 4.6rem;width:4.6rem;min-width:4.6rem;padding:0 4px}.length-chip .length-input{color:#dbe7f0;font:inherit;cursor:text;background:0 0;border:0;border-radius:5px;outline:none}.length-chip .length-input:hover,.length-chip .length-input:focus{background:#1ea7ff1f;box-shadow:inset 0 0 0 1px #1ea7ff59}.footer{color:var(--muted2);background:#00000047;border-top:1px solid #ffffff12;flex-wrap:wrap;flex:none;align-items:flex-start;gap:14px;padding:8px 14px;font-size:10px;line-height:1.4;display:flex}.footer-brand{color:#a0a0a0;white-space:nowrap;align-items:center;gap:10px;font-weight:650;display:inline-flex}.footer-logo{object-fit:contain;border-radius:9px;width:36px;height:36px}.hidden-input{display:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.source-row{flex:none;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:0 10px 8px;display:grid}.source-row label{min-width:0;color:var(--muted);grid-template-columns:auto 1fr;align-items:center;gap:8px;font-size:.78rem;font-weight:700;display:grid}.source-row input{border:1px solid var(--border);width:100%;min-width:0;color:var(--text);background:#00000038;border-radius:10px;outline:none;padding:8px 10px}.source-row input:focus{border-color:#1ea7ff73;box-shadow:0 0 0 3px #1ea7ff24}.source-actions{flex-wrap:wrap;gap:8px;display:flex}.viewport-controls,.mobile-tabs{flex-wrap:wrap;gap:6px;display:flex}.preview-stage{background:#00000038;flex:1;justify-content:center;min-height:0;display:flex;overflow:auto}.preview-stage[data-viewport=desktop] .preview-wrap{width:100%}.preview-stage[data-viewport=tablet] .preview-wrap{border-left:1px solid #ffffff0f;border-right:1px solid #ffffff0f;width:min(768px,100%)}.preview-stage[data-viewport=mobile] .preview-wrap{border-left:1px solid #ffffff14;border-right:1px solid #ffffff14;width:min(390px,100%)}.offline-pill.online .dot{background:var(--ok)}.offline-pill.offline{color:#ffe0b2;border-color:#fa66}.offline-pill.offline .dot{background:var(--warn);box-shadow:0 0 8px #ffaa66b3}.mobile-tabs{flex:none;padding:0 14px 8px;display:none}.paste-dialog{border:1px solid var(--border);color:var(--text);background:#12151a;border-radius:14px;width:min(720px,100vw - 24px);padding:0}.paste-dialog::backdrop{background:#0000008c}.paste-dialog form{gap:12px;padding:16px;display:grid}.paste-dialog h2{font-size:15px;font-weight:650}.paste-dialog textarea{border:1px solid var(--border);border-radius:10px;min-height:220px}.paste-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.export-dialog{width:min(520px,100vw - 24px)}.export-lede{color:var(--muted);margin:0;font-size:13px;line-height:1.5}.export-options{gap:8px;display:grid}.export-option{text-align:left;color:inherit;cursor:pointer;background:#ffffff08;border:1px solid #ffffff1a;border-radius:10px;gap:3px;padding:11px 12px;display:grid}.export-option:hover,.export-option:focus-visible{background:#1ea7ff1a;border-color:#1ea7ff73;outline:none}.export-option strong{color:#e8eef5;font-size:13px;font-weight:650}.export-option span{color:var(--muted2);font-size:12px;line-height:1.4}.export-email-field,.export-git-panel label{gap:6px;display:grid}.export-email-field span,.export-git-panel label span{letter-spacing:.06em;text-transform:uppercase;color:#6f747c;font-size:11px;font-weight:700}.export-email-field input,.export-git-panel textarea{border:1px solid var(--border);width:100%;color:var(--text);font:inherit;background:#00000047;border-radius:10px;padding:10px 12px}.export-git-panel{border-top:1px solid #ffffff14;gap:10px;padding-top:4px;display:grid}.export-git-panel textarea{min-height:96px;font-family:var(--mono);resize:vertical;font-size:12px}.account-bar{background:#1ea7ff12;border:1px solid #1ea7ff38;border-radius:12px;flex:none;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 10px 6px;padding:8px 11px;display:grid}.account-bar strong{color:#fff;font-size:12px;display:block}.account-bar p{color:var(--muted);margin-top:3px;font-size:11px;line-height:1.4}.account-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.account-bar.limit-hit{background:#ffaa6614;border-color:#ffaa6673}.tier-select{border:1px solid var(--border);color:var(--text);background:#00000047;border-radius:10px;padding:9px 11px;font-size:12px}.desktop-download{border:1px solid var(--border);background:#0000002e;border-radius:12px;flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:10px;margin:0 10px 6px;padding:8px 11px;display:flex}.desktop-download strong{color:#d8dadd;font-size:12px;display:block}.desktop-download p{color:var(--muted2);margin-top:3px;font-size:11px}.desktop-download.locked{opacity:.78}@media (width<=820px){.account-bar{grid-template-columns:1fr}.account-actions{justify-content:flex-start}}@media (width<=1100px){.workspace{grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-template-columns:1fr}.preview-pane,.inspector{height:100%;min-height:0}.source-row{grid-template-columns:1fr}}@media (width<=820px){.mobile-tabs{display:flex}.workspace{grid-template-rows:minmax(0,1fr);grid-template-columns:1fr}.workspace[data-mobile-pane=preview] .inspector,.workspace[data-mobile-pane=code] .preview-pane,.shell--code-pane .account-bar,.shell--code-pane .desktop-download,.shell--code-pane .source-row,.shell--code-pane .footer{display:none}.shell--code-pane .topbar{padding:6px 10px}.shell--code-pane .brand-copy p,.shell--code-pane #openBtn,.shell--code-pane #pasteBtn,.shell--code-pane .offline-pill,.shell--code-pane #inspectBtn{display:none}.shell--code-pane .top-actions .btn{padding:8px 10px;font-size:12px}.app{padding:0}.shell{border-radius:0}.preview-pane,.inspector{height:100%;min-height:0}.top-actions{width:100%}.top-actions .btn{flex:auto}.footer-brand{width:100%}}@media (width<=620px){.brand-copy h1{font-size:18px}.logo-mark{width:42px;height:42px}.brand-logo{border-radius:12px;width:48px;height:48px}}