:root{
      --paper: oklch(0.90 0.032 82);
      --paper-2: oklch(0.86 0.035 78);
      --ink: oklch(0.22 0.04 48);
      --muted: oklch(0.42 0.03 55);
      --line: oklch(0.32 0.04 50 / 0.28);
      --bronze: oklch(0.40 0.08 52);
      --danger: oklch(0.42 0.12 28);
      --ok: oklch(0.38 0.07 145);
      --warn: oklch(0.48 0.09 70);
      --display: "Cormorant Garamond", "Noto Serif TC", serif;
      --body: "Noto Serif TC", "Cormorant Garamond", serif;
      --mono: "IBM Plex Mono", ui-monospace, monospace;
      --ease: cubic-bezier(.16, 1, .3, 1);
    }
    *{box-sizing:border-box}
    html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
    body{
      font-family:var(--body);
      font-synthesis:none;
      -webkit-font-smoothing:antialiased;
      background-image:
        radial-gradient(1200px 700px at 50% -10%, oklch(0.94 0.02 85 / .55), transparent 55%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
      background-blend-mode:multiply;
    }
    button,input,select,textarea{font:inherit;color:inherit}
    button{cursor:pointer;background:none;border:0;padding:0}
    h1,h2,p{margin:0}
    #app{
      min-height:100dvh;
      max-width:420px;
      margin:0 auto;
      padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
      display:flex;flex-direction:column;gap:28px;
    }
    body[data-screen="people"] #app,
    body[data-screen="assets"] #app,
    body[data-screen="intent"] #app{max-width:960px}
    header{display:flex;justify-content:space-between;align-items:baseline}
    .brand{font-family:var(--display);font-size:22px;font-weight:500}
    .brand i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.18em;color:var(--muted);margin-left:8px}
    .step-meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
    main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px}
    .eyebrow{font-family:var(--display);font-style:italic;color:var(--bronze);font-size:17px}
    .question{font-family:var(--display);font-size:clamp(28px,8vw,36px);font-weight:600;line-height:1.2;text-wrap:pretty}
    .hint{color:var(--muted);font-size:14px;line-height:1.55}
    .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
    .choice,.primary,.ghost{
      min-height:52px;border:1px solid var(--ink);padding:12px 16px;
      box-shadow: inset 0 0 0 1px var(--ink);
      transition:transform .2s var(--ease), background .2s var(--ease);
    }
    .choice{background:transparent;font-size:16px;box-shadow:none}
    .choice:hover,.primary:hover{transform:translateY(-1px)}
    .choice[aria-pressed="true"],.primary{background:var(--ink);color:var(--paper);box-shadow:none}
    .ghost{border-color:var(--line);color:var(--muted)}
    label{display:grid;gap:6px;font-size:12px;color:var(--muted)}
    input,select,textarea{
      border:0;border-bottom:1px solid var(--ink);background:transparent;
      padding:10px 0;outline:none;width:100%;
    }
    textarea{min-height:96px;resize:vertical;border:1px solid var(--line);padding:12px;border-bottom:1px solid var(--ink)}
    .stack{display:grid;gap:14px}
    .row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
    .list{display:grid;gap:0;border-top:1px solid var(--line)}
    .list li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;list-style:none}
    .list{padding:0;margin:0}
    .list span{color:var(--muted);font-size:12px}
    .err{color:var(--danger);font-size:13px;min-height:1.2em}
    .verdict{font-family:var(--display);font-size:42px;font-weight:600}
    .verdict.green{color:var(--ok)}
    .verdict.amber{color:var(--warn)}
    .verdict.red{color:var(--danger)}
    footer{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}

    body[data-screen="people"] #app{gap:16px}
    body[data-screen="people"] main{justify-content:flex-start;gap:16px}
    body[data-screen="people"] .question{font-size:clamp(24px,6.4vw,30px)}
    .testator-card{
      display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;
      background:oklch(0.84 0.045 75);
      padding:12px 14px 12px 12px;
      box-shadow: 2px 3px 0 oklch(0.23 0.03 55 / 0.1);
      position:relative;
    }
    .testator-card::before{
      content:"立遺囑人";
      position:absolute;left:10px;top:-11px;
      background:oklch(0.84 0.045 75);
      padding:1px 8px 0;
      font-family:var(--mono);font-size:9px;letter-spacing:.1em;
    }
    .mini-portrait{
      width:56px;height:72px;display:grid;place-items:center;
      background:var(--paper);border:1px solid oklch(0.23 0.03 55 / 0.2);
    }
    .mini-portrait b{font-family:var(--display);font-size:26px;font-weight:500;line-height:1}
    .testator-card h2{font-family:var(--display);font-size:20px;font-weight:500}
    .testator-card p{font-size:12px;color:var(--muted);margin-top:2px}
    .path{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}
    .path b{color:var(--ink);font-weight:500}
    .path button{font:inherit;letter-spacing:inherit;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
    .path button:hover{color:var(--ink)}
    .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;flex:1}
    .layout main{min-width:0}
    .checkout{
      position:sticky;top:20px;
      padding:16px 16px 18px;
      background:var(--paper-2);
      border:1px solid var(--ink);
      box-shadow: inset 0 0 0 1px oklch(0.32 0.04 50 / 0.2);
    }
    .checkout .kicker{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-bottom:6px}
    .checkout h2{font-family:var(--display);font-size:22px;font-weight:500;margin-bottom:14px}
    .checkout dl{margin:0;display:grid;gap:0}
    .checkout .line{
      display:grid;grid-template-columns:88px 1fr;gap:8px;
      padding:8px 0;border-top:1px solid var(--line);font-size:13px;
    }
    .checkout dt{color:var(--muted);font-size:11px}
    .checkout dd{margin:0}
    .checkout .empty{color:var(--muted)}
    .rel-graph{text-align:center;padding:4px 0 12px}
    .rel-core{
      display:inline-flex;flex-direction:column;align-items:center;gap:4px;
      background:oklch(0.84 0.045 75);padding:10px 14px 8px;
    }
    .rel-core .mark,.rel-leaf .mark{
      display:grid;place-items:center;
      background:var(--paper);border:1px solid oklch(0.23 0.03 55 / 0.18);
      font-family:var(--display);font-weight:500;line-height:1;
    }
    .rel-core .mark{width:36px;height:44px;font-size:20px}
    .rel-core b{font-family:var(--display);font-size:14px;font-weight:500}
    .rel-core span{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--muted)}
    .rel-stem{width:1px;height:14px;background:var(--line);margin:0 auto}
    .rel-row{
      display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;
      padding-top:10px;border-top:1px solid var(--line);
    }
    .rel-leaf{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px}
    .rel-leaf .mark{width:28px;height:34px;font-size:15px}
    .rel-leaf .role{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--muted)}
    .rel-leaf b{font-size:12px;font-weight:500}
    .rel-empty{font-size:11px;color:var(--muted);padding:8px 0}
    @media (max-width:720px){
      .layout{grid-template-columns:1fr}
      .checkout{position:static}
    }
    .roster{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
    .roster li{
      display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;
      padding:8px 0;border-bottom:1px solid var(--line);
    }
    .roster input{font-size:16px;padding:8px 0}
    .roster .role{color:var(--muted);font-size:12px;white-space:nowrap}
    .roster .folder-x{width:22px;height:22px;color:var(--muted);font-size:16px}
    .age-mini{display:flex;gap:4px}
    .age-mini button{
      border:1px solid var(--line);padding:6px 9px;font-size:11px;min-height:32px;
    }
    .age-mini button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
    .age-note{font-size:11px;color:var(--muted);line-height:1.45}
    .chips{display:flex;flex-wrap:wrap;gap:6px}
    .chip{
      border:1px solid var(--line);padding:8px 10px;font-size:13px;
      min-height:40px;
    }
    .field-label{font-size:12px;color:var(--muted);margin-bottom:2px}
    .classic-switch{min-height:44px;font-size:11px;text-decoration:underline;text-underline-offset:3px;margin-left:auto;margin-right:12px}
    :focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
    button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
    @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}