/* Terminal first. "run sandbox" folds the terminal to the right 25% and opens the sand lobby on the left 75%.
   Colors come from the active theme and are set on :root by script. */
:root{
  --bg:#140d04; --bg2:#0d0802; --glow:#ffb000; --dim:#a8741a; --hi:#ffe2a0; --err:#ff6a3d;
  --mono:"VT323", ui-monospace, Menlo, monospace;
  --stamp:"Silkscreen", ui-monospace, monospace;
  --plain:"Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--glow);font:21px/1.25 var(--mono);text-shadow:0 0 6px color-mix(in srgb,var(--glow) 55%,transparent);overflow:hidden;transition:background .4s}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));animation:flick 4s infinite}
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.85}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
.shell{display:flex;height:100%}
/* left panel: holds the sandbox, with the resume layered over it when that view is open */
#left{flex:0 0 0%;position:relative;overflow:hidden;transition:flex-basis .7s cubic-bezier(.65,0,.25,1)}
#world{position:absolute;inset:0;overflow:hidden;background:var(--bg2);touch-action:none;user-select:none;-webkit-user-select:none}
#resume{position:absolute;inset:0;z-index:5;background:var(--bg);display:flex;flex-direction:column}
#resume .rin{flex:1;overflow-y:auto;padding:22px 24px 36px max(16px,env(safe-area-inset-left,0px))}
.rcol{max-width:780px;margin:0 auto;display:grid;gap:20px}
.rcol h1{margin:0;font:400 clamp(44px,6vw,68px)/.95 var(--mono);color:var(--hi)}
.rsec{display:grid;gap:6px}
.rsec h2{margin:0;font:400 20px var(--mono);color:var(--dim);border-bottom:1px dashed color-mix(in srgb,var(--glow) 30%,transparent);padding-bottom:2px}
.rrow{display:flex;justify-content:space-between;gap:4px 14px;flex-wrap:wrap}
.rrow b{font-weight:400;color:var(--hi)}
.rsec ul{margin:0;padding-left:22px}
.rsec p{margin:0}
body.open #left{flex-basis:75%}
#sand{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}
.wtop{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px 0 max(14px,env(safe-area-inset-left,0px));color:var(--dim);font-size:18px;pointer-events:none}
.wtop b{color:var(--glow);font-weight:400}
.wtop .tbtn{pointer-events:auto;font-size:17px;background:var(--bg2)}
.whint{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:2;width:max-content;max-width:calc(100% - 24px);text-align:center;color:var(--glow);font-size:18px;pointer-events:none;padding:1px 10px;background:color-mix(in srgb,var(--bg2) 80%,transparent);border:1px solid color-mix(in srgb,var(--glow) 25%,transparent)}
#world.flipped .whint{top:auto;bottom:max(10px,env(safe-area-inset-bottom,0px))}
.crate{position:absolute;left:0;top:0;z-index:1;background:var(--bg);border:2px solid var(--glow);box-shadow:0 0 14px color-mix(in srgb,var(--glow) 35%,transparent),5px 5px 0 rgba(0,0,0,.5);cursor:grab;touch-action:none;will-change:transform;display:flex;flex-direction:column}
.crate:active{cursor:grabbing}
.crate .bar{background:var(--glow);color:var(--bg);text-shadow:none;padding:0 6px;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crate .bd{padding:4px 8px 6px;display:flex;flex-direction:column;justify-content:space-between;flex:1;min-height:0}
.crate b{font-weight:400;color:var(--hi);font-size:22px;line-height:1}
.crate.sm .bar{font-size:15px} .crate.sm b{font-size:18px} .crate.sm span{font-size:14px}
.crate span{color:var(--dim);font-size:16px}
.shake{animation:shake .5s linear}
@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,4px)}}
/* terminal */
#term{flex:1 1 0;min-width:0;display:flex;flex-direction:column;position:relative;transition:box-shadow .7s}
body.open #term{box-shadow:inset 2px 0 0 var(--dim),-10px 0 30px rgba(0,0,0,.45);font-size:19px}
.tbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid color-mix(in srgb,var(--glow) 25%,transparent);color:var(--dim);font-size:18px}
.tbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tbtn{font:inherit;font-size:18px;color:var(--glow);background:transparent;border:1px solid var(--dim);padding:1px 10px;cursor:pointer;text-shadow:inherit;white-space:nowrap}
.tbtn:hover,.tbtn:focus-visible{background:var(--glow);color:var(--bg);outline:none;text-shadow:none}
#scr{flex:1;overflow-y:auto;padding:14px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.ln{white-space:pre-wrap;word-break:break-word;min-height:1.25em}
.dim{color:var(--dim)} .hi{color:var(--hi)} .err{color:var(--err)}
.lnk{cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.lnk:hover{color:var(--hi);text-decoration-color:currentColor}
.go{margin-top:6px}
.row{display:flex;gap:8px;align-items:center}
#cmd{flex:1;min-width:0;background:transparent;border:none;color:var(--hi);font:inherit;text-shadow:inherit;caret-color:var(--glow);outline:none}
pre{margin:0;font:inherit;line-height:1}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:10px max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));border-top:1px solid color-mix(in srgb,var(--glow) 30%,transparent)}
.chips .tbtn{font-size:17px}
/* project page */
.page{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column;animation:pin .25s ease-out}
@keyframes pin{from{opacity:0;transform:translateY(12px)}}
.page .tbar{flex:none}
.pin{flex:1;overflow-y:auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.pin .col{max-width:860px;margin:0 auto;display:grid;gap:16px}
.pin h1{margin:0;font:400 clamp(44px,8vw,88px)/.9 var(--mono);color:var(--hi);text-wrap:balance}
.clip{aspect-ratio:16/9;max-width:100%;border:1px dashed var(--dim);display:grid;place-items:center;color:var(--dim);background:repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--glow) 6%,transparent) 12px 24px)}
.secs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:720px){.secs{grid-template-columns:1fr}}
.secs h2{margin:0 0 4px;font:400 18px var(--mono);color:var(--dim)}
.secs p{margin:0;color:var(--glow)}
.pnav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* skip the fun */
/* plain view: dark by default, accent follows the terminal theme; .light keeps the accent */
.plain{--pbg:var(--pd-bg);--psf:var(--pd-sf);--pfg:var(--pd-fg);--pmu:var(--pd-mu);--pac:var(--pd-ac);--pln:var(--pd-ln);
  position:fixed;inset:0;z-index:50;overflow-y:auto;background:var(--pbg);color:var(--pfg);font:16px/1.6 var(--plain);text-shadow:none;padding-block:24px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));animation:pfade .5s ease-out;transition:background .35s,color .35s}
