:root{color-scheme:dark;--bg:#080b0a;--panel:#101512;--editor:#111713;--edge:#29372d;--text:#d9e5dd;--muted:#748279;--green:#8dd9a1;--bright:#b0efba;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--text);font-family:var(--mono);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--bright);outline-offset:7px}
[hidden]{display:none!important}
::selection{background:#376548;color:#effff2}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.entry-gate{position:fixed;inset:0;z-index:5;width:100%;min-height:100svh;border:0;padding:0;background:#05080755;color:var(--text);cursor:pointer;transition:opacity .45s ease,background .45s ease}
.entry-trigger{display:grid;place-items:center;min-height:100svh;padding:24px;list-style:none;cursor:pointer;user-select:none}
.entry-trigger::-webkit-details-marker{display:none}
.entry-prompt{font-size:clamp(19px,2.8vw,27px);font-weight:400;letter-spacing:-.04em;text-shadow:0 0 26px #8dd9a144;animation:prompt-in .7s ease both}
.entry-prompt:after{content:'';display:block;width:28px;height:1px;margin:17px auto 0;background:var(--green);box-shadow:0 0 15px #8dd9a155;animation:prompt-line 2.5s ease-in-out infinite}
.touch-prompt{display:none}
.desktop{--desktop-padding-y:clamp(20px,4svh,58px);--desktop-padding-x:clamp(12px,4vw,72px);position:relative;display:flex;align-items:center;justify-content:center;min-height:100svh;min-height:100dvh;padding:var(--desktop-padding-y) var(--desktop-padding-x);overflow:hidden;filter:blur(16px);transform:scale(.99);transition:filter .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.entry-gate:not([open])~.desktop,body.entered .desktop{filter:blur(0);transform:none}
.entry-gate:not([open]),body.entered .entry-gate{opacity:0;background:transparent;pointer-events:none}
.ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 49% 39%,#22482c33,transparent 60%),linear-gradient(#94bb9c06 1px,transparent 1px),linear-gradient(90deg,#94bb9c06 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;mask-image:linear-gradient(transparent,#000 18%,#000 85%,transparent)}
.ambient:before,.ambient:after{content:'+';position:absolute;font-size:17px;font-weight:300;color:#55755f;top:13%;left:9%}
.ambient:after{top:auto;left:auto;right:9%;bottom:13%}
.ambient>span{position:absolute;top:16%;left:4%;width:1px;height:150px;background:linear-gradient(transparent,#76b68755,transparent)}
.ambient>span+span{top:auto;left:auto;right:4%;bottom:16%}
.workspace{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;height:calc(100svh - 2 * var(--desktop-padding-y));height:calc(100dvh - 2 * var(--desktop-padding-y));min-height:700px}
.workspace-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 21px;font-size:11px;letter-spacing:.025em;color:var(--muted)}
.workspace-path{color:#a2b7a8}
.path-mark{color:var(--green)}
.workspace-indicator{display:flex;align-items:center;gap:8px;font-size:10px}
.workspace-indicator i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 9px #8dd9a166}
.editor-window{display:flex;flex:1;flex-direction:column;min-height:0;background:var(--panel);border:1px solid #3a4b3e;border-radius:12px;box-shadow:0 32px 100px #0006,0 0 90px #4876580c,inset 0 1px #b8d5c70c;overflow:hidden}
.window-bar{height:45px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 18px;background:#171f19;border-bottom:1px solid var(--edge)}
.window-dots{display:flex;flex-shrink:0;gap:7px;width:64px}
.window-dots i{width:8px;height:8px;border-radius:50%;background:#546259}
.window-dots i:first-child{background:#9cb5a3}
.window-dots i:nth-child(2){background:#718d79}
.window-dots i:last-child{background:#3f654c}
.window-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#7e9384;letter-spacing:.02em}
.window-layout{width:15px;height:15px;color:#748e7d;margin-left:0}
.editor-layout{display:grid;flex:1;grid-template-columns:200px minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0}
.project-panel{min-height:0;padding-top:18px;background:#101612;border-right:1px solid var(--edge);font-size:11px;color:#9aaea0}
.project-heading{display:flex;justify-content:space-between;padding:0 15px 20px;color:#7c8f82;font-size:9px;letter-spacing:.09em}
.project-heading>span+span{font-size:14px;line-height:9px;letter-spacing:0}
.project-folder{display:flex;align-items:center;gap:7px;width:100%;border:0;background:transparent;text-align:left;padding:9px 15px;margin-bottom:3px;transition:background .18s,color .18s}
.project-folder:hover{background:#21322766;color:#d0e6d7}
.folder-chevron{width:12px!important;height:12px!important;transform:rotate(90deg);transition:transform .2s}
.project-folder[aria-expanded=false] .folder-chevron{transform:rotate(0)}
.project-files{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .22s ease,opacity .18s ease}
.project-files.is-collapsed{grid-template-rows:0fr;opacity:0}
.project-files-inner{min-height:0;max-height:min(55dvh,480px);overflow:auto;scrollbar-width:thin;scrollbar-color:#3b5945 transparent}
.project-folder>svg{width:15px;height:15px;color:#7ba189}
.project-file{display:flex;align-items:center;gap:8px;width:100%;border:0;border-left:2px solid transparent;padding:10px 13px 10px 39px;background:transparent;color:#8ba994;text-align:left;transition:background .18s,color .18s,border-color .18s}
.project-file:hover{background:#21322766;color:#e2f2e7}
.project-file.is-active{background:#21322788;color:#c1d8c8;border-left-color:#7cb98b}
.py-small{flex-shrink:0;font-size:10px;font-weight:600;color:#8ac49a}
.file-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--editor)}
.tabs{display:flex;height:49px;min-height:49px;overflow-x:auto;overflow-y:hidden;background:#131b16;border-bottom:1px solid var(--edge);scrollbar-width:thin;scrollbar-color:#3b5945 transparent}
.tabs:after{content:'';flex:1;min-width:8px}
.file-tab{display:flex;flex:0 0 auto;align-items:center;gap:8px;min-width:150px;max-width:320px;margin:0;padding:0 10px;border-top:2px solid transparent;border-right:1px solid var(--edge);background:#131b16;font-size:12px;font-weight:400;color:#819c89}
.file-tab.is-active{border-top-color:var(--green);background:var(--editor);color:#dfebe2}
.file-tab.is-modified .file-label:after{content:' •';color:#a9b1ac}
.tab-select{display:flex;flex:1;align-items:center;gap:10px;min-width:0;max-width:260px;height:100%;padding:0 4px;border:0;background:transparent;text-align:left}
.tab-select:focus-visible,.tab-close:focus-visible{outline-offset:-2px}
.file-tab:has(.tab-select:focus-visible){box-shadow:inset 0 0 0 1px var(--green)}
.py-icon{font-size:10px;font-weight:600;line-height:18px;color:var(--green)}
.tab-close{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;margin-left:auto;padding:0;border:0;border-radius:5px;background:transparent;font:18px/1 var(--mono);color:#7e9a88;transition:color .18s,background .18s}
.tab-close:hover{color:#dfebe2;background:#304537}
.window-bar,.tabs,.terminal,.status-bar{flex-shrink:0}
.editor-surface{display:flex;flex:1;flex-direction:column;min-height:350px;overflow:hidden}
.file-pane,.empty-editor{flex:1;min-width:0;min-height:0}
.file-pane{display:flex;flex-direction:column}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.editor-toolbar{display:flex;flex-shrink:0;align-items:center;gap:10px;min-height:48px;padding:6px 14px 0 0}
.editor-toolbar .breadcrumb{flex:1;min-width:0;padding-top:0}
.editor-actions{display:flex;flex-shrink:0;gap:7px}
.editor-tool{min-width:54px;min-height:36px;padding:6px 11px;border:1px solid #444b47;border-radius:6px;background:#292e2b;color:#d1d6d3;font-size:11px;line-height:1.2}
.editor-tool:hover{background:#3a413d;border-color:#68736c}
.editor-tool:focus-visible{outline-offset:2px}
.reset-editor{min-width:68px;background:#383d3a;border-color:#59615c}
.code-link{color:#9fc9db;text-decoration:underline;text-decoration-color:#688b9b;text-underline-offset:3px;overflow-wrap:normal}
.code-link:hover{color:#d1effb;text-decoration-color:currentColor}
.code-link:focus-visible{outline:1px solid var(--green);outline-offset:2px}
.edit-surface{--edit-font-size:clamp(14px,1.65vw,18px);--edit-line-height:max(34px,calc(var(--edit-font-size) * 1.9));display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}
.edit-gutter{flex:0 0 61px;min-height:0;padding:24px 23px 22px 0;overflow:hidden;text-align:right;font-size:11px;line-height:var(--edit-line-height);color:#435b4b;user-select:none}
.edit-gutter span{display:block;height:var(--edit-line-height)}
.editor-input{display:block;flex:1;width:0;min-width:0;min-height:0;margin:0;padding:24px 23px 22px 0;resize:none;border:0;border-radius:0;outline:none;background:var(--editor);color:var(--text);caret-color:var(--bright);font:var(--edit-font-size)/var(--edit-line-height) var(--mono);white-space:pre;tab-size:4;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3b5945 transparent;-webkit-text-fill-color:var(--text)}
.edit-surface:focus-within{outline:1px solid #8dd9a133;outline-offset:-1px}
.file-pane:focus-visible,.code-editor:focus-visible{outline:1px solid var(--green);outline-offset:-2px}
.empty-editor{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:350px;gap:12px;padding:30px;text-align:center}
.empty-file-icon{font-size:37px;color:#345640;letter-spacing:-.1em}
.empty-editor h1{margin:0;font-size:14px;font-weight:400;color:#9cbaa6}
.empty-editor p{max-width:240px;margin:0;font-size:10px;line-height:1.8;color:#5f7f6a}
.empty-editor strong{font-weight:400;color:#91b39d}
.breadcrumb{display:flex;flex-shrink:0;gap:10px;align-items:center;padding:13px 23px 0;font-size:10px;color:#677e6e;white-space:nowrap;overflow:hidden}
.breadcrumb>span{color:#4d6456}
.code-editor{flex:1;min-height:0;padding:24px 23px 22px 0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3b5945 transparent}
.code-row{display:flex;align-items:center;min-width:max-content;min-height:34px;font-size:clamp(14px,1.65vw,18px);line-height:1.9;white-space:pre}
.line-number{flex:0 0 61px;text-align:right;padding-right:23px;font-size:11px;color:#435b4b;user-select:none}
.code-row>code{display:block;flex-shrink:0;font:inherit;white-space:pre;tab-size:4}
.variable{color:#d5e7da}
.operator{color:#839e8c}
.string{color:#95c98e}
.number{color:#d0b98d}
.comment{color:#577c61;font-size:13px;font-style:italic}
.blank-row{min-height:20px;line-height:20px}
.cursor-row{background:#a6dcb006;margin-right:-23px}
.cursor-row .line-number{color:#90b99b}
.code-caret{display:inline-block;height:1.2em;width:1px;margin-left:1px;vertical-align:-.2em;background:#a0d5ab;animation:caret 1.15s step-end infinite}
.terminal{border-top:1px solid var(--edge);background:#0e1510}
.terminal-tabs{display:flex;align-items:center;gap:23px;height:39px;padding:0 21px;border-bottom:1px solid #223026;font-size:10px}
.terminal-tab{display:flex;align-items:center;align-self:stretch;border-bottom:1px solid var(--green);color:#d0e2d6}
.terminal-tab.inactive{border:0;color:#5c7765}
.terminal-symbol{margin-left:auto;color:#5a7763;font-size:13px}
.terminal-body{padding:16px 21px 15px;font-size:11px;line-height:1.8;overflow-wrap:anywhere}
.terminal-body p{margin:0}
.terminal-user{color:#9ad0a8}
.terminal-muted{color:#526c5b}
.terminal-host{color:#8da796}
.terminal-directory{color:#89acbb}
.terminal-output{color:#60836b;font-size:10px;margin-top:7px!important}
.terminal-prompt{display:flex;align-items:center;gap:9px;margin-top:5px!important;color:#92c89f}
.terminal-caret{width:6px;height:12px;background:#8dd9a199;animation:caret 1.15s step-end infinite}
.status-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:31px;padding:0 14px;background:#19271e;border-top:1px solid #314a39;color:#95b8a0;font-size:9px}
.branch,.file-status{display:flex;align-items:center;gap:17px}
.branch{gap:6px}
.branch svg{width:12px;height:12px;color:#8cc69b}
.status-check{margin-left:14px;color:#8cc69b}
.language{color:#c0dcc8}
.profile-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:23px auto 0}
.profile-links a{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #2e4435;border-radius:7px;font-size:10px;color:#a4bdac;text-decoration:none;background:#0f191266;transition:background .2s,border-color .2s,color .2s,transform .2s}
.profile-links a:after{content:'↗';color:#72977e;font-size:11px}
.profile-links a:hover{background:#1a2d20;border-color:#659472;color:#d6efde;transform:translateY(-2px)}
.workspace-bottom{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:29px}
.bottom-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,#49695288)}
.bottom-line:last-child{transform:scaleX(-1)}
.bottom-mark{font-size:11px;color:#55775e;letter-spacing:.06em}
.noscript-message{position:fixed;bottom:30px;left:20px;right:20px;z-index:6;text-align:center;font-size:12px;color:#c2ddcb}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes prompt-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes prompt-line{0%,100%{opacity:.45;transform:scaleX(.7)}50%{opacity:1;transform:scaleX(1)}}
@media(pointer:coarse){.desktop-prompt{display:none}.touch-prompt{display:inline}}
@media(max-width:700px){.desktop{--desktop-padding-y:20px;--desktop-padding-x:16px}.project-panel{display:block;padding:9px 0 7px;border-right:0;border-bottom:1px solid var(--edge)}.project-heading{display:none}.project-folder{min-height:40px;margin:0;padding:7px 14px}.project-file{min-height:40px;padding:8px 14px 8px 43px}.editor-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.workspace-top{padding-bottom:16px}.workspace-indicator{font-size:8px}.workspace-path{font-size:10px}.file-tab{min-width:158px}.code-row{font-size:16px;min-height:37px}.line-number{flex-basis:41px;padding-right:13px;font-size:10px}.code-editor{padding-top:20px;padding-right:16px;padding-bottom:18px}.cursor-row{margin-right:-16px}.blank-row{min-height:18px;line-height:18px}.breadcrumb{padding-left:14px}.terminal-tabs{padding:0 15px}.terminal-body{padding:15px}.status-bar{padding:0 11px}.file-status{gap:12px}.cursor-position{display:none}.ambient:before{top:5%;left:6%}.ambient:after{bottom:5%;right:6%}}
@media(max-width:380px){.desktop{--desktop-padding-y:16px;--desktop-padding-x:12px}.workspace-indicator{gap:5px;font-size:7px}.code-row{font-size:14px}.line-number{flex-basis:31px;padding-right:9px}.code-editor{padding-right:11px}.cursor-row{margin-right:-11px}.window-bar{padding:0 13px}.window-path{font-size:9px}.window-layout{margin-left:30px}.window-dots{width:45px}.comment{font-size:12px}.terminal-tabs{gap:18px}.profile-links{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.desktop{transform:none}.code-caret,.terminal-caret{opacity:1}}
@media(forced-colors:active){.file-tab,.project-file,.profile-links a{border:1px solid CanvasText}.entry-gate{background:Canvas}.code-caret,.terminal-caret{background:CanvasText}}

.desktop[inert] .code-caret,.desktop[inert] .terminal-caret,.is-hidden .code-caret,.is-hidden .terminal-caret,.is-hidden .entry-prompt:after{animation-play-state:paused}

.project-file:focus-visible,.project-folder:focus-visible{outline-offset:-3px}
@media(max-width:700px){.editor-surface,.empty-editor{min-height:310px}.tab-close{width:32px;height:32px}}
@media(max-width:700px){.workspace{min-height:790px}.project-files-inner{max-height:80px}.file-tab{min-width:150px}.tab-close{width:36px;height:36px}}
@media(max-width:700px){.editor-toolbar{min-height:48px;padding-right:10px;gap:6px}.editor-tool{min-height:40px}.edit-surface{--edit-font-size:16px;--edit-line-height:37px}.edit-gutter{flex-basis:41px;padding:20px 13px 18px 0;font-size:10px}.editor-input{padding:20px 16px 18px 0}}
@media(max-width:380px){.edit-surface{--edit-font-size:14px}.edit-gutter{flex-basis:31px;padding-right:9px}.editor-input{padding-right:11px}}
