
  :root{ --bg:#F4F2EA; --btn-w:calc(5em + 24px); }
  html{height:auto;}
  body{min-height:100dvh; margin:0; overscroll-behavior:none;
    background:var(--bg); color:var(--ink); font-family:var(--serif);
    font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased;}
  body:has(#vPick:not([hidden])){height:100dvh; overflow:hidden;}
  body:has(#vPick:not([hidden])) .app{height:100dvh; min-height:0;}
  .view{flex:1; display:flex; flex-direction:column;}
  .view[hidden]{display:none;}
  .brand{flex:none; text-align:center; padding:0 0 32px;}
  .brand-row .back{visibility:hidden;}
  .app:has(#vArt:not([hidden])) .brand-row .back{visibility:visible;}
  .app:has(#vArt:not([hidden])) .brand{padding-bottom:9px;}
  .tip{position:absolute; z-index:25; background:var(--ink); color:#fff; font-size:var(--fs-note);
    line-height:1.4; padding:7px 11px; border-radius:8px; white-space:nowrap; pointer-events:none;
    letter-spacing:.04em; animation:tip-in .18s ease-out;}
  .tip::after{content:""; position:absolute; top:100%; left:var(--ax,50%);
    border:6px solid transparent; border-top-color:var(--ink); transform:translateX(-50%);}
  @keyframes tip-in{from{opacity:0; transform:translateY(4px);}}
  .brand .tag-art{display:none;}
  .app:has(#vArt:not([hidden])) .brand .tag-pick{display:none;}
  .app:has(#vArt:not([hidden])) .brand .tag-art{display:block;}
  #vPick{min-height:0;}
  #vPick .scroll{flex:1 1 auto; min-height:0; overflow-y:auto;
    overscroll-behavior:contain; padding-bottom:16px;}
  .record-controls{margin:0 0 14px; display:grid; grid-template-columns:auto 1fr;
    align-items:center; gap:7px 12px; font-size:var(--fs-note);}
  .record-controls label{color:var(--ink-sub);}
  .record-controls input{font:inherit; font-size:var(--fs-body); color:var(--ink);
    border:1px solid var(--line); background:var(--paper); border-radius:9px;
    padding:9px 11px; min-width:0;}
  .record-status{grid-column:1/-1; min-height:1.5em; margin:0; color:var(--ink-sub);
    line-height:1.5;}
  .record-status.error{color:#8b332d;}
  .record-gate{border:1px solid var(--line); background:var(--paper); border-radius:9px;
    padding:18px; color:var(--ink-sub); text-align:center; font-size:var(--fs-note);}
  .record-gate p{margin:0;}
  .veg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;}
  @media (max-width:293px){ .veg{grid-template-columns:minmax(0,1fr);} }
  .veg button{font:inherit; cursor:pointer;
    border:1px solid var(--line); background:var(--paper); border-radius:9px;
    padding:9px 10px; color:var(--ink); text-align:left;
    display:flex; flex-direction:column; gap:3px; min-height:78px;
    touch-action:manipulation; user-select:none; -webkit-user-select:none;}
  .veg button .nm{display:flex; align-items:flex-start; gap:7px;
    font-size:var(--fs-note); line-height:1.35;}
  .veg button .nm i{width:13px; height:13px; border-radius:2px; flex:none; margin-top:3px;}
  .veg button .nm span{min-width:0; overflow:hidden; line-break:strict;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
  .veg button .q{margin-top:auto; font-size:var(--fs-note); line-height:1.35;
    color:var(--ink-sub); font-variant-numeric:tabular-nums; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;}
  .veg button.on{border-color:var(--ink-sub); background:#fff;}
  .veg button.on .q{color:var(--ink);}
  .more{margin-top:14px;}
  .more>summary{list-style:none; cursor:pointer; font:inherit; font-size:var(--fs-note);
    color:var(--ink); border:1px solid var(--line); border-radius:9px; background:var(--paper);
    padding:12px; margin-bottom:8px; position:relative; text-align:center;}
  .more>summary::-webkit-details-marker{display:none;}
  .more>summary::before{content:""; position:absolute; left:16px; top:calc(50% - 4px);
    width:7px; height:7px; border-right:1.5px solid var(--ink-sub);
    border-bottom:1.5px solid var(--ink-sub); transform:rotate(45deg);}
  .more[open]>summary::before{top:calc(50% - 1px); transform:rotate(-135deg);}
  .more>summary .lbl-less{display:none;}
  .more[open]>summary .lbl-more{display:none;}
  .more[open]>summary .lbl-less{display:inline;}
  .findwrap{background:var(--bg); padding:0 0 8px;}
  .findbox{display:flex; align-items:center;
    border:1px solid var(--line); background:var(--paper); border-radius:9px;}
  .find{flex:1; min-width:0; font:inherit; font-size:var(--fs-note); color:var(--ink);
    border:0; background:transparent; border-radius:9px; padding:10px 12px;}
  .find:focus{outline:none;}
  #vPick, .amt-back{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
  #vPick .find{user-select:text; -webkit-user-select:text;}
  .findbox:focus-within{border-color:var(--ink-sub);}
  .find::placeholder{color:var(--ink-sub);}
  .find::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}
  .findclear{flex:none; width:44px; height:44px; padding:0; border:0; background:transparent;
    color:var(--ink-sub); cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .findclear[hidden]{display:none;}
  .findclear svg{width:13px; height:13px;}
  body[data-mode="record"] #datePick{display:none;}
  .none{font-size:var(--fs-note); color:var(--ink-sub); padding:10px 2px; line-height:1.8;}
  .none a{color:inherit;}
  .zero{display:block; width:100%; margin-top:16px; padding:12px;
    font:inherit; font-size:var(--fs-note); color:var(--ink-sub);
    border:1px dashed var(--line); border-radius:9px; background:transparent;
    cursor:pointer; letter-spacing:.04em;}
  .zero.on{border-style:solid; border-color:var(--ink-sub); color:var(--ink);}
  .searching .zero{visibility:hidden; pointer-events:none;}
  .zero[hidden]{display:none;}
  #same + .zero{margin-top:10px;}
  .foot{flex:none; position:sticky; bottom:0; z-index:1; background:var(--bg);
    display:flex; gap:10px; align-items:center;
    padding:11px 0 max(12px,env(safe-area-inset-bottom));}
  #vPick .foot{position:static; z-index:6;}
  #vPick:has(.find:focus) .foot{display:none;}
  .foot .sum{flex:1; text-align:center; font-family:var(--serif); white-space:nowrap;
    font-variant-numeric:tabular-nums; display:flex; align-items:baseline;
    justify-content:center; gap:5px;}
  .foot .sum b{font-size:var(--fs-title); font-weight:400;}
  .foot .sum span{font-size:var(--fs-note); color:var(--ink-sub); letter-spacing:.06em;}
  .foot button, .foot a.go{font:inherit; font-size:var(--fs-body); border-radius:9px; padding:11px 18px;
    border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
    text-decoration:none;}
  #vPick .foot button{min-width:var(--btn-w);}
  @media (max-width:293px){
    #vPick .foot, .amt-foot{flex-wrap:wrap;}
    #vPick .foot .sum, .amt-foot .sum{order:-1; flex-basis:100%;}
    #vPick .foot button, .amt-foot button{flex:1; min-width:0; padding-left:4px; padding-right:4px; white-space:nowrap;}
  }
  .foot.share button, .foot.share a.go{flex:1; min-width:0; padding:11px 4px; white-space:nowrap;
    display:flex; align-items:center; justify-content:center; gap:4px;}
  .foot.share .ico.x{width:13px; height:13px;}
  .foot.share .ico{width:15px; height:15px; flex:none;}
  .foot button.go, .foot a.go{background:var(--ink); color:#fff; border-color:var(--ink);}
  .foot .go[disabled]{background:var(--line); border-color:var(--line); color:var(--ink-sub);
    cursor:default;}
  .date-pick{position:absolute; left:0; right:0; top:4px; height:56px; z-index:2; cursor:pointer;}
  .date-pick input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
    border:0; padding:0; margin:0; accent-color:var(--ink); color-scheme:light;}
  .date-pick .chevron{position:absolute; top:21px; left:calc(50% + var(--date-w, 110px) / 2 + 12px);
    width:8px; height:8px; border-right:1.5px solid var(--ink-sub); border-bottom:1.5px solid var(--ink-sub);
    transform:rotate(45deg); pointer-events:none;}
  .date-pick.keyboard:focus-within{outline:2px solid var(--ink); outline-offset:-2px; border-radius:8px;}
  .amt-back{position:fixed; inset:0; background:rgba(43,43,43,.32); z-index:20;
    display:flex; align-items:flex-end; justify-content:center;}
  .amt-back[hidden]{display:none;}
  .amt-sheet{position:relative; width:100%; max-width:430px; background:var(--bg);
    border-radius:14px 14px 0 0; padding:16px 20px max(12px,env(safe-area-inset-bottom));}
  .amt-sheet h2{font-family:var(--serif); font-size:var(--fs-title); font-weight:400;
    padding-right:44px;
    margin:0 0 12px; letter-spacing:.04em; display:flex; align-items:center; gap:8px;}
  .amt-sheet h2 i{width:14px; height:14px; border-radius:3px; flex:none;}
  .num{display:flex; align-items:baseline; justify-content:flex-end; gap:7px;
    background:var(--paper); border:1px solid var(--line); border-radius:9px;
    padding:11px 14px;}
  .num b{font-family:var(--serif); font-size:var(--fs-title); font-weight:400;
    line-height:1.35; font-variant-numeric:tabular-nums;}
  .num span{font-size:var(--fs-body); color:var(--ink-sub);}
  .conv{text-align:right; font-size:var(--fs-body); color:var(--ink-sub);
    padding:6px 2px 0; font-variant-numeric:tabular-nums; min-height:1.7em;}
  .seg{display:flex; margin:10px 0 12px; border:1px solid var(--line);
    border-radius:9px; overflow:hidden;}
  .seg button{flex:1; font:inherit; font-size:var(--fs-body); border:0; background:transparent;
    color:var(--ink-sub); padding:10px; cursor:pointer;}
  .seg button.on{background:var(--ink); color:#fff;}
  .seg button[disabled]{opacity:.35; cursor:default;}
  .keys{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
  .keys button{font:inherit; font-size:var(--fs-title); font-variant-numeric:tabular-nums;
    border:1px solid var(--line); background:var(--paper); border-radius:9px;
    padding:13px 0; color:var(--ink); cursor:pointer;}
  .amt-foot{display:flex; gap:10px; align-items:center; padding-top:12px;}
  .amt-foot .sum{flex:1; text-align:center; font-family:var(--serif);
    font-variant-numeric:tabular-nums; display:flex; align-items:baseline;
    justify-content:center; gap:5px;}
  .amt-foot .sum b{font-size:var(--fs-title); font-weight:400;}
  .amt-foot .sum span{font-size:var(--fs-note); color:var(--ink-sub); letter-spacing:.06em;}
  .amt-foot button{min-width:var(--btn-w); font:inherit; font-size:var(--fs-body);
    border-radius:9px; padding:11px 18px;
    border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;}
  .amt-foot .ok{margin-left:auto; background:var(--ink); color:#fff; border-color:var(--ink);}
  .amt-foot .ok[disabled]{background:var(--line); border-color:var(--line); color:var(--ink-sub); cursor:default;}
  .amt-close{position:absolute; top:4px; right:4px; width:44px; height:44px; padding:0;
    border:0; background:transparent; color:var(--ink-sub); cursor:pointer;
    display:flex; align-items:center; justify-content:center;}
  .amt-close svg{width:16px; height:16px;}
  .amt-close:focus{outline:none;}
  .amt-close.keyboard:focus{outline:2px solid var(--ink); outline-offset:-2px; border-radius:8px;}
  .keys button svg{width:24px; height:24px; display:block; margin:0 auto;}
