:root{color-scheme:light;--start-width:720px}*{box-sizing:border-box}body{margin:0;background:var(--q-paper);color:var(--q-text);font-family:var(--q-font);font-size:16px;line-height:1.55}.skip-link{position:absolute;left:-10000px;top:8px;padding:10px;background:var(--q-surface);z-index:10}.skip-link:focus{left:8px}.site-head{height:64px;padding:0 max(20px,calc((100vw - 960px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--q-surface);border-bottom:1px solid var(--q-line)}.brand-link{display:flex;align-items:center;gap:9px;color:var(--q-text);font-size:18px;font-weight:750;text-decoration:none}.brand-mark{width:30px;fill:none;stroke:var(--q-blue-600);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.text-link{color:var(--q-info);font-weight:700}.preview-banner{position:sticky;top:0;z-index:8;max-width:960px;margin:12px auto 0;padding:10px 14px;display:flex;gap:10px;align-items:center;background:var(--q-info-bg);color:var(--q-info);border:1px solid #c8d9fb;border-radius:12px;font-size:14px}.preview-banner svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}main{max-width:var(--start-width);margin:0 auto;padding:24px 20px 108px}.view{animation:rise .18s ease-out}.view[hidden]{display:none}.eyebrow{color:var(--q-text-2);font-size:12px;font-weight:800;letter-spacing:.12em}h1{margin:4px 0;font-size:clamp(28px,6vw,36px);line-height:1.2;color:var(--q-text)}h2{font-size:18px;line-height:1.35;margin:0;color:var(--q-text)}p{margin:0}.lead{color:var(--q-text-2);margin:8px 0 20px}.muted{color:var(--q-text-2);font-size:14px}.microcopy{min-height:26px;color:var(--q-text-2);font-size:14px;margin-top:8px}.step-dots{display:flex;align-items:center;gap:10px;margin:18px 0}.step-dots span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--q-line-strong);color:var(--q-text-2);font-size:14px}.step-dots span[aria-current=step]{background:var(--q-btn-bg,var(--q-blue-600));border-color:var(--q-blue-600);color:white}.step-dots i{height:1px;width:35px;background:var(--q-line-strong)}.card{background:var(--q-surface);border:1px solid var(--q-line);border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(19,27,51,.045)}.stack{display:grid;gap:12px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice{min-height:124px;display:grid;justify-items:start;align-content:center;gap:5px;padding:16px;border:1px solid var(--q-line-strong);border-radius:14px;background:var(--q-surface);text-align:left;color:var(--q-text);cursor:pointer}.choice svg,.guide-card svg,.sync-icon svg{width:26px;height:26px;fill:none;stroke:var(--q-info);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.choice span{font-size:18px;font-weight:750}.choice small{font-size:13px;color:var(--q-text-2)}.choice[aria-pressed=true],.grade-list button[aria-pressed=true]{outline:2px solid var(--q-blue-600);outline-offset:1px;background:var(--q-blue-50)}.grade-list{display:flex;flex-wrap:wrap;gap:10px}.grade-list button{min-height:48px;border:1px solid var(--q-line-strong);border-radius:12px;padding:8px 14px;background:var(--q-surface);color:var(--q-text);font-weight:700;cursor:pointer}.actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.button{min-height:48px;padding:10px 18px;border:1px solid transparent;border-radius:12px;display:inline-flex;justify-content:center;align-items:center;font-size:15px;font-weight:750;text-decoration:none;cursor:pointer}.button:disabled{opacity:.48;cursor:not-allowed}.primary{background:var(--q-btn-bg,var(--q-blue-600));color:white}.secondary{background:var(--q-surface);border-color:var(--q-line-strong);color:var(--q-info)}.quiet{background:transparent;color:var(--q-info)}.full{width:100%;margin-top:16px}.setting-list{padding:2px 18px}.setting-row{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--q-line)}.setting-row:last-child{border:0}.setting-row>span:first-child{display:grid;gap:2px}.setting-row small{color:var(--q-text-2);font-size:13px}.setting-row input[type=checkbox]{width:23px;height:23px;accent-color:var(--q-blue-600)}select{min-height:42px;border:1px solid var(--q-line-strong);border-radius:9px;background:var(--q-surface);color:var(--q-text);padding:6px 26px 6px 10px}.device-badge{border-radius:999px;background:var(--q-sunken);padding:5px 10px;font-size:13px;font-weight:700}.setting-row details{max-width:240px}.setting-row details p,.card details p{font-size:14px;color:var(--q-text-2);margin:8px 0 2px}.setting-row details summary,.card summary{color:var(--q-info);font-weight:700;cursor:pointer}.sync-card{display:flex;align-items:center;gap:14px;margin-bottom:14px}.sync-icon{width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center;background:var(--q-info-bg)}.sync-card h2{margin-bottom:4px}.sync-card p{color:var(--q-text-2);font-size:14px}.guide-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.guide-card{display:grid;grid-template-columns:32px 30px 1fr;gap:12px;align-items:center;padding:16px}.guide-number{font-size:12px;font-weight:800;color:var(--q-text-2)}.guide-card h2{font-size:16px}.guide-card p{color:var(--q-text-2);font-size:14px;margin-top:4px}.bottom-nav{position:fixed;z-index:4;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;justify-content:space-around;gap:3px;background:rgba(255,255,255,.97);border:1px solid var(--q-line);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -7px 24px rgba(19,27,51,.06)}.bottom-nav a{min-height:44px;padding:10px 8px;border-radius:9px;color:var(--q-text-2);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}.bottom-nav a[aria-current=page]{color:var(--q-info);background:var(--q-blue-50)}.state-panel{margin:8px 0 18px;padding:18px;border:1px solid var(--q-line-strong);border-radius:16px;background:var(--q-surface)}.state-panel h2{margin-bottom:5px}.state-panel p{color:var(--q-text-2);font-size:14px;margin-bottom:12px}.state-panel[data-state=error]{border-color:#e8b8b3;background:var(--q-error-bg)}.state-panel[data-state=permission]{border-color:#e8d7a8;background:var(--q-amber-100)}:focus-visible{outline:3px solid #1462d7;outline-offset:3px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{border-radius:8px}@keyframes rise{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.preview-banner{margin:8px 12px 0}.site-head{height:56px;padding:0 16px}main{padding:22px 16px 108px}.card{padding:17px}.bottom-nav a{font-size:11px;padding:10px 5px}.setting-row details{max-width:150px}.guide-card{grid-template-columns:26px 26px 1fr;padding:14px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.state-picker{max-width:960px;margin:8px auto 0;display:flex;justify-content:flex-end;align-items:center;gap:8px;color:var(--q-text-2);font-size:13px}.state-picker select{min-height:36px;padding:4px 8px}@media(max-width:600px){.state-picker{margin:8px 14px}}
[hidden]{display:none!important}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.choice{min-width:0}.bottom-nav{left:0;transform:none;width:100%}@media(max-width:600px){.choice-grid{gap:8px}.choice{padding:12px}.bottom-nav{border-radius:14px 14px 0 0}}
html,body{width:100%;max-width:100%;overflow-x:hidden}main,.view,.card,.choice-grid{min-width:0}.view{width:100%}.card{width:100%}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.choice{overflow-wrap:anywhere}@media(max-width:800px){.choice{min-width:0}.bottom-nav{left:0;transform:none;width:100%}}
.state-picker{width:calc(100% - 28px);box-sizing:border-box;margin:8px auto 0}@media(max-width:480px){.choice-grid{grid-template-columns:1fr}}
@media(max-width:600px){main{max-width:360px;margin-left:0;margin-right:auto}.bottom-nav{max-width:360px;justify-content:space-between}.choice-grid{grid-template-columns:1fr}}
@media(max-width:600px){.state-picker{width:360px;max-width:100%;margin-left:0;margin-right:auto}}
.sync-modes{display:flex;gap:8px;margin:0 0 12px}.sync-modes button{min-height:44px;flex:1;border:1px solid var(--q-line-strong);border-radius:10px;background:var(--q-surface);color:var(--q-info);font-weight:700}.sync-modes button[aria-pressed=true]{background:var(--q-btn-bg,var(--q-blue-600));border-color:var(--q-blue-600);color:white}
.preview-banner{position:sticky;top:0;z-index:8;max-width:none;margin-top:0;border-radius:0;}