/* The lobby (/, src/home.html): one module per app, each module the way into that app. It has a look of its own, apart
   from the Tolk pages' (site.css is not loaded here) — after the owner's two references of 2026-10-05: pure white,
   black grotesque type set tight, light-grey fills, and one hot colour kept for the few things to be seen first.
   Names: everything of this page starts with lobby-, and CalcuLink's drawn screen with calc-, because phone.css (loaded
   before this file) and the demo's scripts own many short ones (.apps .card .who .badge .caption .keys .go .cl …).
   Four names are other files' hooks, styled here on purpose: .lang (written by build.mjs), .toggle and .paused
   (player.js), .phone-slot / .phone / .screen / .status (phone.css draws the phone).
   Fonts (ours are written by tools/fonts.mjs): Latin is Manrope. Chinese is the system's PingFang where there is one
   (Apple), elsewhere our cut of Noto Sans SC — Windows' own has no weight between regular and bold. CalcuLink's
   lettering is the system's Impact, as in the app; where there is none (Android) Anton stands in, fitted to it. */
:root{--bg:#FFFFFF;--ink:#000;--ink-2:#262626;--ink-3:#8C8C8C;--fill:#F5F5F5;--fill-2:#EEEEEE;--line:#E8E8E8;--hot:#F3350C;--hot-2:#D82C07;
  --sans:"Manrope","PingFang SC","Noto Sans SC",system-ui,sans-serif;--arcade:Impact,"Anton","Arial Narrow",sans-serif;--ios:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,3vw,32px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--hot);outline-offset:3px}
.lobby{max-width:1360px;margin:0 auto;padding-inline:var(--gutter)}
.paused *,.paused *::after{animation-play-state:paused!important}

