:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f4f0e7;--border:#34332e;--panel:#191916;--muted:#8e8a80;--accent:#ec9558;background:#12120f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{min-height:100%}body{background:#12120f;margin:0}button,input,textarea{font:inherit}button{color:inherit}.workspace{background:radial-gradient(circle at 12% -20%,#ec955814,#0000 28rem),#12120f;grid-template-rows:64px minmax(0,1fr);height:100vh;min-height:600px;display:grid;position:relative}.app-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:0 18px;display:flex}.brand,.header-actions,.brand>div{align-items:center;display:flex}.brand{gap:11px}a.brand{color:inherit;text-decoration:none}.brand-mark{width:34px;height:34px;color:var(--accent);background:linear-gradient(145deg,#2a241e,#171714);border:1px solid #60564c;border-radius:9px;place-items:center;font-family:Georgia,serif;font-size:19px;display:grid}.brand>div{flex-direction:column;align-items:flex-start;gap:2px}.brand strong{font-size:13px;font-weight:620}.brand>div>span:last-child,.library-brand-copy>span:last-child{color:var(--muted);font-size:11px}.brand input{color:#f0ebe2;background:0 0;border:0;outline:0;width:min(260px,28vw);padding:0;font-size:12px;font-weight:650}.brand input:focus{box-shadow:0 1px 0 var(--accent)}.brand input:disabled{color:#7d7970}.header-actions{gap:8px}.button{border:1px solid var(--border);cursor:pointer;border-radius:8px;height:34px;padding:0 13px;font-size:12px;font-weight:650}.button-quiet{color:#aaa69d;background:0 0}.button-quiet:hover{color:#f4f0e7;border-color:#535149}.button-run{color:#21150d;background:var(--accent);border-color:#f0a16a;align-items:center;gap:7px;display:flex}.button-publish{color:#e8e3d9;background:#292823;border-color:#57544c}.button-publish:hover:not(:disabled){background:#33312b;border-color:#777268}.button-publish:disabled{color:#807c73;cursor:wait}.button-account{color:#cbd4e3;text-overflow:ellipsis;white-space:nowrap;background:#20252d;border-color:#4b5360;max-width:220px;overflow:hidden}.button-account:hover:not(:disabled){background:#282e38;border-color:#6d7b91}.button-account:disabled{color:#66645e;cursor:wait}.account-control{position:relative}.account-menu{z-index:20;background:#20211f;border:1px solid #4b4f57;border-radius:10px;width:min(330px,100vw - 24px);padding:12px;position:absolute;top:42px;right:0;box-shadow:0 18px 50px #00000073}.account-menu-heading,.account-menu-heading>div,.account-project-details,.account-project-actions{display:flex}.account-menu-heading{border-bottom:1px solid #383a3d;justify-content:space-between;align-items:center;padding:2px 2px 10px}.account-menu-heading>div,.account-project-details{flex-direction:column;align-items:flex-start;gap:3px}.account-menu strong{color:#eee9df;font-size:12px}.account-menu span,.account-menu p{color:var(--muted);font-size:10px}.account-menu-heading button{color:#a8a49c;cursor:pointer;background:0 0;border:0;padding:5px 7px;font-size:10px}.account-menu ul{max-height:280px;margin:0;padding:5px 0 0;list-style:none;display:grid;overflow:auto}.account-menu li+li{border-top:1px solid #31322f}.account-menu li{justify-content:space-between;align-items:center;gap:12px;padding:9px 4px;display:flex}.account-project-actions{gap:5px}.account-project-actions a{color:#b9b5ad;border:1px solid #42454a;border-radius:5px;padding:5px 7px;font-size:10px;text-decoration:none}.account-project-actions a:hover{color:var(--accent);border-color:#696e77}.account-menu p{margin:14px 3px 4px;line-height:1.5}.account-navigation{gap:6px;padding-top:10px;display:grid}.account-navigation a{color:#ccc7bd;background:#252623;border:1px solid #3d3f42;border-radius:7px;padding:9px 10px;font-size:11px;text-decoration:none}.account-navigation a:hover{color:var(--accent);border-color:#67635b}.auth-backdrop{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#070706b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.auth-dialog{background:#20201c;border:1px solid #525149;border-radius:14px;width:min(420px,100%);padding:20px;box-shadow:0 28px 80px #0000008c}.auth-heading,.auth-heading>div{display:flex}.auth-heading{justify-content:space-between;align-items:flex-start;margin-bottom:22px}.auth-heading>div{flex-direction:column;align-items:flex-start;gap:5px}.auth-heading span{color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:700}.auth-heading h2{color:#f2ede3;margin:0;font:400 28px/1.05 Georgia,serif}.auth-heading>button{color:#98948b;cursor:pointer;background:0 0;border:0;padding:0;font-size:24px;line-height:1}.auth-dialog form{gap:10px;display:grid}.auth-dialog p{color:#a8a49b;margin:0 0 8px;font-size:12px;line-height:1.55}.auth-dialog p strong{color:#dcd7cc}.auth-dialog label{color:#c8c3b9;font-size:11px;font-weight:650}.auth-dialog input{color:#f0ebe2;background:#171714;border:1px solid #4c4a43;border-radius:8px;outline:0;width:100%;height:44px;padding:0 12px}.auth-dialog input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ec95581f}.auth-submit,.auth-secondary{cursor:pointer;border-radius:8px;height:40px;font-size:12px;font-weight:700}.auth-submit{color:#21150d;background:var(--accent);border:1px solid #f0a16a;margin-top:4px}.auth-submit:disabled{opacity:.55;cursor:wait}.auth-secondary{color:#99958c;background:0 0;border:0}.auth-dialog .auth-error{color:#df8172;margin:0}.button-run:hover{background:#f3a870}.button-run span{font-size:9px}.publish-notice{z-index:10;background:#22211d;border:1px solid #4f4b42;border-radius:9px;gap:10px;width:min(470px,100vw - 32px);padding:14px;display:grid;position:absolute;top:74px;right:16px;box-shadow:0 18px 50px #00000061}.publish-notice>div{justify-content:space-between;align-items:center;display:flex}.publish-notice strong{color:#eee9df;font-size:12px}.publish-notice>div button{color:#8d897f;cursor:pointer;background:0 0;border:0;padding:0;font-size:18px;line-height:1}.publish-notice a{color:var(--accent);text-overflow:ellipsis;white-space:nowrap;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;overflow:hidden}.copy-url{color:#d8d3c8;cursor:pointer;background:#2c2a25;border:1px solid #57534b;border-radius:6px;padding:7px 9px;font-size:10px;font-weight:650}.publish-actions{flex-wrap:wrap;justify-content:flex-start;gap:7px;display:flex}.publish-notice .devto-note{color:#aeb9cd;background:#20252d;border-left:2px solid #596c8b;padding:9px 10px}.publish-notice .copy-error{color:#df8172}.publish-notice p{color:#8d897f;margin:0;font-size:10px;line-height:1.5}.publish-notice.error{border-color:#74473f}.publish-notice.error strong,.publish-notice.error p{color:#df8172}.project-load-notice{z-index:10;color:#d8e0ec;background:#20252df2;border:1px solid #4b5360;border-radius:9px;width:min(520px,100vw - 32px);padding:12px 14px;position:absolute;top:76px;left:50%;transform:translate(-50%);box-shadow:0 12px 36px #00000061}.project-load-notice p{color:#aeb7c5;margin:5px 0 0;font-size:12px}.project-load-notice.error{color:#f0a49a;background:#2c201ff2;border-color:#704640}.route-loading{background:#12120f;justify-content:center;align-items:center;gap:11px;min-height:100vh;display:flex}.library-page{background:radial-gradient(circle at 15% -10%,#ec95581a,#0000 34rem),#12120f;min-height:100vh}.library-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:64px;padding:0 22px;display:flex}.library-brand-copy{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.library-new{align-items:center;text-decoration:none;display:inline-flex}.library-content{width:min(1080px,100% - 40px);margin:0 auto;padding:70px 0 90px}.library-intro>span{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:750}.library-intro h1{letter-spacing:-.045em;margin:12px 0 10px;font:400 clamp(42px,7vw,68px)/.95 Georgia,serif}.library-intro p{color:#918d83;max-width:580px;margin:0;font-size:14px;line-height:1.6}.project-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:42px 0 0;padding:0;list-style:none;display:grid}.project-grid li{background:linear-gradient(145deg,#1d1d19,#171714);border:1px solid #35342f;border-radius:11px;flex-direction:column;justify-content:space-between;min-height:190px;padding:20px;display:flex}.project-grid li>div>span{color:#77736a;font-size:10px}.project-grid h2{color:#eee9df;overflow-wrap:anywhere;margin:10px 0 0;font:400 24px/1.1 Georgia,serif}.project-card-actions{align-items:center;gap:8px;margin-top:24px;display:flex}.project-card-actions a,.library-empty a{color:#aaa69d;border:1px solid #46443e;border-radius:6px;padding:8px 10px;font-size:10px;font-weight:700;text-decoration:none}.project-card-actions a:hover,.library-empty a:hover{color:var(--accent);border-color:#716c62}.project-card-actions .project-edit{color:#e4a276;border-color:#77573f}.library-empty{color:#dcd7cd;background:#191916;border:1px dashed #413f39;border-radius:11px;justify-items:start;gap:8px;max-width:620px;margin-top:42px;padding:28px;display:grid}.library-empty p{color:#8f8b82;margin:0 0 8px;font-size:12px;line-height:1.5}.library-empty.error{border-color:#704640}.workbench{grid-template-columns:minmax(340px,.94fr) minmax(420px,1.06fr);min-height:0;display:grid}.editor-panel,.preview-panel{background:var(--panel);min-width:0;min-height:0;display:grid}.editor-panel{border-right:1px solid var(--border);grid-template-rows:40px 44px minmax(0,1fr)}.preview-panel{background:#11110f;grid-template-rows:40px minmax(0,1fr) 42px}.panel-heading{border-bottom:1px solid var(--border);color:#aaa69c;letter-spacing:.09em;text-transform:uppercase;justify-content:space-between;align-items:center;padding:0 14px;font-size:10px;font-weight:700;display:flex}.panel-heading span:last-child{color:#77746b;letter-spacing:.04em;font-size:9px;transition:color .16s}.panel-heading span.pending{color:var(--accent)}.preview-state{align-items:center;gap:6px;display:flex}.preview-state i{background:#6faf7c;border-radius:50%;width:5px;height:5px;box-shadow:0 0 8px #6faf7c8c}.source-tabs{border-bottom:1px solid var(--border);align-items:stretch;display:flex}.source-tab{border:0;border-right:1px solid var(--border);color:#88857c;cursor:pointer;background:#151512;border-bottom:2px solid #0000;align-items:center;gap:7px;min-width:98px;padding:0 14px;font-size:11px;display:flex}.source-tab:hover{color:#cac5ba;background:#1c1c18}.source-tab.active{border-bottom-color:var(--accent);color:#f1ede4;background:#1c1c18}.file-dot{background:#d97557;border-radius:2px;width:7px;height:7px}.file-dot.css{background:#6e8fcf}.file-dot.javascript{background:#d8b858}.dependency-tab{min-width:118px}.dependency-icon{color:#aaa69d;border:1px solid #6d6960;border-radius:50%;place-items:center;width:14px;height:14px;font-size:11px;line-height:1;display:grid}.editor-wrap{min-height:0}.editor-wrap[hidden]{display:none}.dependencies-panel{background:#1c1c18;min-height:0;padding:22px;overflow-y:auto}.dependencies-panel[hidden]{display:none}.dependency-group+.dependency-group{margin-top:28px}.dependency-heading,.dependency-heading>div,.dependency-actions{align-items:center;display:flex}.dependency-heading{justify-content:space-between;gap:16px;margin-bottom:10px}.dependency-heading>div{gap:8px}.dependency-heading h2{color:#d8d3c8;margin:0;font-size:12px;font-weight:650}.dependency-heading span{color:#77746c;background:#282823;border-radius:99px;place-items:center;min-width:18px;height:18px;padding:0 5px;font-family:SFMono-Regular,Consolas,monospace;font-size:9px;display:grid}.add-dependency{color:var(--accent);cursor:pointer;background:0 0;border:0;border-radius:5px;padding:5px 8px;font-size:10px;font-weight:650}.add-dependency:hover{background:#ec955814}.empty-dependencies{color:#6f6c64;text-align:center;border:1px dashed #383730;border-radius:7px;margin:0;padding:14px;font-size:11px}.dependency-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.dependency-list li{grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:8px;display:grid}.dependency-order{color:#625f58;text-align:center;padding-top:9px;font-family:SFMono-Regular,Consolas,monospace;font-size:9px}.dependency-input-wrap{min-width:0}.dependency-input-wrap input{color:#cfcbc1;background:#161613;border:1px solid #3b3a34;border-radius:6px;outline:0;width:100%;height:34px;padding:0 10px;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.dependency-input-wrap input::placeholder{color:#545149}.dependency-input-wrap input:focus{border-color:#8d6245;box-shadow:0 0 0 2px #ec955814}.dependency-input-wrap input[aria-invalid=true]{border-color:#8d4c43}.url-error{color:#d46f61;margin:4px 0 2px;font-size:9px;display:block}.dependency-actions{gap:3px}.dependency-actions button{color:#77746c;cursor:pointer;background:0 0;border:0;border-radius:5px;place-items:center;width:27px;height:34px;padding:0;font-size:11px;display:grid}.dependency-actions button:hover:not(:disabled){color:#d7d2c6;background:#282823}.dependency-actions button:disabled{opacity:.28;cursor:default}.dependency-actions button.remove-dependency:hover{color:#e17867}.dependency-note{color:#747169;border-top:1px solid #302f2a;margin:24px 0 0;padding-top:14px;font-size:10px;line-height:1.55}textarea{resize:none;color:#d7d2c6;width:100%;height:100%;min-height:0;caret-color:var(--accent);tab-size:2;background:#1c1c18;border:0;outline:0;padding:20px 22px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.7}textarea:focus{box-shadow:inset 0 0 0 1px #ec955833}.preview-frame-wrap{background-color:#12120f;background-image:linear-gradient(45deg,#151512 25%,#0000 25%),linear-gradient(-45deg,#151512 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#151512 75%),linear-gradient(-45deg,#0000 75%,#151512 75%),none;background-position:0 0,0 6px,6px -6px,-6px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:12px 12px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;min-height:0;padding:12px}iframe{background:#fff;border:1px solid #292822;border-radius:5px;width:100%;height:100%;display:block;box-shadow:0 14px 42px #0000003d}.console{border-top:1px solid var(--border);color:#77746c;align-items:center;gap:14px;min-width:0;padding:0 14px;font-family:SFMono-Regular,Consolas,monospace;font-size:10px;display:flex}.console-label{color:#aaa69d;letter-spacing:.06em;text-transform:uppercase;font-weight:700}.console-message{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.console.error,.console.error .console-message{color:#e17867}.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}@media (max-width:780px){.workspace{height:auto;min-height:100vh}.workbench{grid-template-rows:minmax(440px,55vh) minmax(500px,70vh);grid-template-columns:1fr}.editor-panel{border-right:0;border-bottom:1px solid var(--border)}}@media (max-width:480px){.app-header{padding:0 10px}.brand-mark,.button-quiet,.button-run{display:none}.button-account{max-width:135px}.brand input{width:min(145px,34vw)}.library-header{padding:0 10px}.library-header .brand-mark{display:grid}.library-header .library-new{display:none}.library-content{width:min(100% - 24px,1080px);padding-top:46px}.project-grid{grid-template-columns:1fr}.source-tab{flex:1;justify-content:center;gap:5px;min-width:0;padding:0 8px;font-size:10px}.source-tab .file-dot,.source-tab .dependency-icon{display:none}.dependencies-panel{padding:16px 12px}.dependency-list li{grid-template-columns:minmax(0,1fr) auto}.dependency-order{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important}}