:root{
  --paper:#FAF6EF;--paper-2:#F2EADD;--outer:#ECE3D4;
  --ink:#3B3128;--ink-soft:#7A6D60;--brown:#4A3E31;
  --sage:#748B5F;--blush:#E19C8A;--line:#E3D8C6;--tan:#C8A988;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:"Noto Serif TC",serif;color:var(--ink);line-height:1.9;background:var(--outer);-webkit-font-smoothing:antialiased}
button{-webkit-appearance:none;appearance:none;touch-action:manipulation;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.wrap{
  max-width:480px;margin:0 auto;min-height:100vh;position:relative;overflow:hidden;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:0 0 40px rgba(74,62,49,.10);
}
section{padding:calc(40px + env(safe-area-inset-top,0px)) 22px calc(40px + env(safe-area-inset-bottom,0px));text-align:center}
.kicker{font-family:"Caveat",cursive;font-weight:600;font-size:18px;color:var(--ink-soft);letter-spacing:1px;line-height:1;margin-bottom:14px}
.eyebrow{font-family:"Caveat",cursive;font-weight:600;font-size:24px;color:var(--sage);line-height:1}
.heading{font-size:21px;font-weight:600;letter-spacing:6px;color:var(--brown);margin-top:6px}
.squiggle{display:block;margin:12px auto 20px;width:64px;height:10px}
.squiggle path{fill:none;stroke:var(--blush);stroke-width:2;stroke-linecap:round}
.lead{font-size:15px;line-height:2;color:var(--ink-soft);letter-spacing:1px;margin-bottom:16px}

.st-search{display:flex;gap:8px;margin:0 auto;max-width:340px}
.st-search input{flex:1;min-width:0;font:inherit;font-size:17px;letter-spacing:2px;color:var(--ink);padding:11px 16px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;outline:none;-webkit-appearance:none;appearance:none}
.st-search input:focus{border-color:var(--tan)}
.st-search input::placeholder{color:#B5A898;letter-spacing:1px}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:999px;font-size:15px;letter-spacing:2px;
  border:1.5px solid var(--brown);background:var(--brown);color:var(--paper);white-space:nowrap}
.st-btn:active{transform:translateY(1px)}
.st-btn:disabled{opacity:.6}
.st-btn.wide{width:100%;padding:14px;font-size:17px}
@media(hover:hover){.st-btn:hover:not(:disabled){background:var(--sage);border-color:var(--sage)}}
.st-hint{font-size:14.5px;color:var(--ink-soft);margin-top:10px;letter-spacing:.5px}
.link{background:none;border:none;color:var(--ink-soft);font-size:14px;letter-spacing:1px;text-decoration:underline;text-underline-offset:4px;padding:8px}

.st-result{margin:20px auto 0;max-width:340px}
.st-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 18px 14px;box-shadow:0 4px 16px rgba(74,62,49,.06);animation:stPop .35s cubic-bezier(.2,.7,.2,1)}
@keyframes stPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.st-hello{font-size:15px;color:var(--ink-soft);letter-spacing:1px}
.big-name{font-size:26px;font-weight:600;color:var(--brown);letter-spacing:3px;margin:4px 0 2px}
.st-no{display:flex;align-items:baseline;justify-content:center;gap:8px;color:var(--brown);letter-spacing:2px;font-size:15px}
.st-no .num{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:54px;line-height:1;color:var(--blush);font-weight:500}
.st-group{font-size:14px;color:var(--sage);letter-spacing:2px}
.actions{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:18px}
.tick{font-size:52px;color:var(--sage);line-height:1}
.err{color:#B4553F;font-size:14px;margin-top:8px}
.spin{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.st-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 6px}
.st-chip{padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-size:15px;letter-spacing:1px;color:var(--brown)}
.st-chip small{color:var(--ink-soft);font-size:12px;margin-left:4px}
.st-miss{font-size:15px;color:var(--ink-soft);letter-spacing:.5px;line-height:1.9;padding-bottom:6px}
.st-miss b{color:var(--brown)}

.st-mapbox{margin:22px -12px 0}
.st-maptitle{font-family:"Caveat",cursive;font-weight:600;font-size:22px;color:var(--ink-soft);line-height:1;margin-bottom:8px}
svg.st-map{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.st-map .room{fill:none;stroke:var(--tan);stroke-width:2.5}
.st-map .tbl{transition:opacity .3s;outline:none}
.st-map .tbl rect.t{fill:#fff;stroke:var(--tan);stroke-width:2;transition:fill .3s,stroke .3s}
.st-map .tbl .ch{fill:#fff;stroke:var(--tan);stroke-width:1.6}
.st-map .tbl text{font-family:"Cormorant Garamond",serif;font-size:30px;fill:#8A6E52;text-anchor:middle;dominant-baseline:central;transition:fill .3s}
.st-map.has-sel .tbl{opacity:.45}
.st-map .tbl.sel{opacity:1}
.st-map .tbl.sel rect.t{fill:var(--blush)!important;stroke:#C9735F}
.st-map .tbl.sel .ch{stroke:#C9735F}
.st-map .tbl.sel text{fill:#fff;font-weight:500}
.st-map .zone rect{stroke:var(--tan);stroke-width:1.5}
.st-map .zone text{font-family:"Noto Serif TC",serif;font-size:19px;letter-spacing:3px;fill:#A88A6C;text-anchor:middle;dominant-baseline:central}
.st-map .ring{fill:none;stroke:var(--blush);stroke-width:4;transform-box:fill-box;transform-origin:center;animation:stRing 1.6s ease-out infinite}
@keyframes stRing{0%{opacity:.9;transform:scale(.75)}100%{opacity:0;transform:scale(1.35)}}