@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/pixelify-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/pixelify-sans-latin-700-normal.woff2") format("woff2")}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: one retro program window floating on a teal desktop; toolbox left, canvas well center, palette and status bar below. Single deliberate light look. */
:root{
  --desk:#008080; --face:#c0c0c0; --face-lt:#dfdfdf; --hi:#ffffff; --lo:#808080; --dk:#000000;
  --title1:#000080; --title2:#1084d0; --well:#808080; --ink:#000000; --sel:#000080; --sel-ink:#ffffff;
  --ui:Tahoma,"Segoe UI","MS Sans Serif",Geneva,Verdana,sans-serif;
  --pix:"Pixelify Sans","Courier New",monospace;
  color-scheme:light;
}
html,body{height:100%}
html{background:#000040}
body{background:#000040;color:var(--ink);font:12px/1.3 var(--ui);-webkit-font-smoothing:none}
*{box-sizing:border-box}
.desk{position:relative;z-index:2;min-height:100%;padding-top:16px;padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:grid;grid-template-columns:auto minmax(0,1000px);justify-content:center;align-items:start;gap:24px}
.backdrop{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,#000040 0%,var(--title1) 38%,#006070 72%,var(--desk) 100%)}
.icons{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.dicon{width:84px;background:none;border:0;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default;color:#fff}
.dicon svg{width:36px;height:36px;shape-rendering:crispEdges;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45))}
.dicon span{font:12px/1.25 var(--ui);text-align:center;padding:1px 4px;text-shadow:1px 1px 0 #000;background:rgba(0,0,64,.55)}
.dicon:hover span{background:rgba(0,0,128,.55)}
.dicon:focus-visible{outline:none}
.dicon:focus-visible span,.dicon:active span{background:var(--sel);outline:1px dotted #ffff00;text-shadow:none}
.dicon:active svg{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45)) brightness(.7) sepia(1) hue-rotate(190deg) saturate(4)}
.task.on{font-weight:700}
@media (max-width:900px){
  .desk{grid-template-columns:minmax(0,1fr);gap:12px}
  .icons{flex-direction:row;flex-wrap:wrap;gap:4px;padding-top:0}
  .dicon{width:72px}
  .dicon svg{width:28px;height:28px}
}
.win{background:var(--face);width:100%;max-width:1000px;padding:3px;display:flex;flex-direction:column;gap:2px;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--face-lt),inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
.raised{box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--face-lt)}
.sunken{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--face-lt),inset 2px 2px var(--dk)}
.titlebar{background:linear-gradient(90deg,var(--title1),var(--title2));color:#fff;font-weight:700;display:flex;align-items:center;gap:6px;padding:3px 3px 3px 4px;user-select:none}
.titlebar .ico{width:16px;height:16px;flex:none}
.titlebar .name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtn{width:16px;height:14px;background:var(--face);display:grid;place-items:center;flex:none}
.tbtn svg{display:block}
.menubar{display:flex;gap:0;padding:1px 0;position:relative;flex-wrap:wrap}
.menu{position:relative}
.menu>button{background:none;border:0;font:inherit;color:inherit;padding:3px 8px;cursor:default}
.menu>button:focus-visible,.menu.open>button{background:var(--sel);color:var(--sel-ink);outline:none}
.menu>button u{text-decoration:underline}
.drop{position:absolute;top:100%;left:0;z-index:30;background:var(--face);min-width:180px;padding:3px;display:none}
.menu.open .drop{display:block}
.drop button{display:flex;justify-content:space-between;gap:24px;width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;padding:4px 20px;cursor:default}
.drop button:hover:not(:disabled),.drop button:focus-visible{background:var(--sel);color:var(--sel-ink);outline:none}
.drop button:disabled{color:var(--lo);text-shadow:1px 1px var(--hi)}
.drop hr{border:0;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:3px 2px}
.main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px}
.toolbox{display:flex;flex-direction:column;gap:6px;padding:3px 2px}
.tools{display:grid;grid-template-columns:repeat(2,26px);gap:0}
.tool{width:26px;height:26px;background:var(--face);border:0;padding:0;display:grid;place-items:center;cursor:default}
.tool svg{width:16px;height:16px;shape-rendering:crispEdges}
.tool[aria-pressed="true"]{background:repeating-conic-gradient(var(--face) 0 25%,var(--hi) 0 50%) 0 0/2px 2px;
  box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--face-lt),inset 2px 2px var(--dk)}
