:root{
  color-scheme:dark;
  --bg:#0b0b0b;
  --ink:#f6f2ea;
  --muted:#9a978f;
  --screen:#111317;
  --screen-edge:#363942;
  --body:#1a1b1e;
  --body-hi:#24262a;
  --button:#f0dfad;
  --button-shadow:#9c8350;
  --action:#ffad49;
  --action-shadow:#ad6725;
  --accent:#7df6c2;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100svh;overflow-x:hidden}
button{font:inherit;color:inherit}
.page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;padding:18px 16px 16px;background:radial-gradient(circle at 50% 46%,#17171a 0,#0b0b0b 44%,#080808 100%)}
.site-head{width:min(100%,920px);display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:2px 3px 12px}
.wordmark{color:#fff;text-decoration:none;font-size:clamp(22px,4vw,34px);font-weight:1000;letter-spacing:-.04em}
.site-kicker{color:var(--muted);font:800 11px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;text-align:right}
.charm{position:relative;display:grid;place-items:center;padding-top:22px;filter:drop-shadow(0 28px 56px rgba(0,0,0,.54))}
.loop{position:absolute;top:0;width:66px;height:44px;border:10px solid #4a4b50;border-bottom-width:8px;border-radius:34px 34px 12px 12px;background:#17181b;box-shadow:inset 0 0 0 2px #6d6f75,0 3px 0 #080808;z-index:0}
.loop i{position:absolute;inset:8px 13px;border-radius:20px;background:#0b0b0b}
.charm-body{position:relative;z-index:1;width:min(94vw,490px);padding:20px 20px 17px;border:1px solid #34363b;border-radius:42px;background:linear-gradient(155deg,var(--body-hi),#121316 58%,#191a1d);box-shadow:inset 0 1px 0 #ffffff12,inset 0 -6px 18px #0008,0 0 0 7px #090909}
.screen-shell{padding:11px 11px 13px;border-radius:28px;background:#08090b;box-shadow:inset 0 0 0 1px #3a3d43,inset 0 0 0 7px #111216,0 7px 22px #0008}
.screen-status{height:27px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;color:#d9dde5;font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-align:center;text-transform:uppercase;user-select:none}
.status-home{border:0;background:none;color:var(--accent);font:1000 10px/1 ui-monospace,monospace;padding:6px;cursor:pointer;text-align:left}
#screenCount{text-align:right;opacity:.68;padding-right:5px}
.screen{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:15px;background:#111317;box-shadow:inset 0 0 0 2px #282b31,0 0 26px #0009;image-rendering:pixelated}
.launcher{position:absolute;inset:0;padding:14px 14px 10px;display:grid;grid-template-rows:auto 1fr auto;gap:9px;background:radial-gradient(circle at 80% 12%,#2a2442 0,#161525 32%,#111317 68%),linear-gradient(#111317,#111317)}
.launcher-copy{display:grid;gap:2px}
.launcher-copy b{font:1000 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.04em}
.launcher-copy span{font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a8a8b5}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:9px}
.app-icon{min-width:0;border:0;background:transparent;color:#eee;display:grid;justify-items:center;gap:5px;padding:0;cursor:pointer;outline:none}
.app-tile{position:relative;width:min(72px,18vw);aspect-ratio:1;border-radius:17px;display:grid;place-items:center;background:var(--tile,#313440);box-shadow:inset 0 0 0 1px #ffffff26,inset 0 -9px 18px #0002,0 6px 13px #0005;transition:transform .09s,outline .09s,filter .09s}
.app-icon.selected .app-tile{outline:3px solid #f6e8ad;outline-offset:2px;transform:translateY(-1px);filter:brightness(1.12)}
.app-glyph{font:1000 clamp(20px,7vw,33px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-shadow:0 2px 0 #0005}
.app-icon small{display:block;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#dfe0e5;letter-spacing:.03em}
.launcher-hint{font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;color:#777b86;letter-spacing:.08em}
.app-stage{position:absolute;inset:0;background:#000}
.app-stage iframe{width:100%;height:100%;border:0;display:block;background:#000;image-rendering:pixelated}
.screen-back{position:absolute;left:7px;top:7px;z-index:8;width:26px;height:26px;border:1px solid #ffffff30;border-radius:50%;background:#0009;color:#fff;font:1000 22px/20px system-ui;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);opacity:.7}
.screen-back:active{transform:translateY(1px)}
.controls{margin:13px auto 0;display:grid;grid-template-columns:1fr 74px;align-items:center;gap:16px;width:min(100%,360px)}
.dpad{display:grid;grid-template-columns:repeat(3,67px);grid-template-rows:repeat(3,56px);justify-content:center;align-items:center;filter:drop-shadow(0 6px 0 #0007)}
.pad{border:0;width:60px;height:50px;border-radius:16px;background:linear-gradient(#f8e9bb,#ead79d);color:#141414;font-size:21px;font-weight:1000;box-shadow:inset 0 1px 0 #fff9,0 6px 0 var(--button-shadow);touch-action:none;user-select:none;cursor:pointer}
.pad:active,.pad.held{transform:translateY(4px);box-shadow:inset 0 1px 0 #fff8,0 2px 0 var(--button-shadow)}
.pad.up{grid-column:2;grid-row:1}.pad.left{grid-column:1;grid-row:2}.pad.action{grid-column:2;grid-row:2;background:linear-gradient(#ffba59,#ffa13c);box-shadow:inset 0 1px 0 #fff7,0 6px 0 var(--action-shadow);font-size:16px;letter-spacing:.02em}.pad.action:active,.pad.action.held{box-shadow:inset 0 1px 0 #fff7,0 2px 0 var(--action-shadow)}.pad.right{grid-column:3;grid-row:2}.pad.down{grid-column:2;grid-row:3}
.side-controls{height:100%;display:grid;align-content:center;justify-items:center;gap:20px}
.round-button{width:58px;height:58px;border-radius:50%;border:0;background:linear-gradient(#cdd6e7,#929caf);color:#111;font-weight:1000;font-size:18px;box-shadow:inset 0 1px 0 #fff9,0 6px 0 #535967;touch-action:none;cursor:pointer}
.round-button:active,.round-button.held{transform:translateY(4px);box-shadow:inset 0 1px 0 #fff9,0 2px 0 #535967}
.home-button{width:30px;height:30px;border-radius:50%;border:1px solid #62656d;background:#25272c;color:#8b8f99;box-shadow:0 4px 0 #090909;cursor:pointer}
.home-button:active{transform:translateY(2px);box-shadow:0 2px 0 #090909}
.app-caption{min-height:34px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#8c8f96;font:800 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.07em}
.app-caption b{color:#c8cbd2}.app-caption span{text-align:right}
.site-foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0 0;color:#65676d;font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.site-foot .dot{opacity:.45}
@media(max-width:560px){
  .page{padding:10px 8px 12px;align-items:start}
  .site-head{padding:2px 8px 8px}.site-kicker{font-size:8px;max-width:150px}
  .charm{padding-top:18px;width:100%}.loop{width:58px;height:38px;border-width:8px}
  .charm-body{width:min(96vw,430px);padding:13px;border-radius:34px}.screen-shell{padding:8px 8px 10px;border-radius:24px}.screen-status{height:24px}
  .launcher{padding:11px 11px 8px}.app-grid{gap:7px}.app-tile{width:min(66px,19vw);border-radius:15px}.app-icon small{font-size:7px;max-width:70px}
  .controls{margin-top:9px;grid-template-columns:1fr 62px;gap:8px;width:min(100%,330px)}
  .dpad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,48px)}.pad{width:52px;height:42px;border-radius:14px;font-size:18px}.pad.action{font-size:14px}.round-button{width:50px;height:50px}.side-controls{gap:15px}
  .app-caption{font-size:8px;margin-top:5px}.site-foot{font-size:8px;padding-top:8px}
}
@media(max-height:750px) and (orientation:landscape){
  .page{display:flex;gap:18px;justify-content:center;align-items:center;padding:10px}.site-head,.site-foot{display:none}.charm{padding-top:14px}.charm-body{width:min(63vh,430px);padding:10px}.screen-status{height:21px}.controls{position:absolute;left:calc(100% + 20px);top:52%;transform:translateY(-50%);width:300px}.app-caption{display:none}
}