:root {
    color-scheme:light; --ink:#242424; --ink-dim:#666; --ink-faint:#6f6f6f;
    --line:#bcbcbc; --line-soft:#e5e5e5; --line-control:#aaa; --surface:#fafafa;
    --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    --font-serif:var(--font-sans); --page-max:960px; --form-max:640px; --action-max:420px; --dock-height:102px;
    /* 字阶：标题 / 正文 / 弱提示 */
    --text-title:26px; --text-body:14px; --text-faint:12px;
    /* 统一间距尺度：页边、标题/正文/底栏与区块内外距共用 */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px;
    --gutter:24px; --stack-gap:12px; --section-gap:32px; --module-gap:var(--space-5);
    --radius-control:5px; --radius-card:8px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  [hidden]{display:none!important}
  html{background:#f3f3f3}
  body{margin:0;color:var(--ink);font:var(--text-body)/1.7 var(--font-sans);overflow-wrap:anywhere}
  button,input,select,textarea{font:inherit}
  button,a,input,select,textarea{touch-action:manipulation}
  button,a{ -webkit-user-select:none;user-select:none }
  button{cursor:pointer}
  button:disabled{cursor:default;opacity:.38}
  button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #333;outline-offset:4px}
  input:focus,select:focus,textarea:focus{outline:2px solid #777;outline-offset:2px}
  a{color:inherit}
  h1,h2,h3,p{margin:0}
  h2{font-size:var(--text-title);line-height:1.35;font-weight:700;letter-spacing:-.025em}
  h3{font-size:17px;line-height:1.5}
  .stage{width:100%;max-width:var(--page-max);margin:0 auto;min-height:100dvh;background:#fff;position:relative}
  .brand{height:calc(82px + env(safe-area-inset-top,0px));padding:calc(24px + env(safe-area-inset-top,0px)) var(--gutter) 22px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between}
  .brand h1{font-size:18px;line-height:1.5;letter-spacing:.055em}
  .brand-tools{display:flex;gap:var(--space-2);align-items:center}
  .icon-button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink);text-decoration:none}
  .icon-button:hover{background:#f2f2f2}
  .icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
  main{padding:0 var(--gutter)}
  .screen{display:none;padding:var(--space-6) 0 calc(var(--dock-height) + var(--space-5));min-height:calc(100dvh - 82px - env(safe-area-inset-top,0px))}
  .screen.active{display:block}
  .screen:focus{outline:none}
  .eyebrow{font-size:var(--text-faint);letter-spacing:.12em;color:var(--ink-faint);margin-bottom:var(--space-3)}
  .lead{font-size:var(--text-body);color:var(--ink-dim);margin:var(--space-2) 0 var(--module-gap)}
  .muted,.form-hint,.guide-note,.form-msg,.dock-note,.records-empty,.home-date,.status-bottom{color:var(--ink-faint);font-size:var(--text-faint);line-height:1.8}
  .status-screen{display:flex;min-height:calc(100dvh - 220px);flex-direction:column;justify-content:center;text-align:center}
  .status-screen h2{font-size:23px;margin:var(--space-6) 0 var(--space-4)}
  .status-screen .lead{margin:0 auto var(--space-5);max-width:310px}
  .status-icon{position:relative;display:block;width:60px;height:60px;border:5px solid #242424;border-radius:50%;margin:0 auto}
  .status-icon.nfc:after{content:"";position:absolute;inset:6px;border:4px solid #242424;border-radius:50%}
  .status-icon.blocked:after{content:"";position:absolute;height:5px;width:58px;background:#242424;top:23px;left:-4px;transform:rotate(-45deg)}
  .checking .status-icon{animation:pulse 1.8s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.45;transform:scale(.96)}}
  .note-panel{padding:var(--space-3) var(--space-4);border-left:2px solid var(--line-control);background:#f2f2f2;font-size:var(--text-faint);line-height:1.9;text-align:left}
  .status-screen .eyebrow{margin:0 0 var(--space-7)}
  .status-bottom{position:absolute;bottom:50px;left:var(--gutter);right:var(--gutter);text-align:center}
  .dock{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--page-max);padding:var(--space-4) var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line-soft);display:grid;gap:var(--space-2);justify-items:center}
  .dock-note{line-height:1.6;text-align:center}
  .btn-primary,.sim-btn,.primary{display:block;width:100%;max-width:var(--action-max);min-height:46px;padding:12px 16px;background:#242424;color:white;border:1px solid #242424;border-radius:var(--radius-control);text-align:center;text-decoration:none;font-size:15px;line-height:1.4}
  .btn-secondary,.again-btn,.share-btn{display:block;width:100%;max-width:var(--action-max);min-height:44px;padding:11px 16px;border:1px solid var(--line-control);background:#fff;color:#242424;border-radius:var(--radius-control);text-align:center;text-decoration:none;font-size:var(--text-body);line-height:1.4}
  .text-button{background:none;border:0;padding:var(--space-2) 0;color:var(--ink-dim);font-size:var(--text-faint);text-decoration:underline;text-underline-offset:3px}
  .dock .text-button{width:100%;max-width:var(--action-max);text-align:center}
  .field-col{display:flex;flex-direction:column;gap:9px;margin-bottom:var(--module-gap)}
  .pin-cells{display:flex;gap:8px;justify-content:center;margin:18px 0}
  .pin-cell{width:42px;height:52px;text-align:center;font-size:22px;border:1px solid var(--line);background:#fff;color:var(--ink)}
  .pin-cell.err{border-color:#111}
  .field-col label,.field-label{display:block;font-weight:600;font-size:var(--text-body);color:#242424}
  .field-col .opt,.field-label .opt{font-size:var(--text-faint);font-weight:400;color:var(--ink-faint);margin-left:6px}
  input:not([type=checkbox]):not([type=hidden]),select,textarea{width:100%;min-width:0;min-height:50px;padding:12px 13px;border:1px solid var(--line-control);border-radius:var(--radius-control);background:#fff;color:#242424;font-size:16px;line-height:1.5}
  input[type=date]{display:block;min-height:50px;-webkit-appearance:none;appearance:none}
  input::placeholder,textarea::placeholder{color:#aaa}
  /* 出生时间：年月日 + 时辰并排，避免原生日历翻年 */
  .birth-block{display:grid;gap:var(--space-2)}
  .birth-date{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:var(--space-2)}
  .birth-date select,.birth-block>select{min-width:0;width:100%}
  .birth-block.err .birth-date select,.birth-block.err>select{border-color:#333;outline:2px solid #999}
  input[type=hidden]{display:none}
  .err{border-color:#333!important;outline:2px solid #999}
  .form-msg{margin-top:var(--space-2)}
  .form-msg:empty{display:none}
  #profileForm .lead{margin-bottom:var(--space-6)}
  .consent{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:22px;font-size:12px;line-height:1.8}
  .consent input{width:18px;height:18px;margin:2px 0 0;flex-shrink:0;accent-color:#242424}
  /* 出生时间：一行分段（时辰 / 钟点 / 不填） */
  .segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border:1px solid var(--line-control);border-radius:var(--radius-control);overflow:hidden;background:#fff}
  .segmented button{min-height:44px;padding:8px 6px;border:0;border-right:1px solid var(--line-control);border-radius:0;background:#fff;color:#333;font-size:var(--text-body);line-height:1.3}
  .segmented button:last-child{border-right:0}
  .segmented button.is-active,.segmented button[aria-checked=true]{background:#242424;color:#fff}
  .home-date{margin:0 0 var(--space-3);letter-spacing:.1em}
  .activation-label{display:table;margin:6px 0 var(--space-3);padding:3px 12px;border:1px solid var(--line-control);border-radius:999px;font-size:var(--text-faint);line-height:1.5}
  .token-card,.guide-summary{padding:18px var(--space-4);border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface)}
  .question-block{padding:var(--space-4) 0;margin-bottom:var(--module-gap);border-bottom:1px solid var(--line-soft);background:transparent}
  .token-card h3{margin-bottom:var(--space-4)}
  .token-card p{font-size:13px;line-height:1.9;color:var(--ink-faint)}
  .token-card p+p{margin-top:18px}
  .home-section-title{margin:var(--space-6) 0 var(--space-5);font-size:18px}
  .usage-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-control)}
  .usage-item{padding:18px 14px}
  .usage-item+.usage-item{border-left:1px solid var(--line-control)}
  .usage-cap{display:block;font-size:var(--text-body);margin-bottom:var(--space-2)}
  .usage-num{font-size:36px;line-height:1.35;font-weight:700;font-variant-numeric:tabular-nums}
  .usage-total{font-size:var(--text-faint);color:var(--ink-dim);font-weight:600;margin-left:6px;white-space:nowrap}
  .usage-remaining{display:block;color:var(--ink-faint);font-size:var(--text-faint);margin-top:var(--space-2)}
  .home-note{font-size:var(--text-faint);color:var(--ink-faint);margin:10px 0 0}
  .home-links{display:flex;gap:20px;margin:22px 0 0}
  #screenQuestion{padding-top:var(--space-7)}
  .question-categories{display:flex;gap:var(--space-2);margin:var(--module-gap) 0}
  .question-categories button{min-height:36px;padding:6px 12px;border:1px solid var(--line-control);border-radius:var(--radius-control);color:#333;background:#fff;font-size:13px}
  .question-categories button[aria-pressed=true]{background:#242424;color:#fff;border-color:#242424}
  textarea{resize:vertical;min-height:166px;margin-top:var(--space-3)}
  .question-count,.question-usage-strip{text-align:right;color:var(--ink-faint);font-size:var(--text-faint);margin-top:var(--space-2);font-variant-numeric:tabular-nums}
  .question-count.over-limit{color:#242424;font-weight:700}
  .question-usage-strip{margin:var(--space-2) 0 0}
  /* 仪式页：签桶为唯一视觉焦点；步骤条弱化 */
  #screenRitual{padding-top:var(--space-1);padding-bottom:calc(var(--dock-height) + var(--space-2))}
  .ritual-hero{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--space-2);min-height:0;margin:0;padding:0;overflow:visible}
  .ritual-hero h2{position:static;transform:none;z-index:auto;flex:0 0 auto;white-space:nowrap;font-size:17px;line-height:1.25;font-weight:700;letter-spacing:-.02em;margin:0;transition:opacity .25s ease}
  .ritual-art-wrap{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:0;overflow:visible;position:relative;z-index:2;flex:1;min-width:0}
  .ritual-art{width:132px;height:auto;flex-shrink:0;overflow:visible;display:block}
  #dl-stage{transform-box:view-box;transform-origin:50% 78%}
  .ritual-art .lot,.ritual-art .flyer{transform-box:view-box;transform-origin:0 0}
  .ritual-art .flyer{pointer-events:none}
  .ritual-art .motion{opacity:0}
  .ritual-yao-board{width:64px;height:90px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:opacity .25s ease,width .25s ease,height .25s ease}
  .ritual-yao-board svg{display:block;width:100%;height:100%}
  #screenRitual.is-drawing .ritual-hero h2{opacity:.12}
  #screenRitual.is-drawing .ritual-art{width:200px}
  #screenRitual.is-drawing .ritual-yao-board{width:0;height:0;overflow:hidden;opacity:0}
  #screenRitual.is-drawing .ritual-focus,
  #screenRitual.is-drawing .ritual-lead,
  #screenRitual.is-drawing .ritual-step,
  #screenRitual.is-drawing .ritual-footnote{opacity:.12;pointer-events:none}
  #screenRitual.is-drawing .dock{opacity:.18;pointer-events:none}
  .ritual-focus{text-align:center;margin:var(--space-1) 0 0;font-size:13px;line-height:1.35}
  .ritual-lead{text-align:center;color:var(--ink-faint);font-size:var(--text-faint);line-height:1.45;margin:0 0 var(--module-gap)}
  .ritual-step{border:0;border-top:1px solid var(--line-soft);border-radius:0;background:transparent;padding:var(--stack-gap) 0;margin-bottom:0}
  .ritual-step h3{font-size:13px;line-height:1.3;font-weight:600;color:var(--ink-dim)}
  .ritual-step p{font-size:var(--text-faint);line-height:1.45;color:var(--ink-faint);margin:var(--space-1) 0 var(--space-2)}
  .ritual-step .ritual-counter{float:right;margin:0;font-size:10px;line-height:1.3;color:var(--ink-faint);font-variant-numeric:tabular-nums}
  .ritual-step.done{border-color:var(--line-soft);animation:none}
  .ritual-action{width:100%;border-radius:var(--radius-control);border:1px solid #242424;background:#242424;color:#fff;padding:8px 10px;min-height:38px;font-size:var(--text-body)}
  .ritual-action:disabled{background:#dedede;border-color:#dedede;color:var(--ink-dim);opacity:1}
  .ritual-step.done .ritual-action{background:#fff;border-color:var(--line-control);color:var(--ink-dim)}
  .ritual-footnote{text-align:center;color:var(--ink-faint);font-size:10px;line-height:1.35;margin:var(--space-2) 0 0}
  #screenRitual .dock{gap:6px;padding-top:var(--space-3);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));transition:opacity .25s ease}
  #screenRitual .dock-note{font-size:11px;line-height:1.35}
  .card{width:100%}
  .result-hero{text-align:center;padding:var(--space-5) 0 var(--space-5)}
  .hexagram-symbol{display:block;width:80px;height:80px;margin:0 auto var(--space-5);fill:currentColor}
  .hexagram-unavailable{color:var(--ink-faint);font-size:var(--text-faint)}
  .level{display:table;margin:var(--space-3) auto var(--space-4);padding:4px 12px;border:1px solid var(--line-control);border-radius:999px;font-size:var(--text-faint);line-height:1.6}
  .lv-ss{color:#242424}.lv-s{color:#3e3e3e}.lv-m{color:#505050}.lv-x{color:#616161}.lv-xx{color:var(--ink-faint)}
  .title{font-size:30px;line-height:1.3;margin:0}
  .result-summary{font-size:var(--text-body);line-height:1.8;white-space:pre-wrap}
  .q-label{font-size:15px;font-weight:700}
  .question-block p{margin-top:var(--space-3);line-height:1.9;white-space:pre-wrap}
  .block{margin:var(--module-gap) 0}
  .block-label{font-size:16px;font-weight:700;margin-bottom:10px}
  .block p{font-size:var(--text-body);line-height:1.9;white-space:pre-wrap}
  .poem{font-size:var(--text-body);line-height:2;white-space:pre-wrap}
  .public-detail{border-top:1px solid var(--line-soft);padding-top:var(--space-4);margin-top:22px;font-size:13px;color:var(--ink-dim)}
  .public-detail summary{cursor:pointer;min-height:30px;font-weight:600;color:#333}
  .result-guidance{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--space-3);margin:var(--module-gap) 0}
  .result-guidance div{border:1px solid var(--line-soft);border-radius:0;background:transparent;padding:var(--space-3) 0;line-height:1.8}
  .keywords{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--space-3)}
  .keywords span{border:1px solid var(--line-soft);border-radius:var(--radius-control);padding:3px 8px;font-size:var(--text-faint);color:var(--ink-dim)}
  .result-code{border-top:1px solid var(--line-soft);padding-top:18px;margin:22px 0;color:var(--ink-faint);font-size:var(--text-faint)}
  code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
  .result-code code{display:block;margin-top:6px;font-size:13px;color:#333}
  /* 结果底栏：主钮 + 两条文字链；底边留安全距，避免贴边/裁切 */
  #screenResult{--dock-height:184px}
  #screenResult .dock{padding-top:var(--space-4);padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));gap:var(--space-2)}
  .claim-hint{color:var(--ink-dim);font-size:var(--text-faint);margin:var(--space-3) 0}
  .guide-title{font-size:24px;margin:4px 0 18px}
  .guide-summary h3{font-size:15px}
  .guide-sub{font-size:13px;color:var(--ink-faint);white-space:pre-wrap;margin-top:10px}
  .guide-section{position:relative;padding-left:38px;margin:var(--space-5) 0}
  .step-number{position:absolute;left:0;top:0;border:1px solid #666;border-radius:50%;width:26px;height:26px;text-align:center;line-height:24px;font-size:13px}
  .guide-label{font-size:15px;font-weight:700;margin-bottom:var(--space-3)}
  .guide-code{display:block;font-size:16px;font-weight:700;line-height:1.65;letter-spacing:.015em;margin:10px 0 14px;user-select:all}
  .guide-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .guide-actions button,.guide-actions a{width:auto;min-height:40px;font-size:12px}
  .manual-copy{margin:var(--space-3) 0}
  .guide-qr-wrap img{display:block;width:168px;height:168px;max-width:100%;object-fit:contain;border:1px solid #ddd;padding:7px;background:#fff;cursor:zoom-in}
  .qr-placeholder{display:grid;place-items:center;width:168px;height:168px;max-width:100%;border:1px dashed var(--line-control);color:var(--ink-faint);text-align:center;background:repeating-linear-gradient(45deg,#fafafa,#fafafa 8px,#f5f5f5 8px,#f5f5f5 16px);padding:18px;font-size:var(--text-faint)}
  .guide-note{margin-top:10px}
  .guide-expired{padding:var(--space-3);background:#f2f2f2;font-size:12px;margin:var(--space-4) 0}
  .guide-next{scroll-margin-top:24px}
  .notice,.recover-bar{padding:var(--space-3) var(--space-4);border:1px solid var(--line-control);border-radius:var(--radius-card);background:var(--surface);color:var(--ink-dim);font-size:var(--text-faint);margin:var(--space-4) 0}
  .notice:empty{display:none}
  .recover-actions{display:flex;gap:var(--space-2);margin-top:10px}
  .recover-actions button{flex:1;font-size:var(--text-faint);min-height:40px;border-radius:var(--radius-control)}
  .records-title{font-size:16px;margin:var(--module-gap) 0 var(--space-3)}
  .record-list{display:grid;gap:var(--stack-gap)}
  .record-item{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--radius-card);padding:14px;background:#fff;color:#242424}
  .skeleton-list{display:grid;gap:var(--stack-gap)}
  .skeleton-item{height:64px;border:1px solid var(--line-soft);border-radius:var(--radius-card);background:linear-gradient(90deg,#f3f3f3 25%,#fafafa 50%,#f3f3f3 75%);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  #screenResult.enter .card{animation:fadeUp .32s ease}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  #screenArchive.is-loading .archive-section,#screenArchive.is-loading #archiveForm{opacity:.45;pointer-events:none}
  .record-main{flex:1;min-width:0}
  .record-title{display:block;font-size:var(--text-body);font-weight:600}
  .record-sub{display:block;font-size:11px;color:var(--ink-faint);margin-top:6px;overflow-wrap:anywhere}
  .record-side{font-size:11px;white-space:nowrap;border:1px solid var(--line);border-radius:var(--radius-control);padding:2px 6px}
  .records-empty{padding:10px 0}
  .archive{display:flex;flex-direction:column;gap:var(--section-gap)}
  .archive-head h2{font-size:25px}
  .archive-head p{font-size:var(--text-faint);color:var(--ink-faint);margin-top:var(--space-2)}
  .archive-back{border:0;background:none;padding:0 0 var(--space-4);color:var(--ink-dim);font-size:var(--text-faint)}
  /* 个人中心：分区用间距分隔，不做灰底套灰卡 */
  .archive-section{margin:0;padding:0;border:0;border-top:1px solid var(--line-soft);padding-top:var(--space-5);background:transparent}
  .archive-head+.archive-section{border-top:0;padding-top:0}
  .archive-section h3{margin-bottom:var(--stack-gap);font-size:16px}
  .bazi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--stack-gap);margin-top:var(--space-3)}
  @media (min-width:720px){.bazi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .bazi-pillar{border:1px solid var(--line-soft);border-radius:var(--radius-control);padding:10px;font-size:var(--text-faint);line-height:1.5;background:#fff}
  .bazi-pillar h4{margin:0 0 6px;font-size:13px}
  .bazi-pillar .gz{font-size:18px;font-weight:600;letter-spacing:.08em;margin-bottom:6px}
  .bazi-pillar .meta{color:var(--ink-faint)}
  .bazi-warn{margin-top:10px;font-size:var(--text-faint);color:var(--ink-faint)}
  .bazi-status{margin-top:var(--space-2);font-size:13px}
  .archive-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--stack-gap)}
  .archive-section-head h3{margin-bottom:0}
  .archive-edit-toggle{padding:0;border:0;background:none;color:var(--ink-dim);font-size:var(--text-faint);text-decoration:underline;text-underline-offset:3px}
  .archive-summary{display:grid;gap:var(--stack-gap);margin:0}
  .archive-summary .row{display:flex;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--line-soft);font-size:13px}
  .archive-summary .row:last-child{border-bottom:0;padding-bottom:0}
  .archive-summary dt{color:var(--ink-faint);font-size:var(--text-faint);flex-shrink:0}
  .archive-summary dd{margin:0;text-align:right;overflow-wrap:anywhere}
  .archive-actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);margin-top:18px}
  .archive-actions .block-btn{margin-top:0}
  .archive-history-note{font-size:var(--text-faint);color:var(--ink-faint);margin:0 0 10px}
  .archive-record{margin-top:10px}
  .archive-section .block-btn{margin-top:18px}
  .archive-stat-row{display:flex;gap:var(--stack-gap);flex-wrap:wrap}
  .archive-stat{flex:1;min-width:74px;background:transparent;border:1px solid var(--line-soft);border-radius:var(--radius-control);padding:10px;text-align:center}
  .archive-stat b{display:block;font-size:23px}
  .archive-stat span{font-size:11px;color:var(--ink-faint)}
  .archive-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:var(--space-4);font-variant-numeric:tabular-nums}
  .archive-table th,.archive-table td{text-align:left;padding:var(--space-2) 4px;border-bottom:1px solid var(--line-soft)}
  .archive-draw{padding:var(--space-3);border:1px solid var(--line-soft);border-radius:var(--radius-control);margin-top:10px;background:#fff}
  .archive-draw summary{cursor:pointer;font-size:13px}
  .archive-draw .sub{font-size:11px;color:var(--ink-faint);margin-top:6px}
  .archive-draw .body{white-space:pre-wrap;font-size:12px;margin-top:10px}
  .share-overlay{position:fixed;z-index:40;top:calc(56px + env(safe-area-inset-top,0px));right:0;bottom:0;left:0;background:rgba(0,0,0,.77);overflow-x:hidden;overflow-y:auto}
  .share-overlay img{display:block;max-width:100%}
  .footer-note{font-size:11px;color:#999;margin:var(--space-6) 0 0;text-align:center}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  @media(min-width:720px){
    :root{--gutter:32px}
    #screenProfile form,#screenQuestion>h2,#screenQuestion>.lead,#screenQuestion>.question-categories,#screenQuestion>.field-label,#screenQuestion>textarea,#screenQuestion>.question-count,#screenQuestion>.form-msg,#screenQuestion>.question-usage-strip,#screenArchive .archive-section,#screenRecords .record-list{max-width:var(--form-max)}
    #screenQuestion>textarea{min-height:200px}
  }
  @media(min-width:900px){
    #screenResult .card{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);column-gap:48px;align-items:start}
    #screenResult .result-hero{position:sticky;top:28px;text-align:center;padding-top:var(--space-2)}
    #screenResult .result-body{min-width:0;padding-bottom:var(--space-3)}
    #screenResult .result-summary{text-align:left}
    #screenGuide .guide{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);column-gap:40px;align-items:start}
    #screenGuide .guide-title{grid-column:1/-1}
    #screenGuide .guide-summary{grid-column:1;position:sticky;top:28px}
    #screenGuide .guide-steps{grid-column:2;min-width:0}
    #screenGuide .guide>.guide-note,#screenGuide .guide>.guide-expired,#screenGuide .guide>.text-button,#screenGuide .guide>.dock,#screenGuide .guide>.form-msg{grid-column:1/-1}
    #screenHome .token-card,#screenHome .usage-grid,#screenHome .home-note,#screenHome .home-links{max-width:720px}
  }
  @media(max-width:359px){
    :root{--gutter:20px}
    .ritual-hero{gap:6px}.ritual-art{width:112px}.ritual-yao-board{width:52px;height:72px}
    #screenRitual.is-drawing .ritual-art{width:168px}
    .ritual-hero h2{font-size:15px;white-space:normal;max-width:2.2em;line-height:1.25}
    h2{font-size:24px}.question-categories{gap:6px}
  }
  @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}