.tool:not([aria-pressed="true"]){box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--face-lt)}
.tool:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}
.opts{width:52px;min-height:66px;padding:4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.opt{width:40px;height:14px;border:0;background:none;display:grid;place-items:center;cursor:default;padding:0}
.opt[aria-pressed="true"]{background:var(--sel)}
.opt span{display:block;background:var(--ink)}
.opt[aria-pressed="true"] span{background:var(--sel-ink)}
.aibtn{font:700 12px var(--ui);background:var(--face);border:0;padding:6px 2px;width:52px;cursor:default;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--title1)}
.aibtn:active:not(:disabled){box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.aibtn:disabled{color:var(--lo);text-shadow:1px 1px var(--hi)}
.aibtn:focus-visible{outline:1px dotted var(--ink);outline-offset:-4px}
.well{background:var(--well);padding:6px;overflow:hidden;min-height:120px;position:relative}
.stage{position:relative;display:inline-block;max-width:100%;line-height:0}
canvas#c{display:block;width:640px;height:400px;max-width:none;background:#fff;image-rendering:pixelated;touch-action:none;cursor:crosshair}
.handle{position:absolute;width:4px;height:4px;background:var(--title1)}
.textin{position:absolute;z-index:5;font-family:var(--pix);border:1px dashed var(--title1);background:rgba(255,255,255,.6);padding:0 2px;line-height:1.1;min-width:80px;outline:none}
.palette{display:flex;align-items:center;gap:6px;padding:4px 2px;flex-wrap:wrap}
.current{position:relative;width:32px;height:32px;flex:none;background:repeating-conic-gradient(var(--face) 0 25%,var(--hi) 0 50%) 0 0/2px 2px}
.current i{position:absolute;width:14px;height:14px;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi),0 0 0 1px var(--face)}
.current .p{left:6px;top:6px;z-index:1}
.current .s{left:14px;top:14px}
.swatches{display:grid;grid-template-columns:repeat(14,18px);grid-auto-rows:18px;gap:0}
.sw{border:0;padding:0;width:18px;height:18px;cursor:default;
  box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi),inset 2px 2px var(--dk),inset -2px -2px var(--face-lt)}