.plain.light{--pbg:var(--pl-bg);--psf:var(--pl-sf);--pfg:var(--pl-fg);--pmu:var(--pl-mu);--pac:var(--pl-ac);--pln:var(--pl-ln);color-scheme:light}
@keyframes pfade{from{opacity:0}}
.plain .col{max-width:680px;margin:0 auto;display:grid;gap:22px}
.plain .ptop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.plain h1{margin:0;font-size:36px;line-height:1.1;color:var(--pac)}
.plain .lead{margin:0;color:var(--pmu)}
.plain article{border-top:1px solid var(--pln);padding-top:14px;display:grid;gap:4px}
.plain h2{margin:0;font-size:19px}
.plain .meta{color:var(--pmu);font-size:14px}
.plain p{margin:0}
.plain b{color:var(--pac)}
.plain button{font:700 14px var(--plain);background:var(--psf);color:var(--pfg);border:1px solid var(--pln);padding:8px 14px;cursor:pointer}
.plain button:hover{border-color:var(--pac)}
.plain button:focus-visible{outline:3px solid var(--pac);outline-offset:2px}
.plain .note{font-size:13px;color:var(--pmu)}
@media (max-width:1000px){body.open #left{flex-basis:62%}}
@media (max-width:720px){
  .shell{flex-direction:column}
  body.open #left{flex-basis:56%}
  body.open #term{box-shadow:inset 0 2px 0 var(--dim)}
}