:root {
  --ink: #181714;
  --paper: #eef0e7;
  --soft: #dfe3d6;
  --cream: #f5f2e9;
  --accent: #ff5b35;
  --muted: #6f716a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #d9ddd4;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 50% 42%, #f6f6f2 0 22%, transparent 56%), #d9ddd6; }
button { font: inherit; }
.workspace { min-height: 100vh; display:grid; place-items:center; padding:24px; overflow:hidden; }

.intro { align-self: center; max-width: 360px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .15em; font-weight: 800; }
.eyebrow span { width: 28px; height: 3px; background: var(--accent); border-radius: 4px; }
h1 { font-size: clamp(2.7rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; margin: 22px 0; font-weight: 850; }
.intro > p { max-width: 320px; font-size: 1rem; line-height: 1.75; color: #555851; }
kbd { min-width: 29px; display: inline-grid; place-items: center; padding: 3px 7px; margin: 0 3px; border: 1px solid #a9aca4; border-bottom-width: 3px; border-radius: 7px; background: #f7f7f1; color: var(--ink); font-weight: 800; box-shadow: 0 1px 0 #fff inset; }
.legend { margin-top: 25px; display: grid; gap: 10px; }
.legend div { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: #5e615a; }
.legend kbd { margin: 0; }
.quick-jump { margin-top: 27px; }
.quick-jump p { margin: 0 0 10px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
#jump-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
#jump-buttons button { border: 1px solid #afb3aa; background: rgba(255,255,255,.45); border-radius: 999px; padding: 7px 11px; font-size: .75rem; cursor: pointer; transition: .18s ease; }
#jump-buttons button:hover { color: white; border-color: var(--ink); background: var(--ink); }
.event-card { margin-top: 26px; padding: 14px 16px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.35); }
.event-card span { display: block; font-size: .7rem; color: var(--muted); margin-bottom: 4px; }
.event-card strong { font-size: .86rem; }

.device-stage { position: relative; display: grid; place-items: center; min-height: 830px; width:min(100%,560px); }
.device-shadow { position: absolute; width: 66%; height: 80px; bottom: 20px; border-radius: 50%; background: rgba(20,25,20,.24); filter: blur(28px); transform: perspective(200px) rotateX(60deg); }
.device { position: relative; width: min(100%, 470px); aspect-ratio: .63; padding: 31px 31px 31px; border: 2px solid #292a29; border-radius: 42px 42px 52px 52px; background: linear-gradient(145deg, #505151 0%, #303130 58%, #252625 100%); box-shadow: -8px 11px 0 #1d1e1d, 0 35px 70px rgba(29,33,27,.34), inset 0 0 0 1px #626362; z-index: 1; }
.device:before { content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.08); border-radius:33px 33px 43px 43px; pointer-events:none; }
.power-button { position: absolute; right: -14px; top: 145px; width: 13px; height: 84px; padding: 0; border: 2px solid #171715; border-left: none; border-radius: 0 7px 7px 0; background: #555655; cursor: pointer; }
.power-button span { position:absolute; left: 22px; top: 28px; font-size:.7rem; color:#5b5d57; writing-mode:vertical-rl; opacity:.7; }
.speaker { height: 22px; display:flex; justify-content:center; align-items:center; margin-bottom:12px; color:#999b9a; font-size:.68rem; font-weight:700; letter-spacing:.27em; }
.screen-shell { position: relative; height: 590px; padding: 6px; background: #1c1c19; border-radius: 11px; box-shadow: inset 0 2px 7px #000, 0 1px 0 #686967; overflow:hidden; }
.screen { position:relative; height:100%; overflow:hidden; padding:22px 26px 18px; border-radius:4px; background-color:#eeeae0; background-image:repeating-linear-gradient(0deg,rgba(45,45,41,.045) 0 1px,transparent 1px 4px); color:#262724; filter: grayscale(1); z-index:1; }
.screen.refreshing { filter:grayscale(1); }
.eink-noise { position:absolute; inset:8px; opacity:.14; border-radius:9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); z-index:2; pointer-events:none; mix-blend-mode:multiply; }
.brand { display:none; }
.brand b { font-size:1rem; letter-spacing:.06em; }
.brand span { font-size:.6rem; letter-spacing:.14em; color:#686a64; }
.hardware-keys { display:grid; grid-template-columns:1fr 1.08fr 1fr; gap:15px; padding:0 25px; }
.hardware-key { height:72px; border:1px solid #686967; border-bottom-width:4px; border-radius:50%; background:linear-gradient(#626362,#464746); color:#f2efe6; cursor:pointer; box-shadow:0 7px 15px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.15); transition:transform .08s,border-bottom-width .08s; }
.hardware-key:active,.hardware-key.active { transform:translateY(4px); border-bottom-width:2px; }
.hardware-key span { display:block; font-size:2rem; line-height:1; font-weight:900; }
.hardware-key small { display:none; }
.hardware-key.confirm { border-radius:999px; height:70px; width:118px; justify-self:center; margin-top:0; }
.hardware-key.confirm span { font-size:1.15rem; color:#f4f0e5; }
.device-foot { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:15px; color:#93958e; font-size:.42rem; letter-spacing:.08em; }
.device-foot i { width:3px; height:3px; background:#62645f; border-radius:50%; }

.statusbar { display:flex; justify-content:space-between; align-items:center; height:34px; font-size:.74rem; font-weight:850; border-bottom:3px solid #d1cdc3; padding-bottom:10px; }
.status-right { display:flex; gap:8px; align-items:center; }
.wifi-icon { width:16px; height:13px; display:inline-block; position:relative; overflow:hidden; }
.wifi-icon i { position:absolute; left:50%; bottom:2px; transform:translateX(-50%); border:1.4px solid currentColor; border-bottom:0; border-radius:20px 20px 0 0; }
.wifi-icon i:nth-child(1) { width:14px; height:9px; }
.wifi-icon i:nth-child(2) { width:9px; height:6px; }
.wifi-icon i:nth-child(3) { width:4px; height:3px; }
.wifi-icon b { position:absolute; left:50%; bottom:0; width:2.5px; height:2.5px; transform:translateX(-50%); border-radius:50%; background:currentColor; }
.cellular-icon { height:12px; display:flex; align-items:flex-end; gap:1.5px; line-height:1; }
.cellular-icon i { display:block; width:2px; background:currentColor; }
.cellular-icon i:nth-child(1) { height:3px; }
.cellular-icon i:nth-child(2) { height:5px; }
.cellular-icon i:nth-child(3) { height:8px; }
.cellular-icon i:nth-child(4) { height:11px; }
.battery { width:19px; height:9px; border:1.5px solid currentColor; border-radius:2px; position:relative; }
.battery:after { content:""; position:absolute; right:-4px; top:2px; width:2px; height:4px; background:currentColor; }
.battery i { display:block; width:72%; height:100%; background:currentColor; }
.screen-body { height:calc(100% - 24px); display:flex; flex-direction:column; }
.screen-heading { margin:22px 0 5px; font-size:1.48rem; line-height:1.18; letter-spacing:-.04em; }
.screen-sub { margin:0; font-size:.72rem; color:#62655e; line-height:1.55; }
.page-dots { display:flex; gap:5px; margin-top:14px; }
.page-dots i { width:18px; height:3px; background:#b1b4aa; border-radius:4px; }
.page-dots i.active { background:#1b1c18; }
.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.menu-card { min-height:94px; padding:14px; border:1.5px solid #a8aca2; border-radius:13px; display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.23); }
.menu-card.focused { border:3px solid #171814; padding:12.5px; background:#fafbf6; box-shadow:4px 4px 0 #33342f; }
.menu-card .icon { font-size:1.4rem; }
.menu-card strong { font-size:.9rem; }
.menu-card small { font-size:.58rem; color:#6f716b; }
.home-heading { margin-top:26px; font-size:1.52rem; }
.home-menu { display:grid; gap:8px; margin-top:16px; }
.home-card { min-height:82px; padding:12px 18px; border:1.5px solid #a9a69d; border-radius:14px; display:grid; grid-template-columns:54px 1fr 16px; align-items:center; gap:13px; background:#f6f2e9; }
.home-card.focused { border:3px solid #20211e; padding:10.5px 16.5px; box-shadow:4px 4px 0 #393a36; }
.home-card .home-icon { width:54px; height:54px; display:grid; place-items:center; color:#f4f0e8; background:#191a17; border-radius:13px; font-size:1.15rem; font-weight:900; }
.home-card strong { display:block; font-size:1.05rem; line-height:1.2; }
.home-card small { display:block; margin-top:4px; font-size:.63rem; color:#7a776f; }
.home-card em { font-style:normal; font-size:1.3rem; opacity:0; }
.home-card.focused em { opacity:1; }
.screen-footer { margin-top:auto; padding-top:11px; border-top:1px solid #aeb1a7; display:flex; justify-content:space-between; font-size:.6rem; color:#656860; }
.center-stage { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:10px 4px; }
.orb { width:132px; height:132px; border:2px solid #1e1f1b; border-radius:50%; display:grid; place-items:center; position:relative; margin-bottom:24px; background:radial-gradient(circle,#f8f9f3 0 28%,#dadfd4 30% 48%,transparent 50%); }
.orb:before,.orb:after { content:""; position:absolute; border:1px solid #5e625a; border-radius:50%; }
.orb:before { inset:12px; border-style:dashed; }
.orb:after { inset:-9px; opacity:.35; }
.orb span { font-size:1.7rem; font-weight:900; }
.mic-bars { height:38px; display:flex; align-items:center; gap:4px; }
.mic-bars i { width:4px; background:#22231f; animation:pulse .65s ease-in-out infinite alternate; }
.mic-bars i:nth-child(1),.mic-bars i:nth-child(5){height:12px}.mic-bars i:nth-child(2),.mic-bars i:nth-child(4){height:24px}.mic-bars i:nth-child(3){height:36px}
@keyframes pulse{to{transform:scaleY(.45)}}
.big-prompt { font-size:1.35rem; font-weight:850; margin:0 0 8px; }
.hint { font-size:.72rem; color:#63665f; line-height:1.55; margin:0; }
.chat-bubble { margin-top:16px; padding:14px; border:1.5px solid #8f9389; border-radius:13px; font-size:.78rem; line-height:1.58; background:rgba(255,255,255,.3); }
.chat-bubble.user { margin-left:48px; background:#20211d; color:#eff0e8; border-color:#20211d; }
.answer-card { margin-top:14px; padding:17px; border:2px solid #20211d; background:#fafbf5; box-shadow:4px 4px 0 #20211d; font-size:.76rem; line-height:1.65; }
.answer-card b { display:block; font-size:.85rem; margin-bottom:5px; }
.progress { height:7px; background:#c7cbc0; border-radius:8px; margin:16px 0 8px; overflow:hidden; }
.progress i { display:block; height:100%; background:#1d1e1a; border-radius:8px; }
.list-menu { display:grid; gap:8px; margin-top:17px; }
.list-item { min-height:56px; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #d0ccc1; font-size:.84rem; }
.list-item.focused { border:2px solid #1b1c18; border-radius:9px; color:#f1eee6; background:#292a27; box-shadow:none; }
.list-item span { display:flex; align-items:center; gap:10px; }
.list-item small { color:#686b63; font-size:.6rem; }
.settings-page { flex:1; min-height:0; display:flex; flex-direction:column; }
.settings-page .screen-heading { margin-top:10px; }
.settings-page .list-menu { flex:0 0 auto; gap:0; margin-top:4px; }
.settings-page .list-item { min-height:36px; padding:4px 10px; font-size:.72rem; }
.settings-page .list-item span { gap:8px; }
.settings-page .list-item small { font-size:.55rem; }
.settings-page .screen-footer { flex:0 0 auto; padding-top:8px; }
.setting-detail-page .screen-heading,.profile-page .screen-heading { margin-top:18px; }
.setting-option-list { display:grid; gap:9px; margin-top:24px; }
.setting-option { min-height:52px; padding:11px 14px; display:flex; align-items:center; gap:11px; border:1px solid #aaa79d; border-radius:9px; font-size:.82rem; }
.setting-option.focused { border:2px solid #1c1d19; background:#292a27; color:#f7f4ea; }
.setting-option small { margin-left:auto; color:#7d8078; font-size:.58rem; }
.setting-option.focused small { color:#d9d7cf; }
.profile-card { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:23px; }
.profile-card div { min-height:72px; padding:12px; border:1px solid #aaa79d; border-radius:9px; background:rgba(255,255,255,.25); }
.profile-card span,.profile-card b { display:block; }
.profile-card span { font-size:.6rem; color:#70736b; }
.profile-card b { margin-top:8px; font-size:.82rem; }
.profile-hint { margin:16px 3px 0; font-size:.64rem; line-height:1.55; color:#77736c; }
.wifi-provision-page { text-align:center; align-items:center; }
.wifi-provision-page .screen-heading { align-self:stretch; text-align:left; }
.wifi-provision-icon { width:74px; height:74px; margin:29px auto 14px; display:grid; place-items:center; border:2px solid #252622; border-radius:50%; font-size:1.8rem; font-weight:900; }
.wifi-provision-page h2 { margin:36px 0 0; font-size:1.18rem; }
.wifi-provision-page > p { max-width:280px; margin:9px auto 0; color:#656860; font-size:.7rem; line-height:1.55; }
.wifi-provision-page > small { display:block; margin-top:18px; color:#7b7e76; font-size:.61rem; }
.wifi-qr { margin:17px auto 0; transform:scale(.8); transform-origin:top center; height:132px; }
.wifi-provision-page .screen-footer { width:100%; margin-top:auto; }
.wifi-summary-page .screen-heading,.wifi-scan-page .screen-heading { margin-top:24px; }
.wifi-summary-list { display:grid; gap:2px; margin-top:23px; }
.wifi-summary-row { min-height:52px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #c6c4bb; font-size:.9rem; }
.wifi-summary-row span { font-size:.78rem; color:#74776f; }
.wifi-summary-row.focused { border:2px solid #1d1e1a; border-radius:9px; color:#f5f2e9; background:#292a27; }
.wifi-summary-row.focused span { color:#f5f2e9; }
.wifi-summary-page .screen-footer,.wifi-scan-page .screen-footer { width:100%; margin-top:auto; }
.wifi-scan-list { display:grid; gap:0; margin-top:12px; }
.wifi-scan-row { min-height:37px; padding:6px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #cbc9c0; font-size:.77rem; }
.wifi-scan-row span { color:#6e7169; font-size:.62rem; white-space:nowrap; }
.wifi-scan-row.focused { border:2px solid #1d1e1a; border-radius:8px; color:#f5f2e9; background:#292a27; }
.wifi-scan-row.focused span { color:#f5f2e9; }
.success-mark { border-color:#30322e; }
.failure-mark { border-color:#6b6c65; }
.pulse-ring { animation:wifiPulse 1.1s ease-in-out infinite alternate; }
@keyframes wifiPulse { to { transform:scale(1.08); opacity:.65; } }
.question-word { font-size:2.8rem; letter-spacing:-.06em; margin:22px 0 4px; }
.phonetic { color:#63665e; font-size:.76rem; }
.option-list { display:grid; gap:8px; margin-top:21px; }
.option { padding:12px 13px; border:1.5px solid #9da096; border-radius:9px; display:flex; gap:10px; font-size:.78rem; }
.option.focused { border:3px solid #191a17; padding:10.5px 11.5px; background:#fbfcf7; }
.option.bad { text-decoration:line-through; opacity:.58; }
.option.good { color:#fff; background:#20211d; border-color:#20211d; }
.result-number { font-size:4.4rem; line-height:1; font-weight:900; letter-spacing:-.08em; }
.result-label { font-size:.72rem; margin-top:8px; color:#64675f; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:21px; width:100%; }
.metric { padding:12px 5px; border:1px solid #a7aba0; border-radius:8px; }
.metric b { display:block; font-size:1rem; }
.metric span { font-size:.55rem; color:#676a62; }
.toast { position:absolute; left:20px; right:20px; bottom:19px; padding:12px 14px; background:#20211d; color:#eff0e8; border-radius:8px; font-size:.7rem; text-align:center; }
.onboard-graphic { width:100%; height:235px; margin:25px 0 20px; display:grid; place-items:center; border:1.5px solid #989c91; border-radius:17px; background:repeating-linear-gradient(135deg,rgba(0,0,0,.035) 0 1px,transparent 1px 9px); }
.onboard-graphic .mini-device { width:120px; height:174px; border:3px solid #20211d; border-radius:18px; background:#fafbf7; padding:12px; transform:rotate(-5deg); box-shadow:8px 8px 0 #a8aca1; }
.onboard-graphic .mini-screen { height:105px; border:2px solid #20211d; display:grid; place-items:center; font-size:1.5rem; font-weight:900; }
.onboard-graphic .mini-keys { display:flex; justify-content:center; gap:8px; margin-top:15px; }
.onboard-graphic .mini-keys i { width:18px; height:18px; border:2px solid #20211d; border-radius:50%; }
.check-title { text-align:center; margin:18px 0 3px; font-size:1.28rem; }
.check-sub { text-align:center; margin:0; color:#77736c; font-size:.68rem; }
.circle-progress { width:105px; height:105px; flex:0 0 105px; margin:22px auto; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#262724 0 50%,#c9c6bc 50% 100%); position:relative; }
.circle-progress:before { content:""; position:absolute; inset:9px; border-radius:50%; background:#eeeae0; }
.circle-progress b,.circle-progress small { position:relative; z-index:1; }
.circle-progress b { font-size:1.55rem; }
.circle-progress small { position:absolute; top:65px; font-size:.55rem; color:#77736c; }
.check-list { display:grid; gap:6px; }
.check-row { min-height:39px; padding:6px 12px; border:1.5px solid #c4c0b6; border-radius:9px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; background:#f6f2e9; font-size:.72rem; }
.check-row .state { font-size:.6rem; color:#77736c; }
.check-row .dot { width:10px; height:10px; border-radius:50%; background:#c0bdb5; }
.check-row.done .dot { width:20px; height:20px; display:grid; place-items:center; color:#f4f1e9; background:#292a27; }
.check-row.done .dot:after { content:'✓'; font-size:.68rem; }
.detect-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.detect-card { padding:8px 10px; border:1px solid #c4c0b6; border-radius:9px; background:#f6f2e9; }
.detect-card b { display:block; font-size:.8rem; }
.detect-card small { font-size:.54rem; color:#77736c; }
.network-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.network-card { min-height:58px; padding:7px 8px; border:2px solid #bbb7ae; border-radius:13px; background:#f6f2e9; text-align:center; }
.network-card.focused { border:4px solid #252622; padding:8px 6px; box-shadow:3px 3px 0 #343531; }
.network-card .net-icon { font-size:1.25rem; display:inline-block; margin-right:5px; }
.network-card b { display:inline; font-size:.82rem; }
.network-card small { display:block; margin-top:4px; color:#77736c; font-size:.53rem; line-height:1.35; }
.wifi-list { display:grid; gap:7px; margin-top:18px; }
.wifi-row { min-height:55px; padding:11px 14px; border-bottom:1px solid #cbc7bd; display:flex; justify-content:space-between; align-items:center; font-size:.78rem; }
.wifi-row.focused { color:#f5f1e8; background:#292a27; border-radius:9px; padding:11px 14px; }
.qr-wrap { display:grid; place-items:center; margin:24px 0 16px; }
.qr-code { width:175px; height:175px; padding:12px; border:3px solid #252622; background-color:#f8f5ed; background-image:linear-gradient(90deg,#252622 12px,transparent 12px),linear-gradient(#252622 12px,transparent 12px),repeating-linear-gradient(90deg,#252622 0 5px,transparent 5px 11px),repeating-linear-gradient(#252622 0 5px,transparent 5px 11px); background-size:44px 44px,44px 44px,17px 17px,19px 19px; background-blend-mode:multiply; box-shadow:inset 0 0 0 10px #f8f5ed; }
.activation-stage { display:flex; flex:1; flex-direction:column; align-items:center; text-align:center; padding-top:22px; }
.activation-mark { width:42px; height:42px; display:grid; place-items:center; border:2px solid #242522; border-radius:50%; font-size:.7rem; }
.activation-stage .check-title { margin-top:13px; }
.activation-stage .check-sub { max-width:290px; line-height:1.6; }
.activation-stage .qr-wrap { margin:19px 0 12px; }
.activation-stage .qr-code { width:154px; height:154px; }
.activation-help { margin:0; color:#696b64; font-size:.67rem; }
.activation-wait { margin:18px 0 0; color:#4b4d47; font-size:.69rem; font-weight:800; }
.activation-stage .primary-action { min-width:220px; margin:19px auto 12px; padding:13px 20px; }
.primary-action { margin:auto auto 18px; min-width:240px; padding:16px 25px; border:0; border-radius:999px; color:#f4f0e8; background:#292a27; font-size:.8rem; font-weight:850; text-align:center; }
.exception-stage { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:42px 8px 10px; }
.exception-symbol { width:70px; height:70px; display:grid; place-items:center; border:2px solid #252622; border-radius:50%; font-size:1.15rem; font-weight:900; }
.exception-stage h2 { margin:18px 0 7px; font-size:1.32rem; }
.exception-stage > p { max-width:285px; margin:0; color:#62655f; font-size:.72rem; line-height:1.55; }
.exception-stage .support-note { margin-top:12px; color:#858178; font-size:.64rem; }
.troubleshoot-list { width:100%; margin-top:24px; border-top:1px solid #aaa79e; text-align:left; }
.troubleshoot-list div { display:flex; align-items:center; gap:12px; min-height:43px; border-bottom:1px solid #c4c1b8; font-size:.69rem; }
.troubleshoot-list b { color:#77746b; font-size:.55rem; letter-spacing:.05em; }
.screen-body { position:relative; }
.conversation-window { height:410px; margin-top:14px; overflow:hidden; border-bottom:1px solid #a7a399; position:relative; }
.conversation-track { transition:transform .24s ease; padding-bottom:80px; }
.conversation-track .chat-bubble { margin-top:10px; }
.conversation-track .answer-card { box-shadow:none; border-width:1.5px; }
.conversation-track .answer-card p { margin:0 0 9px; }
.conversation-track .answer-card p:last-child { margin-bottom:0; }
.listen-overlay { position:absolute; inset:0; z-index:6; display:grid; place-items:center; text-align:center; color:#292a27; background:rgba(244,242,235,.26); backdrop-filter:blur(.3px); }
.listen-overlay .mic-bars i { background:currentColor; }
.listen-overlay b { display:block; margin-top:15px; font-size:1.2rem; }
.listen-overlay p { max-width:270px; margin:8px auto 0; font-size:.72rem; line-height:1.5; }
.draw-prompt { margin:12px 0 0; padding:10px 12px; border:1px solid #aaa69c; border-radius:9px; font-size:.67rem; line-height:1.45; background:rgba(255,255,255,.35); }
.drawing-frame { height:390px; margin-top:10px; padding:8px; border:1.5px solid #7e7b73; border-radius:10px; background:#faf9f4; overflow:hidden; }
.drawing-frame img { width:100%; height:100%; object-fit:contain; filter:grayscale(1) contrast(1.12); }
.drawing-count { text-align:center; margin-top:6px; font-size:.62rem; color:#77736c; }
.function-card { margin-top:14px; padding:10px; border:2px solid #272824; border-radius:10px; text-align:center; background:#f7f4ec; }
.function-card h3 { margin:0; font-size:1rem; }
.function-card p { margin:3px 0 0; font-size:.72rem; }
.function-graph { width:100%; height:230px; margin-top:12px; }
.formula-notes { margin-top:12px; padding:12px; border:1.5px solid #292a27; border-radius:9px; font-size:.7rem; line-height:1.65; }
.error-mark { width:104px; height:104px; margin:72px auto 32px; border:4px solid #292a27; border-radius:50%; display:grid; place-items:center; font-size:3.2rem; font-weight:300; }
.error-copy { text-align:center; }
.error-copy h2 { font-size:1.45rem; margin:0 0 12px; }
.error-copy p { font-size:.8rem; color:#5f615b; line-height:1.6; }
.ai-dev-panel { position:fixed; left:calc(50% + 285px); top:50%; width:260px; transform:translateY(-50%); padding:22px; border:1px solid #aeb2aa; border-radius:18px; background:rgba(248,248,244,.92); box-shadow:0 22px 55px rgba(20,25,20,.16); backdrop-filter:blur(14px); }
.activation-dev-panel { position:fixed; left:calc(50% + 285px); top:50%; width:260px; transform:translateY(-50%); padding:22px; border:1px solid #aeb2aa; border-radius:18px; background:rgba(248,248,244,.92); box-shadow:0 22px 55px rgba(20,25,20,.16); backdrop-filter:blur(14px); }
.standby-dev-panel { position:fixed; left:calc(50% + 285px); top:50%; width:260px; transform:translateY(-50%); padding:22px; border:1px solid #aeb2aa; border-radius:18px; background:rgba(248,248,244,.92); box-shadow:0 22px 55px rgba(20,25,20,.16); backdrop-filter:blur(14px); }
.wifi-dev-panel { position:fixed; left:calc(50% + 285px); top:50%; width:260px; transform:translateY(-50%); padding:22px; border:1px solid #aeb2aa; border-radius:18px; background:rgba(248,248,244,.92); box-shadow:0 22px 55px rgba(20,25,20,.16); backdrop-filter:blur(14px); }
.dev-kicker { font-size:.66rem; font-weight:900; letter-spacing:.16em; color:#e04c2f; }
.ai-dev-panel h2 { margin:6px 0 16px; font-size:1.05rem; }
.dev-scenarios { display:grid; gap:8px; }
.dev-scenarios button { padding:10px 12px; border:1px solid #aaa; border-radius:9px; background:#fff; text-align:left; font-size:.76rem; cursor:pointer; }
.dev-scenarios button.active { color:#fff; background:#272824; border-color:#272824; }
.ai-dev-panel p { margin:16px 0 0; padding-top:14px; border-top:1px solid #d0d2cc; color:#686b64; font-size:.68rem; line-height:1.55; }
.activation-dev-panel h2 { margin:6px 0 0; font-size:1.05rem; }
.activation-dev-panel p { margin:14px 0 0; padding-top:14px; border-top:1px solid #d0d2cc; color:#686b64; font-size:.68rem; line-height:1.55; }
.standby-dev-panel h2 { margin:6px 0 16px; font-size:1.05rem; }
.standby-dev-panel p { margin:16px 0 0; padding-top:14px; border-top:1px solid #d0d2cc; color:#686b64; font-size:.68rem; line-height:1.55; }
.wifi-dev-panel h2 { margin:6px 0 16px; font-size:1.05rem; }
.wifi-dev-panel p { margin:16px 0 0; padding-top:14px; border-top:1px solid #d0d2cc; color:#686b64; font-size:.68rem; line-height:1.55; }
.activation-complete { width:100%; margin-top:16px; padding:12px; border:1px solid #272824; border-radius:9px; color:#f6f3eb; background:#272824; font-size:.78rem; font-weight:850; cursor:pointer; }
.activation-simulate { width:100%; margin-top:8px; padding:10px; border:1px solid #aeb2aa; border-radius:9px; color:#3f413b; background:transparent; font-size:.7rem; font-weight:800; cursor:pointer; }
.safety-log { color:#7b3227 !important; font-weight:800; }
.ai-start { justify-content:flex-end; text-align:center; padding-bottom:0; }
.bubble-cloud { position:relative; height:310px; flex:1; min-height:265px; }
.speak-bubble { position:absolute; left:50%; bottom:8px; width:146px; height:146px; transform:translateX(-50%); border:3px solid #20211d; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#fafbf6 0 32%,#d7d8d2 33% 55%,transparent 56%); box-shadow:0 0 0 10px rgba(32,33,29,.08),0 0 0 20px rgba(32,33,29,.04); }
.speak-bubble span { font-size:3rem; font-weight:900; }
.feature-bubble { position:absolute; display:grid; place-items:center; border:1.5px solid #777a72; border-radius:50%; background:rgba(250,251,246,.76); font-size:.64rem; font-weight:800; line-height:1.25; }
.bubble-draw { width:84px; height:84px; left:14%; top:32px; }
.bubble-function { width:102px; height:102px; right:8%; top:72px; }
.bubble-chat { width:65px; height:65px; left:5%; top:144px; }
.hold-to-talk { width:250px; margin:14px auto 10px; padding:16px; border:4px solid #22231f; border-radius:999px; font-size:.78rem; font-weight:850; }
.ai-listening { min-height:0; }
.pair-page { min-height:0; }
.pair-content { flex:1; overflow:hidden; }
.chat-scroll-window { flex:1; height:auto; margin-top:14px; }
.chat-scroll-window .conversation-track { padding:0 0 34px; transition:transform .16s ease-out; }
.chat-scroll-window .model-answer { min-height:0; overflow:visible; }
.chat-scroll-window .model-answer p { margin:0 0 10px; }
.chat-scroll-window .model-answer p:last-child { margin-bottom:0; }
.pair-content .chat-bubble { margin-top:16px; }
.model-answer { min-height:118px; box-shadow:none; overflow:hidden; }
.model-answer b { display:inline; margin-right:5px; }
.page-count { text-align:center; margin:7px 0 0; color:#77736c; font-size:.62rem; }
.drawing-frame.compact { height:330px; max-height:330px; margin:12px 0 0; }
.pair-page .function-graph { height:170px; margin:8px 0 0; }
.guardrail-note { margin-top:13px; padding:9px 12px; border:1px dashed #6f554e; border-radius:8px; text-align:center; color:#66433b; font-size:.66rem; font-weight:800; }

.review-panel { align-self:center; max-width:300px; padding:23px; border:1px solid rgba(39,42,37,.3); border-radius:18px; background:rgba(246,247,241,.52); backdrop-filter:blur(12px); box-shadow:0 24px 50px rgba(39,44,36,.1); }
.panel-heading span { font-size:.66rem; font-weight:900; letter-spacing:.18em; color:var(--accent); }
.panel-heading h2 { margin:7px 0 20px; font-size:1.15rem; }
.breadcrumbs { list-style:none; padding:0; margin:0; display:grid; gap:0; counter-reset:path; }
.breadcrumbs li { position:relative; min-height:39px; padding-left:33px; color:#71746c; font-size:.78rem; }
.breadcrumbs li:before { counter-increment:path; content:counter(path); position:absolute; left:0; top:-3px; width:22px; height:22px; display:grid; place-items:center; border:1px solid #a5a9a0; border-radius:50%; font-size:.6rem; }
.breadcrumbs li:not(:last-child):after { content:""; position:absolute; left:11px; top:21px; height:17px; border-left:1px solid #a5a9a0; }
.breadcrumbs li.current { color:#191a17; font-weight:800; }
.breadcrumbs li.current:before { color:white; background:#191a17; border-color:#191a17; }
.review-tip { margin-top:10px; padding:15px; background:#fff; border-radius:11px; border-top:3px solid var(--accent); }
.review-tip span { font-size:.66rem; font-weight:800; color:#777a72; }
.review-tip p { font-size:.78rem; line-height:1.55; margin:7px 0 0; }
.restart-button { width:100%; margin-top:15px; padding:11px; border:1.5px solid #1c1d19; border-radius:9px; background:transparent; font-weight:800; font-size:.76rem; cursor:pointer; }
.restart-button:hover { background:#1c1d19; color:white; }
.prototype-note { margin:14px 2px 0; font-size:.66rem; line-height:1.55; color:#777a72; }

.standby-screen { height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.55),transparent 38%),repeating-linear-gradient(0deg,rgba(45,45,41,.04) 0 1px,transparent 1px 4px); }
.standby-status { display:flex; justify-content:space-between; min-height:18px; font-size:.56rem; color:#61645d; }
.standby-clock { margin-top:58px; position:relative; z-index:1; }
.standby-clock p { margin:0; color:#686b64; font-size:.72rem; }
.standby-clock span { display:block; margin-top:9px; font-size:.66rem; color:#797b74; }
.standby-landscape { position:absolute; left:-10%; right:-10%; bottom:44px; height:138px; overflow:hidden; }
.standby-landscape i { position:absolute; bottom:-68px; border:1px solid #74766f; border-radius:50% 50% 0 0; }
.standby-landscape i:nth-child(1) { left:-2%; width:60%; height:130px; }
.standby-landscape i:nth-child(2) { left:35%; width:66%; height:164px; }
.standby-landscape i:nth-child(3) { left:72%; width:48%; height:112px; }
.standby-art { flex:1; display:flex; flex-direction:column; align-items:center; padding-top:11px; }
.standby-art > span { align-self:flex-start; margin:5px 0 9px; font-size:.64rem; color:#656860; }
.standby-art img { width:min(100%,300px); max-height:340px; object-fit:contain; border:1px solid #8e9189; background:#fff; }
.standby-art small { margin-top:9px; color:#696c65; font-size:.62rem; }
.standby-reminder { flex:1; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding-top:46px; margin-bottom:18px; }
.reminder-kicker { padding:5px 11px; border:1px solid #8c8f87; border-radius:999px; font-size:.58rem; letter-spacing:.1em; }
.reminder-list { display:grid; gap:0; margin-top:21px; border-top:1px solid #aaa9a1; }
.reminder-list div { display:flex; align-items:center; gap:15px; min-height:53px; border-bottom:1px solid #c4c2b9; text-align:left; }
.reminder-list time { width:43px; font-size:.7rem; font-weight:800; }
.reminder-list b { font-size:.78rem; }
.standby-reminder i { margin-top:14px; font-style:normal; color:#81847c; font-size:.58rem; text-align:center; }
.standby-wake { margin-top:auto; padding:10px 0 1px; border-top:1px solid #aaa9a1; color:#777a73; font-size:.55rem; }

@media (max-width:760px){
  .workspace{padding:16px 10px 40px; overflow:visible}.device-stage{min-height:auto; width:100%; transform:none}.device{width:min(100%,430px); padding:25px 20px 27px}.screen-shell{height:540px}.hardware-keys{padding:0 15px}
  .ai-dev-panel{position:static; width:min(100%,430px); transform:none; margin:16px auto 0}.workspace:has(.ai-dev-panel:not([hidden])){align-content:start}.conversation-window{height:365px}.drawing-frame{height:345px}
  .activation-dev-panel{position:static; width:min(100%,430px); transform:none; margin:16px auto 0}
  .standby-dev-panel{position:static; width:min(100%,430px); transform:none; margin:16px auto 0}
  .wifi-dev-panel{position:static; width:min(100%,430px); transform:none; margin:16px auto 0}
}
@media (max-width:450px){
  .workspace{padding-left:6px;padding-right:6px}.device{border-radius:31px;padding-left:14px;padding-right:14px}.screen{padding:18px 16px}.hardware-keys{gap:9px;padding:0 5px}.hardware-key{height:65px}.hardware-key.confirm{width:104px;height:65px}.screen-shell{height:510px}.menu-card{min-height:86px}
}