:root{color-scheme:light;--ink:#242c2b;--muted:#697775;--accent:#32675b;--line:#dfe5e3;--paper:#eef0e9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#f8fafa;color:var(--ink);font-size:14px;line-height:1.7}a{color:inherit;text-underline-offset:4px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,label:focus-within{outline:2px solid var(--accent);outline-offset:5px}button[hidden]{display:none}.site-header{max-width:1200px;margin:auto;padding:26px 36px;display:flex;align-items:center;justify-content:space-between}.site-header nav{display:flex;align-items:center;gap:24px}.site-header nav a,.site-header>a{text-decoration:none;font-size:12px;color:var(--muted)}.site-header .wordmark{font-size:26px;font-weight:650;letter-spacing:-1px;color:var(--ink)}.wordmark span{font-size:13px;font-weight:400;letter-spacing:0;margin-left:8px;color:var(--muted)}main{max-width:1080px;margin:auto;padding:14px 36px 0}.intro h1{font-size:30px;letter-spacing:-1px;font-weight:600;margin:14px 0 2px}.intro p{margin:0;color:var(--muted)}.workspace{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;padding:44px 0 58px}.device-stage{display:flex;flex-direction:column;align-items:center;padding:6px 24px}.device{position:relative;width:min(330px,100%);aspect-ratio:75/124;border-radius:18px 19px 20px 19px;background:linear-gradient(110deg,#f9faf9,#e4e7e6 46%,#d6dcda);border:1px solid #c0c7c4;box-shadow:inset 2px 2px 2px #fff,inset -3px -2px 3px #aeb8b3,8px 9px 0 -4px #c4ceca,12px 16px 24px -15px #60716a6b;isolation:isolate}.device-seam{position:absolute;inset:5px 5px 5px 3px;border:1px solid #c9d0cd;border-radius:14px;pointer-events:none}.display{position:absolute;left:10%;top:7%;width:80%;aspect-ratio:480/800;border:1px solid #b7bfba;border-radius:4px;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 5px #505c5760}#screen{display:block;width:100%;height:100%;background:var(--paper)}#boot{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:20px;background:var(--paper);font-size:12px;text-align:center;color:var(--muted)}#boot[hidden]{display:none}.boot-symbol{font-size:38px;font-weight:300;color:#a2ada6}#retry{border:1px solid #96aaa1;background:transparent;border-radius:4px;padding:5px 14px;color:var(--accent)}.device-brand{position:absolute;left:0;right:0;bottom:6.8%;text-align:center;color:#9aa59f;font-size:11px;letter-spacing:1px;font-weight:500;pointer-events:none}.front-keys{position:absolute;bottom:2.3%;left:14%;right:14%;display:flex;align-items:center;justify-content:space-between;gap:12px}.hardware-key{user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;color:#6c7770;border:1px solid #adb8b1;background:linear-gradient(#f3f6f3,#d6ddd7);box-shadow:0 1px 1px #fff,inset 0 1px 1px #ffffffc0;line-height:1;padding:0}.hardware-key:before{content:"";position:absolute;inset:-12px -3px}.front-keys>.hardware-key{position:relative;width:24%;height:16px;font-size:13px;border-radius:7px}.front-rocker{display:flex;width:38%;height:16px;gap:0;border-radius:7px}.front-rocker button{position:relative;width:50%;font-size:14px}.front-rocker button:first-child{border-radius:7px 0 0 7px;border-right:0}.front-rocker button:last-child{border-radius:0 7px 7px 0}.hardware-key.pressed,.hardware-key:active{background:#acbab1;color:#2f4035;box-shadow:inset 0 2px 3px #6f807866}.side-key{position:relative;width:11px;border-radius:3px}.side-key:before{inset:-6px -14px}.side-key span{display:block;position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:13px;color:#84928a;pointer-events:none}.power-key{position:absolute;right:-11px;top:20%;height:34px}.side-rocker{position:absolute;right:-11px;top:40%;display:flex;flex-direction:column;height:80px;gap:1px}.side-rocker button{height:50%}.device-caption{margin:25px 0 0;text-align:center;font-size:12px;color:#72817a}.device-caption span{display:block;font-size:11px;color:#909b96}.controls{max-width:380px}.status-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);min-height:24px}#status-dot{width:6px;height:6px;border-radius:50%;background:#a5aeaa}body[data-state=ready] #status-dot{background:#518b75}body[data-state=error] #status-dot{background:#b15e4b}.controls h2{font-size:23px;font-weight:550;letter-spacing:-.5px;margin:14px 0 9px}.lead{color:var(--muted);line-height:1.9;margin:0;font-size:13px}.shortcuts{padding:16px 0 20px;margin:10px 0 0;border-bottom:1px solid var(--line)}.shortcuts>div{display:flex;justify-content:space-between;align-items:center;min-height:35px}.shortcuts dt{font-size:13px;color:#53615c}.shortcuts dd{display:flex;gap:6px;align-items:center;margin:0}.shortcuts small{font-size:10px;color:#8b9891}kbd{font-family:inherit;font-size:11px;min-width:26px;text-align:center;border:1px solid #d5ddda;border-bottom-width:2px;border-radius:4px;padding:0 6px;background:#fff;color:#576760}.book-section{padding:23px 0 16px}.file-button{border:0;display:inline-block;background:var(--accent);color:#fff;border-radius:6px;padding:10px 18px;font-size:13px;font-weight:500;cursor:pointer}.file-button:hover{background:#24584c}body:not([data-state=ready]) .file-button{opacity:.45;cursor:wait}.book-section p{font-size:11px;color:var(--muted);line-height:1.8;margin:9px 0 0;overflow-wrap:anywhere}#message{color:#577568;min-height:20px}.utility-actions{display:flex;gap:24px}.utility-actions button{border:0;padding:0;background:none;font-size:12px;color:#53635c;text-decoration:underline;text-underline-offset:4px}.session-note{font-size:11px;color:#95a099;margin:17px 0 0;min-height:20px}.credits{border-top:1px solid var(--line);padding:25px 0 12px;color:var(--muted);font-size:12px;line-height:1.9}.credits h2{font-size:14px;font-weight:550;color:#52625a;margin:0 0 7px}.credits p{max-width:850px;margin:7px 0 12px}.credits a{color:#496b5b}.credits details{margin-top:18px;font-size:11px}.credits summary{cursor:pointer;width:fit-content;color:#7d8d83}footer{max-width:1080px;margin:auto;padding:25px 36px 32px;color:#95a198;font-size:11px}@media(min-width:1500px){.workspace{padding-top:60px;padding-bottom:70px}.device{width:360px}}@media(max-width:760px){.site-header{padding:20px 22px}main{padding:4px 22px 0}.intro h1{font-size:25px}.intro p{font-size:12px}.workspace{grid-template-columns:1fr;gap:26px;padding:30px 0 35px}.device-stage{padding:0 30px}.device{width:290px}.controls{max-width:none;width:100%;margin:0 auto}.controls h2{font-size:21px}.device-caption{margin-top:20px}.credits{padding-top:22px}footer{padding-left:22px}.front-keys{gap:8px}.hardware-key:before{inset:-13px -4px}.side-key:before{inset:-6px -14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

@media(max-width:480px){.site-header nav{gap:14px}.site-header nav a{font-size:11px}.wordmark span{display:none}}

.unsupported-note{font-size:11px;line-height:1.8;color:#8b6d47;margin-top:20px;padding-left:10px;border-left:2px solid #cdbb98}#unsupported-dialog{width:min(420px,calc(100% - 40px));border:1px solid #dce3df;border-radius:12px;padding:25px;color:var(--ink);box-shadow:0 18px 80px #20352c30}#unsupported-dialog::backdrop{background:#25382f40}#unsupported-dialog h2{font-size:18px;margin:0 0 12px}#unsupported-dialog p{font-size:13px;color:var(--muted);line-height:1.8}#dismiss-unsupported{border:0;border-radius:5px;background:var(--accent);color:white;padding:9px 15px;margin-top:8px;font-size:13px}