:root{
  color-scheme: light;
  --paper:#f5f0e5;
  --paper-2:#fffdf7;
  --ink:#273c39;
  --ink-2:#516446;
  --muted:#74806f;
  --gold:#80602f;
  --gold-2:#b08a4a;
  --cinnabar:#9c3b2e;
  --line:#cfc6b1;
  --line-soft:#e2dac7;
  --wood:#8a5a2b;
  --wood-2:#a9713d;
  --shadow:0 2px 14px rgba(61,73,51,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.8 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.serif,h1,.r-title,.qian,.qian-big,.hex-name{font-family:"Songti SC","STSong","Noto Serif SC",serif;font-weight:400}

header.top{max-width:760px;margin:0 auto;padding:26px 24px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.brand{font-family:"Songti SC",serif;letter-spacing:.28em;font-size:14px;color:var(--ink);text-decoration:none}
.brand b{color:var(--gold);font-weight:400}
.top nav{font-size:12px;color:var(--muted);letter-spacing:.1em;white-space:nowrap;flex:none}
.top nav button{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:0;border-bottom:1px solid var(--line);white-space:nowrap}
.top nav button:hover{color:var(--gold)}

/* ---------- landing ---------- */
.landing{padding:10px 0 60px}
.eyebrow{font-size:11px;letter-spacing:.32em;color:var(--gold);margin:18px 0 10px}
h1{font-size:clamp(28px,5vw,42px);line-height:1.5;letter-spacing:.04em;margin:0 0 18px}
.lead{font-size:16.5px;line-height:1.95;color:var(--ink-2);max-width:560px;margin:0 0 8px}
.lead b{color:var(--ink);font-weight:600}
.sub{font-size:13px;color:var(--muted);margin:14px 0 0}
.cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:28px 0 10px}

button.primary{background:var(--ink);color:#f7f2e6;border:0;padding:13px 26px;border-radius:3px;font:15px/1.4 inherit;cursor:pointer;letter-spacing:.06em;transition:background .16s ease,transform .16s ease}
button.primary:hover{background:#35504a;transform:translateY(-1px)}
button.primary:disabled{opacity:.55;cursor:default;transform:none}
button.primary.big{font-size:16px;padding:15px 40px}
button.ghost{background:none;border:1px solid var(--line);color:var(--ink-2);padding:12px 22px;border-radius:3px;font:14px/1.4 inherit;cursor:pointer;letter-spacing:.05em;transition:border-color .16s ease,color .16s ease}
button.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- 签筒 ---------- */
.sign{text-align:center;margin:44px 0 8px}
.qiantong{position:relative;width:150px;height:210px;margin:0 auto;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.qiantong.shaking{animation:shake .85s ease-in-out}
@keyframes shake{
  0%,100%{transform:rotate(0) translateY(0)}
  10%{transform:rotate(-9deg) translateY(-2px)}
  20%{transform:rotate(8deg)}
  30%{transform:rotate(-7deg)}
  40%{transform:rotate(6deg)}
  50%{transform:rotate(-5deg)}
  60%{transform:rotate(4deg)}
  70%{transform:rotate(-3deg)}
  80%{transform:rotate(2deg)}
  90%{transform:rotate(-1deg)}
}
.sticks{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:flex;gap:5px;z-index:3}
.sticks i{display:block;width:9px;height:96px;background:linear-gradient(#e8d5b0,#d9c193);border-radius:3px 3px 1px 1px;position:relative}
.sticks i::after{content:"";position:absolute;top:3px;left:0;right:0;height:7px;background:var(--cinnabar);border-radius:2px}
.sticks i:nth-child(1){transform:rotate(-7deg);height:90px}
.sticks i:nth-child(2){transform:rotate(-3deg);height:104px}
.sticks i:nth-child(3){transform:rotate(0deg);height:112px}
.sticks i:nth-child(4){transform:rotate(3deg);height:99px}
.sticks i:nth-child(5){transform:rotate(7deg);height:86px}
.tong-mouth{position:absolute;left:50%;top:106px;transform:translateX(-50%);width:120px;height:26px;background:radial-gradient(ellipse at center,#4a3118 0%,#2f1f0e 70%);border-radius:50%;z-index:2}
.tong-body{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:116px;height:112px;background:linear-gradient(180deg,var(--wood-2),var(--wood) 60%,#7c4f26);border-radius:8px 8px 18px 18px;z-index:1;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 6px 14px rgba(90,60,30,.25)}
.tong-body::before{content:"";position:absolute;top:10px;left:14px;right:14px;height:2px;background:rgba(255,255,255,.16);border-radius:2px}
.tong-body::after{content:"";position:absolute;top:20px;left:14px;right:14px;height:2px;background:rgba(255,255,255,.12);border-radius:2px}
.sign-tip{font-size:12.5px;color:var(--muted);letter-spacing:.08em;margin:22px 0 16px}

/* ---------- 签文落定 ---------- */
.sign-result{padding:30px 0 60px;text-align:center}
.hex-block{margin:6px 0 6px}
.hex-name{font-size:clamp(44px,9vw,72px);line-height:1.1;color:var(--ink);letter-spacing:.06em}
.hex-xiang{font-size:14px;color:var(--muted);letter-spacing:.18em;margin-top:4px}
.hex-xiang .tone{color:var(--cinnabar)}
.qian{font-size:clamp(20px,3.6vw,26px);line-height:1.9;color:var(--ink);max-width:520px;margin:26px auto 10px;letter-spacing:.02em}
.sign-result .lead{max-width:520px;margin:0 auto}

/* ---------- quiz ---------- */
.quiz{padding:8px 0 60px}
.bar{height:2px;background:var(--line-soft);margin:6px 0 26px;position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0;transition:width .3s ease}
.qmeta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.22em;color:var(--muted)}
.scene h2{font-size:clamp(22px,3.4vw,27px);line-height:1.7;margin:14px 0 14px;letter-spacing:.03em}
.scene p{font-size:16.5px;line-height:2;color:var(--ink-2);margin:0 0 10px}
.hint{font-size:12.5px;color:var(--muted);border-left:2px solid var(--line);padding-left:12px;margin:16px 0 0}
.choices{display:grid;gap:10px;margin:26px 0 0}
.choice{
  text-align:left;background:var(--paper-2);border:1px solid var(--line);
  padding:17px 20px;border-radius:4px;cursor:pointer;font:inherit;color:var(--ink);
  display:flex;gap:16px;align-items:baseline;transition:border-color .16s ease,background .16s ease;
}
.choice:hover{border-color:var(--gold);background:#fffef9}
.choice .k{font-family:"Songti SC",serif;color:var(--gold);font-size:13px;min-width:14px}
.choice .txt{font-size:16px;line-height:1.7}

/* ---------- 留名表单 ---------- */
.form{display:grid;gap:12px;margin:24px 0 0;max-width:460px}
.field{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.field>span{letter-spacing:.08em}
.field input{
  width:100%;padding:12px 14px;font:15px/1.4 inherit;color:var(--ink);
  background:#fffdf7;border:1px solid var(--line);border-radius:3px;
}
.field input:focus{outline:2px solid var(--gold-2);outline-offset:2px}

/* ---------- result ---------- */
.result{padding:6px 0 70px}
.eyebrow-2{font-size:11px;letter-spacing:.3em;color:var(--gold);margin:12px 0 6px}
.r-title{font-size:clamp(24px,4.4vw,34px);line-height:1.5;letter-spacing:.04em;margin:0 0 4px}
.sheng{font-size:13px;letter-spacing:.12em;color:var(--muted);margin:6px 0 0}
.panel{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:6px;padding:24px 26px;margin:22px 0;box-shadow:var(--shadow)}
.panel .cap{font-size:11px;letter-spacing:.24em;color:var(--gold);margin-bottom:10px}
.qian-panel{border-left:3px solid var(--cinnabar)}
.qian-big{font-size:clamp(19px,3.2vw,23px);line-height:1.95;color:var(--ink);margin:0 0 8px}
.qian-panel .hex-xiang{margin:0;letter-spacing:.14em}
.like{font-size:16px;line-height:1.9;color:var(--ink-2);margin:0}
.verdict-panel{border-left:3px solid var(--gold);background:#fbf7ec}
.verdict{font-family:"Songti SC",serif;font-size:clamp(19px,3.4vw,24px);line-height:1.9;color:var(--ink);margin:0}
.advice{font-size:16.5px;line-height:1.9;color:var(--ink-2);margin:0}

.share-text{width:100%;background:#faf7ee;border:1px solid var(--line);border-radius:4px;padding:12px 14px;font:13px/1.7 inherit;color:var(--ink-2);resize:vertical;min-height:88px}
.share-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.small{font-size:12px}

footer{max-width:760px;margin:0 auto;padding:22px 24px 40px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:16px;font-size:11.5px;color:var(--muted);line-height:1.7}
footer button{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;border-bottom:1px solid var(--line);padding:0}

dialog{max-width:560px;width:calc(100% - 32px);background:var(--paper-2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:26px 28px;max-height:84vh;overflow:auto}
dialog::backdrop{background:rgba(30,40,36,.45)}
dialog h2{font-family:"Songti SC",serif;font-size:23px;font-weight:400;margin:0 0 4px;letter-spacing:.06em}
dialog .dsub{font-size:11px;letter-spacing:.18em;color:var(--gold);margin-bottom:14px}
dialog p{font-size:14px;line-height:1.9;color:var(--ink-2);margin:0 0 10px}
dialog .close{float:right;background:none;border:0;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}

.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:#f7f2e6;padding:10px 18px;border-radius:3px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:600px){
  .wrap{padding:0 20px}
  header.top{padding:20px 20px 6px}
  .panel{padding:20px}
  .choice{padding:15px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}