.sw:focus-visible{outline:1px dotted var(--ink);outline-offset:-4px}
.palhint{color:#404040;min-width:0}
.status{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:2px}
.status>div{padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

/* Dialog */
.dlg{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));background:var(--face);padding:3px;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--face-lt),inset -2px -2px var(--lo),inset 2px 2px var(--hi),4px 4px 0 rgba(0,0,0,.35)}
.dlg .body{padding:12px;display:flex;flex-direction:column;gap:10px}
.dlg label{display:block}
.dlg textarea{width:100%;min-height:72px;resize:vertical;font:13px/1.35 var(--ui);padding:5px;border:0;background:#fff;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.morechip{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--title1);flex:none}
.ideashead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:-4px}
.chip{font:inherit;background:var(--face);border:0;padding:3px 7px;cursor:default;color:var(--ink)}
.chip:focus-visible,.btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-4px}
.row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.btn{font:inherit;min-width:76px;padding:5px 10px;background:var(--face);border:0;cursor:default;color:var(--ink)}
.btn:active:not(:disabled){box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.btn:disabled{color:var(--lo);text-shadow:1px 1px var(--hi)}
.btn.default{outline:1px solid var(--dk)}
.check{display:flex;align-items:center;gap:6px}
.progress{height:18px;padding:2px;display:flex;gap:2px;overflow:hidden}
.progress b{width:9px;flex:none;background:var(--title1)}
.note{color:#303030;min-height:1.3em}
.note.err{color:#800000}
.saveimg{max-width:100%;image-rendering:pixelated;border:1px solid var(--lo)}

@media (max-width:720px){
  .main{grid-template-columns:minmax(0,1fr)}
  .toolbox{flex-direction:row;flex-wrap:wrap;align-items:center}
  .tools{grid-template-columns:repeat(11,26px)}
  .opts{flex-direction:row;width:auto;min-height:0;height:30px;padding:4px 6px}
  .opt{width:22px;height:20px}
  .aibtn{flex-direction:row;width:auto;padding:5px 10px;gap:6px}
  .well{padding:4px}
  .status{grid-template-columns:minmax(0,1fr) 92px}
  .status .size{display:none}
  .palhint{display:none}
  .swatches{grid-template-columns:repeat(14,minmax(0,18px))}
}
@media (max-width:420px){ .tools{grid-template-columns:repeat(6,26px)} .swatches{grid-template-columns:repeat(14,15px);grid-auto-rows:16px} .sw{width:15px;height:16px} }
@media (prefers-reduced-motion:reduce){ .progress b{transition:none} }

/* ---------- Landing ---------- */
.landing{position:fixed;inset:0;z-index:100;overflow-y:auto;overflow-x:hidden;background:transparent;color:#fff}
.landing.leaving{animation:leave .45s steps(6) forwards}
@keyframes leave{to{transform:scale(1.08);opacity:0}}
#three{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:1;pointer-events:none}
.scan{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.l-inner{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;align-items:center;gap:28px;
  padding-top:max(40px,env(safe-area-inset-top,0px));padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wordwrap{perspective:700px;margin-top:2vh}
.wordmark{font:700 clamp(54px,13vw,148px)/.9 var(--pix);letter-spacing:.02em;color:#ffff00;margin:0;text-align:center;
  transform-style:preserve-3d;animation:sway 6s ease-in-out infinite;
  text-shadow:1px 1px 0 #ff8040,2px 2px 0 #ff8040,3px 3px 0 #ff0080,4px 4px 0 #ff0080,5px 5px 0 #800080,6px 6px 0 #800080,7px 7px 0 #000080,8px 8px 0 #000080,10px 12px 0 rgba(0,0,0,.45)}
.wordmark sup{font-size:.42em;color:#00ffff;vertical-align:top;margin-left:.08em;text-shadow:1px 1px 0 #0080ff,2px 2px 0 #0080ff,3px 3px 0 #000080,4px 4px 0 #000080}
@keyframes sway{0%,100%{transform:rotateY(-14deg) rotateX(6deg)}50%{transform:rotateY(14deg) rotateX(-4deg)}}
.welcome{width:min(560px,100%);color:var(--ink)}
.welcome .body{padding:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--face)}
.cubebox{width:76px;height:76px;perspective:300px;margin:6px 4px}
.cube{position:relative;width:56px;height:56px;margin:10px;transform-style:preserve-3d;animation:spin 7s linear infinite}
.cube div{position:absolute;inset:0;display:grid;place-items:center;border:2px solid #000;image-rendering:pixelated}
.cube svg{width:36px;height:36px;shape-rendering:crispEdges}
.cube .f1{transform:translateZ(28px);background:#ffff80}.cube .f2{transform:rotateY(90deg) translateZ(28px);background:#80ffff}
.cube .f3{transform:rotateY(180deg) translateZ(28px);background:#ff8040}.cube .f4{transform:rotateY(-90deg) translateZ(28px);background:#00ff80}
.cube .f5{transform:rotateX(90deg) translateZ(28px);background:#ff00ff}.cube .f6{transform:rotateX(-90deg) translateZ(28px);background:#c0c0c0}
@keyframes spin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
.welcome h2{font:700 15px var(--ui);margin:0 0 6px;text-wrap:balance}
.welcome p{margin:0 0 8px;max-width:52ch;color:#202020;font-size:13px;line-height:1.45}
.welcome .row{justify-content:flex-start;margin-top:6px;grid-column:1/-1}
.welcome .btn{font-size:13px;padding:7px 14px;font-weight:700}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(860px,100%)}
.fw{color:var(--ink)}
.fw .body{background:var(--face);padding:12px;display:flex;gap:10px;align-items:flex-start}
.fw .body svg{width:32px;height:32px;flex:none;shape-rendering:crispEdges}
.fw p{margin:0;font-size:12.5px;line-height:1.45;min-width:0}
.fw b{display:block;margin-bottom:3px}
.marquee{width:min(860px,100%);overflow:hidden;background:#000;color:#00ff00;font:16px var(--pix);padding:5px 0;white-space:nowrap}
.marquee span{display:inline-block;padding-left:100%;animation:mq 22s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
.pbfoot{width:min(860px,100%);display:flex;flex-direction:column;gap:0;margin-top:12px}
.rainbow{height:12px;background:linear-gradient(90deg,#ff0000 0 14.28%,#ff8040 0 28.57%,#ffff00 0 42.85%,#00ff00 0 57.14%,#00ffff 0 71.42%,#0000ff 0 85.71%,#ff00ff 0);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 12px);mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 12px)}
.footwin{color:var(--ink);width:100%}
.footgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:6px;padding:8px}
.resmark{display:inline-flex;align-items:center;gap:7px;padding:2px 4px 4px 0}
.resmark svg{display:block;fill:#17312f;filter:drop-shadow(2px 2px 0 #cbff54)}
.resglyph{height:22px;width:auto}
.respix{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.resmark.pixeled svg{display:none}
.resmark{text-decoration:none;cursor:pointer;transition:transform .1s steps(2)}
.resmark:hover{transform:translate(-1px,-1px)}
.resmark:active{transform:translate(1px,1px)}
.resmark:focus-visible{outline:1px dotted #000;outline-offset:3px}

/* ---------- Hover states ---------- */
.btn,.startbtn,.aibtn,.chip{cursor:pointer;transition:transform .12s steps(2),box-shadow .12s steps(2),background-color .12s steps(2)}
.btn:hover:not(:disabled),.startbtn:hover,.aibtn:hover:not(:disabled),.chip:hover{
  background:#ffff00;color:var(--title1);transform:translate(-2px,-2px);
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px #808000,inset 2px 2px #ffffc0,3px 3px 0 var(--dk)}
.btn:active:not(:disabled),.startbtn:active,.aibtn:active:not(:disabled),.chip:active{
  transform:translate(1px,1px);background:#e0e000;
  box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px #808000}
.btn.default:hover:not(:disabled){outline-color:var(--title1)}
.legal-link{padding:1px 3px;margin:0 -3px;transition:background-color .1s steps(2)}
.legal-link:hover{background:var(--sel);color:#fff;text-decoration:none}
.legal-link:active{background:#ff00ff;color:#fff}
.tool{cursor:pointer}
.tool:not([aria-pressed="true"]):hover{background:var(--hi)}
.opt{cursor:pointer}
.opt:not([aria-pressed="true"]):hover{background:#a0a0d0}
.sw{cursor:pointer;position:relative}
.sw:hover{z-index:2;outline:2px solid var(--dk);outline-offset:0;transform:scale(1.25)}
.tbtn{cursor:pointer}
button.tbtn:hover{background:#ffff00}
button.tbtn:active{box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi)}
.menu>button{cursor:pointer}
.menu:not(.open)>button:hover{box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--hi)}
.drop button:not(:disabled){cursor:pointer}
.dicon{cursor:pointer}
.dicon:hover svg{transform:translateY(-2px)}
.dicon:hover span{background:var(--sel);text-shadow:none}
@media (prefers-reduced-motion:reduce){
  .btn,.startbtn,.aibtn,.chip,.legal-link{transition:none}
  .btn:hover:not(:disabled),.startbtn:hover,.aibtn:hover:not(:disabled),.chip:hover,.dicon:hover svg,.sw:hover{transform:none}
}
.reswm{height:15px;width:auto;max-width:42vw}
.credits{margin:0 8px 8px;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;background:var(--face);
  box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.tag{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:12px/1.3 var(--ui);color:var(--ink);min-width:0}
.tag1>span:first-child{font-weight:700}
.tag .sep{color:var(--lo)}
@media (max-width:520px){ .tag2>span:first-child{flex-basis:100%} .tag2>span:first-child+.sep{display:none} .tag2 .legal-link[data-legal="privacy"]{margin-left:0} }
.legal-link{font:inherit;background:none;border:0;padding:0;color:var(--title1);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.legal-link:hover{color:#ff0080}
.legal-link:focus-visible{outline:1px dotted #000;outline-offset:2px}
.fineprint{flex-basis:100%;margin:0;padding-top:10px;border-top:1px solid var(--lo);box-shadow:0 -1px 0 var(--hi) inset;font-size:11.5px;line-height:1.45;color:#404040}
.legaldlg{z-index:200}
.legalbody{max-height:min(60vh,520px);overflow-y:auto;background:#fff;padding:14px 16px;font-size:12.5px;line-height:1.5}
.legalbody h3{font-size:13px;margin:14px 0 4px}
.legalbody h3:first-child{margin-top:0}
.legalbody p,.legalbody ul{margin:0 0 8px;max-width:62ch}
.legalbody ul{padding-left:18px}
.legalbody .eff{color:#404040;font-style:italic}
.pane{background:var(--face);padding:12px;min-width:0;display:flex;flex-direction:column;gap:8px;
  box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.pane p{margin:0;font-size:12px;line-height:1.5}
.pane .dim{color:#404040;font-style:italic}
.panehead{font-weight:700;font-size:12px}
.minimark{font:700 30px/1 var(--pix);color:var(--title1);text-shadow:2px 2px 0 #ff00ff}
.minimark sup{font-size:.5em;color:#ff0080;text-shadow:1px 1px 0 #000080}
.keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;margin:0;font-size:12px;align-items:center}
.keys dd{margin:0}
kbd{font:700 11px var(--ui);background:var(--face);padding:1px 5px;display:inline-block;color:var(--ink);
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo)}
.odo{display:flex;gap:2px;background:#000;padding:5px;width:max-content;max-width:100%}
.odo span{font:700 26px/1 var(--pix);color:#00ff00;background:#002000;width:22px;text-align:center;padding:3px 0;font-variant-numeric:tabular-nums}
.badges{display:flex;flex-wrap:wrap;gap:8px;padding:4px 8px 10px;justify-content:center}
.badge{width:88px;height:31px;display:grid;place-items:center;text-align:center;font:700 9px/1.05 var(--ui);letter-spacing:.04em;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo)}
.b1{background:var(--title1);color:#ffff00}.b2{background:var(--face);color:#000}.b3{background:#000;color:#00ff00}
.b4{background:#ff00ff;color:#fff}.b5{background:#ff8040;color:#000}.b6{background:#008080;color:#80ffff}
@media (max-width:720px){ .footgrid{grid-template-columns:minmax(0,1fr)} }
.taskbar{position:fixed;left:0;right:0;bottom:0;z-index:3;background:var(--face);color:var(--ink);display:flex;align-items:center;gap:6px;
  padding:3px max(4px,env(safe-area-inset-right,0px)) calc(3px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));
  box-shadow:inset 0 1px var(--face-lt),inset 0 2px var(--hi)}
.startbtn{font:700 12px var(--ui);background:var(--face);border:0;padding:4px 8px;display:flex;align-items:center;gap:5px;cursor:default;color:var(--ink)}
.startbtn:active,.startbtn:focus-visible{outline:1px dotted var(--ink);outline-offset:-4px}
.task{flex:1;min-width:0;max-width:200px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;
  background:repeating-conic-gradient(var(--face) 0 25%,var(--hi) 0 50%) 0 0/2px 2px}
.tray{margin-left:auto;padding:4px 10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.desk.opening .win{animation:open .35s steps(5)}
.desk.closing .win{animation:shut .35s steps(5) forwards}
@keyframes shut{from{transform:scale(1);opacity:1}to{transform:scale(.2);opacity:0}}
.desk.closing .icons,.desk.closing .taskbar{opacity:0;transition:opacity .3s steps(3)}
.landing.arriving{animation:arrive .45s steps(6)}
@keyframes arrive{from{transform:scale(1.08);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes open{from{transform:scale(.2);opacity:.2}to{transform:scale(1);opacity:1}}
@media (max-width:720px){
  .features{grid-template-columns:minmax(0,1fr)}
  .welcome .body{grid-template-columns:minmax(0,1fr)}
  .cubebox{justify-self:center}
  .task{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wordmark,.cube,.marquee span,.landing.leaving,.desk.opening .win,.desk.closing .win,.landing.arriving{animation:none}
  .marquee span{padding-left:0}
}

/* ---------- Fit to screen, maximize, rename (desktop sizes) ---------- */
.opts:empty{display:none}
@media (min-width:721px){
  html,body{height:100%}
  .desk{height:100%;min-height:0;box-sizing:border-box}
  /* The window hugs the canvas; the canvas scales to the space the screen has. */
  .desk{grid-template-columns:auto auto}
  .desk>.win{max-height:100%;min-height:0;width:auto;max-width:100%;justify-self:center}
  .win .main{flex:none;min-height:0;grid-template-columns:auto auto}
  .win .well{height:auto;min-height:0;display:flex;align-items:center;justify-content:center}
  .desk:not(.maxed) .palhint{display:none}
  /* Long status and title text must not stretch the window: they shrink and show an ellipsis instead. */
  #help, #win > .titlebar .name{contain:inline-size}
  .desk:not(.maxed) .status{min-width:0}
  .main>.well{min-width:0}
  .toolbox{min-height:0;overflow:hidden}
}
@media (min-width:721px) and (max-width:1179px){
  .desk{grid-template-columns:auto}
  .desk .icons{display:none}
}
.desk.maxed{grid-template-columns:minmax(0,1fr);padding:0 0 calc(34px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.desk.maxed .icons{display:none}
.desk.maxed>.win{max-width:none;width:100%;height:100%;max-height:100%}
.desk.maxed .win .main{flex:1 1 auto;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.titlebar{cursor:default}
.fname{cursor:text;border-bottom:1px dotted transparent}
.fname:hover{border-bottom-color:currentColor}
.renamebox{font:inherit;color:var(--ink);background:#fff;border:0;padding:0 3px;width:16ch;max-width:60%;outline:1px dotted #000;box-shadow:inset 1px 1px var(--lo)}
.task .fname:hover{border-bottom-color:var(--ink)}
.task{cursor:text}

/* Dialogs can be dragged by their title bar */
.dlg>.titlebar{cursor:move;touch-action:none;user-select:none}
.dlg.dragging{opacity:.92}

/* Newsletter signup */
.signup{width:min(860px,100%);color:var(--ink)}
.signupbody{padding:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--face)}
.mailicon{width:40px;height:40px;shape-rendering:crispEdges}
.signuptext h2{font:700 15px var(--ui);margin:0 0 6px}
.signuptext p{margin:0 0 10px;max-width:60ch;font-size:13px;line-height:1.45;color:#202020}
.signupform{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.signupform input{flex:1 1 220px;min-width:0;font:13px var(--ui);padding:7px 8px;border:0;background:#fff;color:var(--ink)}
.signupform input{transition:background-color .1s steps(2),box-shadow .1s steps(2)}
.signupform input:hover{background:#ffffe8}
.signupform input:focus{outline:1px dotted #000;outline-offset:2px;background:#ffffcc;box-shadow:inset 0 0 0 2px #000080}
.signupform input[aria-invalid="true"]{background:#fff0f0;box-shadow:inset 0 0 0 2px #c00000}
.signupform input.done{background:#f0fff0;box-shadow:inset 0 0 0 2px #008000}
.signupform input:disabled{background:#e8e8e8;color:#808080;cursor:wait}
.signupnote{font-size:12px!important;color:#404040!important;margin:0!important}
.signupnote.ok{color:#006000!important;font-weight:700}
.signupnote.err{color:#800000!important}
.srlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:720px){ .signupbody{grid-template-columns:minmax(0,1fr)} }

/* ---------- Share and gallery ---------- */
.sharedlg{width:min(560px,calc(100vw - 32px))}
.sharegrid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;align-items:start}
.sharepreview{background:var(--well);padding:4px;line-height:0}
.sharepreview img{width:100%;height:auto;image-rendering:pixelated;background:#fff}
.sharefields{display:flex;flex-direction:column;gap:6px;min-width:0}
.sharefields input[type=text],.sharefields input:not([type]),#shareTitle,#shareAuthor{font:13px var(--ui);padding:6px 7px;border:0;background:#fff;color:var(--ink);min-width:0}
.sharefields .dim{color:#505050;font-weight:400}
.sharedone{display:flex;flex-direction:column;gap:10px;min-width:0}
.sharehead{margin:0;font:700 15px var(--ui);color:var(--title1)}
.linkrow{display:flex;gap:6px;min-width:0}
.linkrow input{flex:1 1 auto;min-width:0;font:12px var(--ui);padding:6px;border:0;background:#fff;color:var(--ink)}
.socialrow{display:flex;gap:6px;flex-wrap:wrap}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
/* Gallery page: a full screen exhibition wall */
.gpage{position:fixed;inset:0;z-index:100;overflow-y:auto;overflow-x:hidden;background:transparent;color:#fff}
.gpage.leaving{animation:leave .45s steps(6) forwards}
.gpage.arriving{animation:arrive .45s steps(6)}
.gp-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px;
  padding-top:max(28px,env(safe-area-inset-top,0px));padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.gp-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;width:min(1100px,100%)}
.gp-mark{font:700 clamp(44px,9vw,104px)/.9 var(--pix);margin:0;color:#00ffff;letter-spacing:.02em;
  text-shadow:1px 1px 0 #0080ff,2px 2px 0 #0080ff,3px 3px 0 #ff00ff,4px 4px 0 #ff00ff,5px 5px 0 #800080,6px 6px 0 #000080,8px 9px 0 rgba(0,0,0,.45)}
.gp-mark sup{font-size:.4em;color:#ffff00;vertical-align:top;margin-left:.08em;text-shadow:1px 1px 0 #ff8040,2px 2px 0 #ff0080}
.gp-about{width:min(440px,100%);color:var(--ink);text-align:center}
.gp-about .body{padding:14px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--face)}
.gp-sub{margin:0;max-width:44ch;font-size:13px;line-height:1.5;text-wrap:balance;color:#202020}
.gp-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;color:var(--ink)}
.gp-wall{width:min(1100px,100%);display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:26px 22px}
.gcard{display:flex;flex-direction:column;align-items:stretch;gap:10px;background:none;border:0;padding:0;font:inherit;color:#fff;text-align:center;cursor:pointer;transition:transform .12s steps(2)}
.gcard .frame{padding:10px;background:#804000;
  box-shadow:inset 2px 2px 0 #c08040,inset -2px -2px 0 #402000,inset 0 0 0 6px #a05a10,inset 8px 8px 0 #603000,6px 6px 0 rgba(0,0,0,.4)}
.gcard img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;image-rendering:pixelated;background:#fff}
.gcard .plaque{align-self:center;max-width:100%;background:var(--face);color:var(--ink);padding:5px 10px;display:flex;flex-direction:column;gap:1px;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo)}
.gcard b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard span{font-size:11px;color:#404040;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard:hover{transform:translateY(-4px)}
.gcard:hover .plaque{background:#ffff00}
.gcard:focus-visible{outline:2px dotted #ffff00;outline-offset:4px}
.gskel{aspect-ratio:16/12;background:repeating-conic-gradient(#804000 0 25%,#a05a10 0 50%) 0 0/6px 6px;animation:blink 1s steps(2) infinite;opacity:.6}
@keyframes blink{50%{opacity:.3}}
.gp-empty{width:min(520px,100%);color:var(--ink)}
.gp-empty .body{padding:22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--face)}
.gp-empty .body b{font:700 22px var(--pix);color:var(--title1)}
.gp-empty .body span{font-size:13px;line-height:1.45;color:#202020;max-width:40ch}
.gp-more{display:flex;justify-content:center;color:var(--ink)}
.lightbox{position:fixed;inset:0;z-index:5;background:rgba(0,0,32,.72);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(48px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-win{width:min(760px,100%);max-height:100%;color:var(--ink);overflow:auto}
.lb-body{background:var(--face);padding:14px;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-frame{padding:12px;width:min(664px,100%);box-sizing:border-box;background:#804000;box-shadow:inset 2px 2px 0 #c08040,inset -2px -2px 0 #402000,inset 0 0 0 6px #a05a10,inset 8px 8px 0 #603000;max-width:100%}
.lb-frame img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;max-height:56vh;image-rendering:pixelated;background:#fff}
.lb-plaque{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.lb-plaque b{font:700 18px var(--pix);color:var(--title1)}
.lb-plaque span{font-size:12px;color:#404040}
.lb-actions{justify-content:center}
@media (max-width:560px){ .sharegrid{grid-template-columns:minmax(0,1fr)} .sharepreview{max-width:240px} }
@media (prefers-reduced-motion:reduce){ .gskel{animation:none} .gcard:hover{transform:none} .gpage.leaving,.gpage.arriving{animation:none} }
/* Next.js wrapper around the markup: no box of its own, so nothing moves. */
.pb-root{display:contents}
/* What the page is, for search engines, AI agents and screen readers; never seen. */
.pb-about{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}