:root{
  --bg:#0d1117; --panel:#161b22; --line:#2a2f3a; --ink:#e6edf3; --dim:#8b949e;
  --accent:#7ac5ff; --accent-dim:#1f6feb33; --good:#3fb950; --warn:#d29922; --bad:#f85149;
  --chrome:34px; --taskbar:46px; --radius:8px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font:13px/1.45 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;user-select:none}

#wallpaper{position:fixed;inset:0;background:radial-gradient(circle at 28% 18%,#152437,#0d1117 68%)}
#grid{position:absolute;inset:0;
  background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);
  background-size:34px 34px}
#desktop{position:fixed;inset:0 0 var(--taskbar) 0}

/* windows */
.win{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 34px #0009,0 2px 6px #0006;display:flex;flex-direction:column;overflow:hidden;
  min-width:260px;min-height:150px}
.win.focus{border-color:#3d4655;box-shadow:0 18px 46px #000b,0 0 0 1px #7ac5ff22}
.win.snapping{transition:left .12s ease,top .12s ease,width .12s ease,height .12s ease}
.win-bar{height:var(--chrome);flex:0 0 var(--chrome);display:flex;align-items:center;gap:8px;
  padding:0 6px 0 10px;background:#1b2129;border-bottom:1px solid var(--line)}
.win-title{flex:1;font-size:12.5px;color:#c9d1d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-btn{width:26px;height:22px;border:0;border-radius:5px;background:transparent;color:#9aa4b2;
  font:12px/1 ui-monospace,monospace;cursor:pointer}
.win-btn:hover{background:#262d38;color:var(--ink)}
.win-btn.close:hover{background:var(--bad);color:#fff}
.win-body{flex:1;overflow:auto;background:#11151b}
.win-rz{position:absolute;z-index:5}
.win-rz.n{top:-3px;left:8px;right:8px;height:7px;cursor:ns-resize}
.win-rz.s{bottom:-3px;left:8px;right:8px;height:7px;cursor:ns-resize}
.win-rz.w{left:-3px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
.win-rz.e{right:-3px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
.win-rz.nw{left:-3px;top:-3px;width:12px;height:12px;cursor:nwse-resize}
.win-rz.ne{right:-3px;top:-3px;width:12px;height:12px;cursor:nesw-resize}
.win-rz.sw{left:-3px;bottom:-3px;width:12px;height:12px;cursor:nesw-resize}
.win-rz.se{right:-3px;bottom:-3px;width:12px;height:12px;cursor:nwse-resize}

/* snap */
#snapGhost{position:fixed;z-index:900;border:2px solid var(--accent);background:#7ac5ff1f;
  border-radius:var(--radius);pointer-events:none;transition:all .09s ease}
#snapPicker{position:fixed;z-index:950;top:6px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;padding:10px;background:#161b22f2;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 40px #000a}
.sp-layout{display:grid;gap:3px;width:88px;height:56px;padding:4px;border-radius:7px;
  border:1px solid var(--line);background:#0f141a;cursor:pointer}
.sp-layout:hover{border-color:var(--accent);background:#12202e}
.sp-cell{background:#2b3644;border-radius:3px}
.sp-layout:hover .sp-cell{background:#345070}
.sp-cell:hover{background:var(--accent)}

/* taskbar */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--taskbar);z-index:1000;
  display:flex;align-items:center;gap:8px;padding:0 10px;
  background:#0f141acc;border-top:1px solid var(--line)}
.tb-start{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line);
  border-radius:7px;background:#1b2129;color:var(--ink);cursor:pointer;font-size:12.5px}
.tb-start:hover{border-color:var(--accent);background:#1f2a35}
.tb-logo{width:11px;height:11px;border-radius:3px;background:linear-gradient(135deg,#7ac5ff,#3fb950)}
.tb-tasks{display:flex;gap:6px;flex:1;overflow:hidden}
.tb-task{max-width:190px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:7px;
  background:#161b22;color:#b9c2cd;cursor:pointer;font-size:12.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tb-task.active{background:var(--accent-dim);border-color:#3f6d99;color:#dbeeff}
.tb-right{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12px}
.tb-stat{font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.tb-clock{font-variant-numeric:tabular-nums;color:#c9d1d9}

/* start menu */
#startMenu{position:fixed;left:10px;bottom:calc(var(--taskbar) + 8px);z-index:1001;width:300px;
  background:#161b22f5;border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:0 18px 50px #000b}
.sm-head{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);padding:2px 6px 8px}
.sm-apps{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sm-app{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;background:#1b2129;
  border:1px solid transparent;cursor:pointer;font-size:12.5px;color:var(--ink)}
.sm-app:hover{border-color:var(--accent);background:#1f2a35}
.sm-ico{width:16px;text-align:center;opacity:.9}
.sm-foot{margin-top:9px;padding:7px 6px 2px;border-top:1px solid var(--line);
  color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}

/* panes */
.pane{padding:12px;height:100%;overflow:auto}
.mon-row{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 5px}
.mon-label{color:var(--dim);font-size:11.5px}
.mon-val{font-variant-numeric:tabular-nums;font-size:12.5px}
.bar{height:7px;border-radius:4px;background:#232b35;overflow:hidden;margin-bottom:13px}
.bar>i{display:block;height:100%;border-radius:4px;background:var(--good);transition:width .4s ease}
.bar>i.warn{background:var(--warn)}
.bar>i.bad{background:var(--bad)}
.mon-meta{color:var(--dim);font-size:11px;line-height:1.7;border-top:1px solid var(--line);
  padding-top:9px;margin-top:4px}

.fb-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);
  background:#151a21;position:sticky;top:0;z-index:2;flex-wrap:wrap}
.fb-up{border:1px solid var(--line);background:#1b2129;color:var(--ink);border-radius:6px;
  height:25px;padding:0 10px;cursor:pointer;font-size:12px}
.fb-up:hover{border-color:var(--accent)}
.fb-crumb{color:var(--accent);cursor:pointer;font-size:12px}
.fb-crumb:hover{text-decoration:underline}
.fb-sep{color:#4a5563}
.fb-list{width:100%;border-collapse:collapse;font-size:12.5px}
.fb-list tr{border-bottom:1px solid #1c222a}
.fb-list tr:hover{background:#171d25}
.fb-list td{padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-list td.sz{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;width:88px}
.fb-list td.dt{color:var(--dim);width:150px;font-variant-numeric:tabular-nums}
.fb-dir{color:var(--accent);cursor:pointer}
.fb-file{color:#c9d1d9}
.fb-ico{display:inline-block;width:16px;opacity:.85}
.fb-empty{padding:22px;color:var(--dim);text-align:center}

.term{height:100%;display:flex;flex-direction:column;background:#0b0f14}
.term-out{flex:1;overflow:auto;padding:10px 12px;font:12.5px/1.55 ui-monospace,Consolas,monospace;
  white-space:pre-wrap;word-break:break-word;user-select:text}
.term-in{display:flex;align-items:center;gap:7px;padding:8px 12px;border-top:1px solid var(--line);
  background:#0f141a}
.term-ps{color:var(--good);font:12.5px ui-monospace,monospace}
.term-in input{flex:1;background:transparent;border:0;outline:0;color:var(--ink);
  font:12.5px ui-monospace,Consolas,monospace}
.term-err{color:var(--bad)}
.term-dim{color:var(--dim)}
.term-ok{color:var(--good)}

/* ---- Task Manager ---- */
.tm{display:flex;height:100%;background:#0f141a}
.tm-side{width:186px;flex:0 0 186px;border-right:1px solid var(--line);overflow-y:auto;
  background:#11161d;padding:6px}
.tm-row{display:flex;gap:9px;align-items:center;padding:7px;border-radius:7px;cursor:pointer;
  border:1px solid transparent;margin-bottom:3px}
.tm-row:hover{background:#171d25}
.tm-row.sel{background:var(--accent-dim);border-color:#3f6d99}
.tm-spark{width:52px;height:32px;flex:0 0 52px;background:#0b0f14;border:1px solid #232b35;
  border-radius:4px}
.tm-rowtext{display:flex;flex-direction:column;gap:1px;min-width:0}
.tm-rowtext b{font-size:12px;font-weight:600;color:#dbe3ec}
.tm-now{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.tm-main{flex:1;display:flex;flex-direction:column;padding:12px 14px;min-width:0}
.tm-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.tm-title{font-size:15px;font-weight:600}
.tm-site{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
/* The canvas MUST get its layout size from a parent, never from its own buffer.
   Without this box, `canvas.width = clientWidth * dpr` feeds back into layout: the buffer
   sets the intrinsic size, layout grows, the next frame reads the bigger value and
   multiplies by dpr again. It reached 26 million pixels wide in about two minutes. */
.tm-chartbox{flex:1;min-height:120px;position:relative;background:#0b0f14;
  border:1px solid #232b35;border-radius:6px;overflow:hidden}
.tm-chart{position:absolute;inset:0;width:100%;height:100%;display:block}
.tm-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);
  padding:4px 1px 9px;font-variant-numeric:tabular-nums}
.tm-facts{display:grid;grid-template-columns:1fr 1fr;gap:3px 18px;font-size:11.5px;
  border-top:1px solid var(--line);padding-top:9px}
.tm-facts div{display:flex;justify-content:space-between;gap:10px;min-width:0}
.tm-facts span{color:var(--dim)}
.tm-facts b{font-weight:500;color:#c9d1d9;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- lock screen ---- */
.lock{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#16243a,#080b10 70%);transition:opacity .25s ease}
.lock-out{opacity:0;pointer-events:none}
.lock-box{width:330px;padding:30px 26px;background:#141a22f2;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 26px 70px #000c;text-align:center}
.lock-logo{width:44px;height:44px;margin:0 auto 16px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--good))}
.lock-site{font-size:15px;font-weight:600;margin-bottom:3px}
.lock-sub{font-size:12px;color:var(--dim);margin-bottom:20px}
.lock-form{display:flex;flex-direction:column;gap:9px}
.lock-pw{height:38px;padding:0 12px;border-radius:8px;border:1px solid var(--line);
  background:#0d1218;color:var(--ink);font-size:14px;outline:none}
.lock-pw:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7ac5ff22}
.lock-go{height:38px;border:0;border-radius:8px;background:var(--accent);color:#06121f;
  font-size:14px;font-weight:600;cursor:pointer}
.lock-go:hover{filter:brightness(1.08)}
.lock-go:disabled{opacity:.6;cursor:default}
.lock-err{min-height:17px;margin-top:11px;font-size:12px;color:var(--bad)}

/* ---- reader ---- */
.rd{height:100%;background:#0b0f14;display:flex}
.rd-frame{flex:1;border:0;width:100%;height:100%;background:#fff}
.rd-img{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px}
.rd-img img{max-width:100%;max-height:100%;object-fit:contain}
.rd-text{flex:1;margin:0;padding:16px 20px;overflow:auto;white-space:pre-wrap;
  font:12.5px/1.6 ui-monospace,Consolas,monospace;user-select:text}
.rd-none{flex:1;display:flex;flex-direction:column;gap:7px;align-items:center;
  justify-content:center;color:var(--dim);font-size:13px;text-align:center;padding:22px}
.rd-none b{color:var(--ink);font-size:14px}
.fb-view{color:#cbd5e1;cursor:pointer}
.fb-view:hover{color:var(--accent);text-decoration:underline}

/* ---- book reader (epub / cbz) ---- */
.rd-book{flex-direction:column}
.rd-bar{display:flex;align-items:center;gap:12px;padding:7px 12px;background:#11161d;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.rd-bar button{height:26px;padding:0 12px;border:1px solid var(--line);border-radius:6px;
  background:#1b2129;color:var(--ink);cursor:pointer;font-size:12px}
.rd-bar button:hover{border-color:var(--accent)}
.rd-pos{flex:1;text-align:center;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.rd-stage{flex:1;overflow:auto;background:#0b0f14;display:flex;align-items:flex-start;
  justify-content:center;min-height:0}
.rd-page{width:100%;height:100%;border:0;background:#fff}
.rd-scan{max-width:100%;height:auto;display:block}

/* ---- editor ---- */
.ed{height:100%;display:flex;flex-direction:column;background:#0b0f14}
.ed-bar{display:flex;align-items:center;gap:12px;padding:6px 12px;background:#11161d;
  border-bottom:1px solid var(--line);font-size:11.5px;flex:0 0 auto}
.ed-lang{color:var(--accent);font-weight:600}
.ed-path{flex:1;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-ro{color:var(--warn);border:1px solid #4a3a12;background:#2a2110;border-radius:4px;
  padding:1px 7px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.ed-body{flex:1;display:flex;overflow:auto;min-height:0}
.ed-gutter{flex:0 0 auto;padding:10px 10px 10px 12px;text-align:right;color:#3d4753;
  background:#0d1218;border-right:1px solid var(--line);user-select:none;
  font:12.5px/1.55 ui-monospace,Consolas,monospace;white-space:pre}
.ed-code{flex:1;margin:0;padding:10px 16px;white-space:pre;overflow-x:auto;user-select:text;
  font:12.5px/1.55 ui-monospace,Consolas,monospace;color:#c9d1d9}
.t-com{color:#6a7684;font-style:italic}
.t-str{color:#9ecbff}
.t-num{color:#f0a868}
.t-kw{color:#ff7b9c;font-weight:600}
.t-fn{color:#d2a8ff}
.t-tag{color:#7ee787}
.t-atr{color:#79c0ff}
.t-key{color:#7ee787}
.t-head{color:#ffa657;font-weight:700}
.t-pun{color:#8b949e}

/* ---- model viewer ---- */
.mv{position:relative;height:100%;background:#0b0f14}
.mv-cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.mv-cv:active{cursor:grabbing}
.mv-hud{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  padding:7px 12px;background:#0d1218cc;border-top:1px solid var(--line);font-size:11.5px;
  pointer-events:none}
.mv-info{color:#c9d1d9;font-variant-numeric:tabular-nums}
.mv-hint{color:var(--dim)}

/* ---- overlays: z-index IS the contract's layering ---- */
/* HUD 4200 > lens/teapot 4100 > border 4000 > desktop. Nothing ever covers the HUD. */
#ovl{position:fixed;inset:0;z-index:4100;pointer-events:none}
#ovl-border{position:fixed;inset:0;z-index:4000;pointer-events:none;
  border:4px solid #ff3b30;box-shadow:inset 0 0 0 1px #ff3b3066,inset 0 0 26px #ff3b3033}
#ovl-hud{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:4200;
  pointer-events:none;padding:5px 14px;border-radius:7px;
  background:#000000cc;border:1px solid #2a2f3a;color:#7ee787;
  font:12px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* wireframe debug layer: outline every window so layout is visible at a glance */
.gfx-wire .win,.gfx-wire .win-bar,.gfx-wire .win-body,.gfx-wire #taskbar{
  outline:1px solid #7ee78766;outline-offset:-1px}

.gfx-list{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.gfx-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  background:#161b22;border:1px solid var(--line);cursor:pointer;font-size:12.5px}
.gfx-row:hover{border-color:var(--accent)}
.gfx-row span{flex:1}
.gfx-row em{color:var(--dim);font-style:normal;font:11px ui-monospace,monospace}
.gfx-slider{cursor:default}
.gfx-slider input{flex:1;accent-color:var(--accent)}

/* ---- settings / media / previews ---- */
.set-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:4px 0 8px}
.set-walls{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.set-wall,.set-acc{width:52px;height:34px;border-radius:7px;border:2px solid var(--line);cursor:pointer}
.set-acc{width:34px}
.set-wall:hover,.set-acc:hover{border-color:#8b949e}
.set-wall.sel,.set-acc.sel{border-color:var(--accent);box-shadow:0 0 0 2px #7ac5ff33}
.med-pane{display:flex;flex-direction:column;gap:10px;justify-content:center}
.med-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.med-video{height:100%;background:#000;display:flex}
.med-video video{width:100%;height:100%;object-fit:contain}
.fb-search{margin-left:auto;height:25px;padding:0 10px;border-radius:6px;border:1px solid var(--line);
  background:#0d1218;color:var(--ink);font-size:12px;outline:none;width:190px}
.fb-search:focus{border-color:var(--accent)}
.fb-thumb{width:34px;height:26px;object-fit:cover;border-radius:4px;margin-right:8px;
  vertical-align:middle;background:#232b35}
.fb-where{font-size:10.5px;color:var(--dim);margin-top:1px}

/* ---- sorting, pins, desktop shortcuts ---- */
.fb-head td{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;user-select:none;padding:7px 10px;border-bottom:1px solid var(--line)}
.fb-head td:hover{color:var(--accent)}
.fb-pin{display:inline-block;width:18px;color:#e3b341;cursor:pointer;opacity:.4;margin-right:2px}
.fb-pin:hover{opacity:1}
tr:hover .fb-pin{opacity:.85}
#dicons{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;
  flex-wrap:wrap;gap:6px;max-height:calc(100% - 24px);align-content:flex-start}
.dicon{width:86px;padding:8px 4px;border-radius:8px;text-align:center;cursor:default;
  position:relative;user-select:none}
.dicon:hover{background:#ffffff10}
.dicon-ico{font-size:26px;display:block}
.dicon-name{font-size:11px;color:#c9d1d9;margin-top:4px;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dicon-x{position:absolute;top:2px;right:6px;color:var(--dim);display:none;cursor:pointer;
  font-size:13px}
.dicon:hover .dicon-x{display:block}
.dicon-x:hover{color:var(--bad)}
.sm-sc{margin-top:8px}
.sm-app-wide{width:100%;margin-bottom:4px}
.sm-head{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  padding:6px 6px 6px}

.sp-cell.hot{background:var(--accent)!important}

/* ---- the room: monitor on a desk, OG-KullOS style ---- */
#machine{position:fixed;inset:0;transform-origin:50% 42%;
  transition:transform .65s cubic-bezier(.4,0,.2,1),border-radius .65s,box-shadow .65s}
#room{position:fixed;inset:0;display:none;
  background:linear-gradient(#1a1d26 0%,#14161d 55%,#0c0d12 100%)}
body.room #room{display:block}
body.room #machine{transform:scale(.52) translateY(-9.5%);border-radius:10px;
  box-shadow:0 0 0 14px #14161c,0 0 0 17px #2c3140,0 0 0 18px #05060a,
             0 34px 90px #000d, inset 0 0 90px #0006;cursor:pointer}
/* while in the room, the machine is a prop - it cannot steal a single click */
body.room #machine *{pointer-events:none!important}
.rm-wall{position:absolute;inset:0 0 34% 0;
  background:linear-gradient(180deg,#232735,#1a1d26 80%);opacity:.5}
.rm-window{position:absolute;top:7%;left:6%;width:15%;height:26%;border:5px solid #2b303e;
  border-radius:6px;background:linear-gradient(200deg,#1c2c48,#0e1524 70%);
  box-shadow:0 0 60px #1c2c4877;display:flex}
.rm-window i{flex:1;border-right:5px solid #2b303e}
.rm-window i:last-child{border-right:0}
.rm-shelf{position:absolute;top:12%;right:7%;width:17%;height:3px;background:#2c3140;
  border-radius:2px}
.rm-shelf b{position:absolute;bottom:3px;width:9%;height:26px;background:#39415a;border-radius:2px}
.rm-shelf b:nth-child(1){left:8%;height:34px;background:#4a3f63}
.rm-shelf b:nth-child(2){left:24%;height:22px}
.rm-shelf b:nth-child(3){left:38%;height:29px;background:#3f5a53}
.rm-desk{position:absolute;left:0;right:0;bottom:0;height:31%;
  background:linear-gradient(180deg,#4a3826,#33271b 40%,#241b13);box-shadow:0 -8px 40px #0008}
.rm-stand{position:absolute;left:50%;bottom:27.5%;width:5.5%;height:8%;
  transform:translateX(-50%);background:linear-gradient(#191d26,#10131a);border-radius:0 0 6px 6px}
.rm-foot{position:absolute;left:50%;bottom:26.6%;width:16%;height:1.5%;
  transform:translateX(-50%);background:#10131a;border-radius:8px;box-shadow:0 6px 14px #0009}
.rm-keyboard{position:absolute;left:50%;bottom:17%;width:24%;height:5.5%;
  transform:translateX(-58%) perspective(300px) rotateX(28deg);
  background:#171a22;border-radius:6px;border:1px solid #2c3140;display:flex;flex-wrap:wrap;
  gap:4%;padding:1.6% 2%;box-shadow:0 10px 22px #000a}
.rm-keyboard i{flex:1 1 12%;background:#232836;border-radius:2px;min-height:26%}
.rm-mouse{position:absolute;left:66.5%;bottom:17.6%;width:2.6%;height:4.4%;
  background:linear-gradient(#20242f,#171a22);border-radius:45% 45% 50% 50%;
  box-shadow:0 8px 16px #000a}
.rm-mug{position:absolute;left:30%;bottom:19%;width:3%;height:5.4%;
  background:linear-gradient(#5b3a4e,#41293a);border-radius:4px 4px 6px 6px}
.rm-mug::after{content:'';position:absolute;right:-38%;top:18%;width:44%;height:52%;
  border:4px solid #41293a;border-left:0;border-radius:0 10px 10px 0}
.rm-led{position:absolute;left:50%;bottom:28.2%;width:7px;height:7px;border-radius:50%;
  transform:translateX(920%);background:var(--good);box-shadow:0 0 8px var(--good)}
.rm-hint{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  color:#8b949e;font-size:13px;letter-spacing:.06em;animation:rmpulse 2.6s infinite}
@keyframes rmpulse{50%{opacity:.35}}