.lobby-bar{display:flex;align-items:center;justify-content:space-between;height:60px;font-weight:500}
.lobby-bar > *{display:flex;align-items:center;gap:26px}
.lobby-bar a{color:var(--ink-2)}
.lobby-bar a:hover{color:var(--hot)}
.lang{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--fill)}
.lang a{padding:5px 10px;border-radius:8px;font-size:14px;color:var(--ink-3)}
.lang a[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.lobby-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;background:var(--hot);color:#fff!important;font-weight:600;font-size:15px}
.lobby-pill:hover{background:var(--hot-2)}

.lobby-mast{padding-top:8px}
.lobby-word{margin:0;display:flex;align-items:flex-start;gap:10px;font-weight:700;font-size:clamp(52px,10.4vw,142px);line-height:.98;letter-spacing:-.055em}
.lobby-star{flex:none;width:.26em;height:.26em;margin-top:.12em;border-radius:.07em;background:var(--hot);display:grid;place-items:center}
.lobby-star svg{width:62%;height:62%}
/* Where the apps run: one capsule blocked in three colours — blue (the owner's swatch of 2026-10-05, Tolk's own blue),
   the hot colour, white — and held by a thin black rim. Flat, no shadow: a label, not a button. */
.lobby-runs-on{margin:26px 0 0;display:inline-flex;height:52px;overflow:hidden;border:1.5px solid var(--ink);border-radius:999px;font-size:17px;font-weight:600}
.lobby-runs-on span{display:flex;align-items:center;padding:0 22px}
.lobby-runs-on span:first-child{padding-left:26px;background:#3182EC;color:#fff}
.lobby-runs-on span:nth-child(2){background:var(--hot);color:#fff}
.lobby-runs-on span:last-child{padding-right:26px}

/* Each module is a small poster of its own app: the name set huge behind a tilted phone, and one thing from that
   app's world beside it — Tolk's a message and its translation, CalcuLink's three of its arcade keys. */
.lobby-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:50px}
.lobby-module{position:relative}
.lobby-panel{position:relative;isolation:isolate;overflow:hidden;height:600px;border-radius:14px;transition:background .3s}
.lobby-tolk .lobby-panel{background:var(--hot)}
.lobby-calc .lobby-panel{background:#0D0D0D}
.lobby-panel .phone-slot{--s:.55}
.lobby-tolk .phone{box-shadow:0 50px 70px -40px rgba(80,10,0,.8),inset 0 0 0 1px #2A2D33}
.lobby-calc .phone{box-shadow:0 50px 70px -40px #000,inset 0 0 0 1px #3A3D44}
.lobby-big{position:absolute;margin:0;white-space:nowrap;pointer-events:none}
.lobby-tolk .lobby-big{left:24px;top:54px;font:800 clamp(116px,13vw,166px)/.82 var(--sans);letter-spacing:-.065em;color:#fff}
.lobby-calc .lobby-big{left:28px;top:62px;font:400 clamp(80px,8.9vw,113px)/.9 var(--arcade);letter-spacing:.012em;color:#DDFF00;text-shadow:4px 4px 0 #FF324A}
.lobby-line{position:absolute;left:30px;top:216px;margin:0;font-size:18px;line-height:1.38;font-weight:600;color:#fff}
.lobby-dev{position:absolute;right:26px;top:96px;z-index:1;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lobby-tolk .lobby-dev{transform:rotate(7deg)}
.lobby-calc .lobby-dev{transform:rotate(-7deg)}
.lobby-notes{position:absolute;left:28px;bottom:28px;width:max-content;min-width:252px;max-width:292px;display:flex;flex-direction:column;gap:9px;z-index:2}
.lobby-notes div{padding:10px 13px 11px;font-size:14.5px;font-weight:600;box-shadow:0 16px 26px -14px rgba(70,10,0,.7)}
.lobby-notes small{display:block;font-size:11.5px;font-weight:600;margin-bottom:3px}
.lobby-notes div:first-child{border-radius:14px 14px 14px 4px;background:#fff;color:#000;transform:rotate(-2.5deg);animation:note-in .6s cubic-bezier(.2,.8,.2,1) .7s backwards}
.lobby-notes div:first-child small{color:#8C8C8C}
.lobby-notes div:last-child{margin-left:26px;border-radius:14px 14px 4px 14px;background:#000;color:#fff;transform:rotate(1.5deg);animation:note-reply .7s cubic-bezier(.2,.8,.2,1) 2.1s backwards}
/* Her message first; a moment later what you read, in yours (owner, 2026-10-09: "先出土耳其语那条，停一下，再滑出中文那条") */
@keyframes note-in{from{opacity:0;transform:rotate(-2.5deg) translateY(16px)}}
@keyframes note-reply{from{opacity:0;transform:rotate(1.5deg) translate(-22px,10px)}}
.lobby-notes div:last-child small{color:#FF9A80}
.lobby-key{position:absolute;z-index:2;width:78px;height:64px;border-radius:12px;border:3px solid #0D0B14;display:grid;place-items:center;font:400 32px/1 var(--arcade);box-shadow:5px 6px 0 #3F424B;transform:rotate(var(--r));animation:lobby-bob 3.6s ease-in-out infinite alternate}
.lobby-key:nth-of-type(1){left:30px;bottom:34px;background:#fff;color:#0D0B14;--r:-9deg}
.lobby-key:nth-of-type(2){left:124px;bottom:58px;background:#FF6B18;color:#fff;--r:7deg;animation-delay:-1.2s}
.lobby-key:nth-of-type(3){left:218px;bottom:30px;background:#FF324A;color:#fff;--r:-3deg;animation-delay:-2.3s}
@keyframes lobby-bob{from{transform:rotate(var(--r)) translateY(0)}to{transform:rotate(var(--r)) translateY(-7px)}}
@media (prefers-reduced-motion: reduce){ .lobby-key,.lobby-notes div{animation:none} }

.lobby-tag{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 11px;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.lobby-tag i{width:7px;height:7px;border-radius:50%;background:var(--hot)}
.lobby-tolk .lobby-tag i{background:#111}
.toggle{position:absolute;right:16px;bottom:16px;z-index:3;width:36px;height:36px;border-radius:10px;border:0;background:#fff;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.toggle::before{content:"";width:10px;height:12px;border-inline:3px solid currentColor}
.toggle[aria-pressed="true"]::before{width:0;height:0;border-right:0;border-left:10px solid currentColor;border-block:6px solid transparent;margin-left:3px}
.toggle[hidden]{display:none}
.lobby-go{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:10px;background:#fff;color:var(--ink);display:grid;place-items:center;transition:background .25s,color .25s,transform .25s}
.lobby-entry{display:flex;align-items:center;gap:12px;padding:14px 2px 0}
.lobby-entry img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lobby-entry a,.lobby-entry strong{display:block;font-weight:600;font-size:17px}
.lobby-entry a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:14px}   /* the whole module is the way in */
.lobby-entry span{display:block;color:var(--ink-3);font-size:16px}
/* A module answers the pointer only when it leads somewhere (its name is a link) */
.lobby-module:has(.lobby-entry a):hover .lobby-go{background:var(--hot);color:#fff;transform:translate(2px,-2px)}
.lobby-tolk:has(.lobby-entry a):hover .lobby-panel{background:var(--hot-2)}
.lobby-tolk:has(.lobby-entry a):hover .lobby-dev{transform:rotate(5deg) translateY(-8px)}
.lobby-calc:has(.lobby-entry a):hover .lobby-panel{filter:brightness(.96)}
.lobby-calc:has(.lobby-entry a):hover .lobby-dev{transform:rotate(-5deg) translateY(-8px)}

/* CalcuLink's own main screen (light theme), drawn from the owner's screenshot of 2026-10-05 with the app's palette
   (calculink/lib/core/theme/arcade_colors.dart: paper #FFF4E5, ink #0D0B14, acid yellow #DDFF00, arcade red #FF324A,
   hot orange #FF6B18, screen #13151B) and its fonts (Impact for keys and stamps, Courier for the display). */
.screen.calc-screen{background:#FFF4E5;color:#0D0B14;letter-spacing:0}
.calc-head{display:flex;align-items:center;gap:8px;padding:10px 12px 12px;border-bottom:3px solid #0D0B14}
.calc-box{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 8px;border:2.5px solid #0D0B14;border-radius:6px;background:#fff;box-shadow:3px 3px 0 #0D0B14;font:400 12px/1 var(--arcade);letter-spacing:.08em}
.calc-box.calc-project{background:#FF324A;color:#fff;font:600 12.5px/1 var(--ios);letter-spacing:.06em;padding:0 9px}
.calc-box.calc-theatre{background:#DDFF00}
.calc-name{font:400 15px/1 var(--arcade);letter-spacing:.06em;margin-right:auto;padding-left:4px}
.calc-tip{margin:62px 18px 0;padding:18px 16px 20px;border-radius:14px;background:#2B2D33;color:#fff;text-align:center;box-shadow:3px 4px 0 rgba(13,11,20,.18)}
.calc-tip em{display:inline-block;font:600 11.5px/1 var(--ios);font-style:normal;letter-spacing:.12em;color:#0D0B14;background:#DDFF00;padding:5px 10px;border-radius:2px}
.calc-tip svg{display:block;margin:14px auto 10px}
.calc-tip b{display:block;font:700 17.5px/1.2 var(--ios);letter-spacing:.08em}
.calc-tip p{margin:12px 0 0;font:500 11.5px/1.45 var(--ios);color:#9A9CA6;letter-spacing:.04em}
.calc-crt{margin:auto 14px 0;padding:14px 14px 12px;height:120px;border-radius:8px;border:3px solid #0D0B14;box-shadow:4px 4px 0 #0D0B14;color:#889900;font:700 9px/1 "Courier New",Courier,monospace;letter-spacing:.18em;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),#13151B;display:grid;grid-template-columns:1fr auto;align-content:start;row-gap:14px}
.calc-crt i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#889900;margin-right:7px}
.calc-crt .calc-sfx{padding:3px 6px;border:1.5px solid #DDFF00;border-radius:3px;background:#FF324A;color:#DDFF00;font-size:7.5px}
.calc-crt .calc-rdy{grid-column:1/-1;text-align:right;font-size:13px;letter-spacing:.1em}
.calc-crt .calc-zero{grid-column:1/-1;text-align:right;font:900 24px/1 "Courier New",Courier,monospace;color:#DDFF00;text-shadow:0 0 10px rgba(221,255,0,.7);letter-spacing:0}
.calc-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:9px 11px;padding:14px 18px 22px 18px}
.calc-pad b{height:44px;border:3px solid #0D0B14;border-radius:9px;background:#fff;box-shadow:4px 4px 0 #0D0B14;display:grid;place-items:center;font:400 21px/1 var(--arcade);color:#0D0B14}
.calc-pad .calc-fn{background:#EFE9DB;font-size:17px}
.calc-pad .calc-op{background:#FF6B18;color:#fff}
.calc-pad .calc-red{background:#FF324A;color:#fff}

/* The page closes on one sentence, set large — no company facts here (owner, 2026-10-05: they read as selling); who
   operates the site is one grey line in the footer. */
.lobby-creed{margin:100px 0 0;padding-top:36px;border-top:1px solid var(--line);font-weight:600;font-size:clamp(30px,4.7vw,64px);line-height:1.12;letter-spacing:-.035em}
.lobby-creed i{font-style:normal;color:var(--hot)}
.lobby-foot{margin-top:72px;padding:22px 0 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--ink-3);font-size:14px}
.lobby-foot nav{display:flex;gap:20px}
.lobby-foot a{color:var(--ink-2)}
.lobby-foot a:hover{color:var(--hot)}

/* Two posters side by side on something narrower than a desktop (a tablet held sideways, a window not filling the
   screen; 861–1260): each poster shrinks as one picture (the owner's pick 甲 of three, 2026-10-06) — zoom scales every
   length inside the panel at once, the phone's drawing with them — in five steps, each sized for the narrowest column
   of its step (the picture's own size is the 598-px column of a 1280 window). The tag, the arrow and the pause button
   are zoomed back to their real size; so that the tag still clears the big name, the name, the line and the phone start
   --dy lower and the panel is that much taller. The names are set in px here: zoom would shrink a vw size twice. */
@media (min-width: 861px) and (max-width: 1260px){
  .lobby-apps{--k:.91;--dy:calc(54px * (1 - var(--k)) / var(--k))}
  .lobby-panel{zoom:var(--k);height:calc(600px + var(--dy))}
  .lobby-big,.lobby-line,.lobby-dev{margin-top:var(--dy)}
  .lobby-tag,.lobby-go,.toggle{zoom:calc(1 / var(--k))}
  .lobby-tolk .lobby-big{font-size:166px}
  .lobby-calc .lobby-big{font-size:113px}
}
@media (min-width: 861px) and (max-width: 1180px){ .lobby-apps{--k:.85} }
@media (min-width: 861px) and (max-width: 1100px){ .lobby-apps{--k:.78} }
@media (min-width: 861px) and (max-width: 1020px){ .lobby-apps{--k:.72} }
@media (min-width: 861px) and (max-width: 940px){ .lobby-apps{--k:.66} }

/* Narrower than two posters side by side: one under the other, each as it is on a wide screen */
@media (max-width: 860px){
  .lobby-apps{grid-template-columns:1fr}
  .lobby-panel{height:560px}
  .lobby-tolk .lobby-big,.lobby-calc .lobby-big{top:52px}
  .lobby-dev{right:16px}
  .lobby-bar > *{gap:16px}
}

/* A phone held upright (the owner's pick of three arrangements, 2026-10-05). The name stands in two huge lines. Each
   poster keeps its whole phone, leaning at the right with the big word partly behind it; what is said, or the three
   keys, take a narrow column on the left. Tolk's two bubbles are left out: on a panel this narrow they could only sit
   on the phone's own keyboard. CalcuLink's phone leans the same way as Tolk's, or it would cover "Link". Type and
   offsets follow the width (vw); the phone (--ps) steps with it, and the panel is as tall as the phone needs. */
@media (max-width: 600px){
  .lobby-bar > *{gap:14px}
  .lobby-mast{padding-top:14px}
  .lobby-word{display:block;font-size:20.6vw;line-height:.9}
  .lobby-star{display:inline-grid;vertical-align:top;margin:.1em 0 0 .07em;width:.22em;height:.22em}
  .lobby-runs-on{margin-top:22px;height:46px;font-size:16px}
  .lobby-runs-on span{padding:0 18px}
  .lobby-runs-on span:first-child{padding-left:22px}
  .lobby-runs-on span:last-child{padding-right:22px}
  .lobby-apps{margin-top:40px;gap:34px;--ps:.56}
  .lobby-panel{height:calc(78px + 26vw + 868px * var(--ps))}
  .lobby-panel .phone-slot{--s:var(--ps)}
  .lobby-dev{right:26px;top:calc(50px + 26vw)}
  .lobby-calc .lobby-dev{right:16px;top:calc(58px + 26vw);transform:rotate(7deg)}
  .lobby-calc:has(.lobby-entry a):hover .lobby-dev{transform:rotate(5deg) translateY(-8px)}
  .lobby-tolk .lobby-big{left:18px;top:50px;font-size:36vw}
  .lobby-calc .lobby-big{left:20px;top:56px;font-size:19.6vw}
  .lobby-line{left:20px;top:calc(68px + 29.5vw);font-size:4.2vw;max-width:28.6vw}
  .lobby-notes{display:none}
  .toggle{right:auto;left:16px}
  .lobby-key{width:62px;height:52px;font-size:26px;border-radius:11px}
  .lobby-key:nth-of-type(1){left:20px;bottom:auto;top:calc(110px + 38vw)}
  .lobby-key:nth-of-type(2){left:36px;bottom:auto;top:calc(196px + 38vw)}
  .lobby-key:nth-of-type(3){left:16px;bottom:auto;top:calc(284px + 38vw)}
  .lobby-entry span{font-size:15px;text-wrap:balance}
  .lobby-creed{margin-top:72px;padding-top:30px;font-size:8vw;line-height:1.16}
  .lobby-creed i{white-space:nowrap}
  .lobby-foot{margin-top:56px}
}
@media (min-width: 480px) and (max-width: 600px){ .lobby-apps{--ps:.64} }
@media (max-width: 409px){ .lobby-apps{--ps:.51} }
@media (max-width: 374px){ .lobby-apps{--ps:.47} }