:root {
  color-scheme: light;
  --green: #314c3b;
  --green-deep: #20362a;
  --green-soft: #647568;
  --paper: #f5f0e5;
}
* { box-sizing: border-box; }
html { background: #e7e2d8; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--green); font-family: "Songti SC", "STSong", "Noto Serif SC", serif; }
button, input { font: inherit; }
.art-type { font-family: "Kaiti SC", "STKaiti", "FZKai-Z03", "KaiTi", serif; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.artboard { position: relative; width: min(100%,941px); aspect-ratio: 941/1672; margin: 0 auto; overflow: hidden; background: var(--paper); box-shadow: 0 10px 45px rgba(26,43,32,.18); }
.artwork { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.hero { position: absolute; top: 3.8%; left: 13%; width: 74%; height: 20%; text-align: center; }
.top-ribbon { position: absolute; top: 4.9%; left: 24%; width: 52%; height: 9%; display: grid; place-items: center; padding: 0; font-family: "Kaiti SC", "STKaiti", "FZKai-Z03", "KaiTi", serif; font-size: clamp(.52rem,2.05vw,1.16rem); font-weight: 500; line-height: 1; letter-spacing: .24em; white-space: nowrap; text-shadow: 0 1px rgba(255,255,255,.7); }
h1 { position: absolute; top: 25%; left: 0; width: 100%; margin: 0; font-family: "Kaiti SC", "STKaiti", "FZKai-Z03", "KaiTi", serif; font-size: clamp(1.45rem,7.1vw,4.2rem); font-weight: 500; letter-spacing: .13em; line-height: 1; text-shadow: 0 1px rgba(255,255,255,.55); }
.welcome { position: absolute; top: 47%; left: 0; width: 100%; margin: 0; font: italic clamp(.52rem,2.65vw,1.5rem)/1.2 "Snell Roundhand","Apple Chancery",Georgia,serif; letter-spacing: .03em; }
.couple { position: absolute; top: 61%; left: 0; width: 100%; margin: 0; font: italic clamp(.72rem,3.8vw,2.15rem)/1.2 "Snell Roundhand","Apple Chancery",Georgia,serif; letter-spacing: .04em; }
.date { position: absolute; top: 81%; left: 0; width: 100%; margin: 0; font: italic clamp(.5rem,2.25vw,1.3rem)/1.2 "Apple Chancery",Georgia,serif; letter-spacing: .08em; }
.hall { position: absolute; top: 25.4%; left: 2.3%; width: 95.4%; height: 44.6%; }
.hall h2 { position: absolute; top: 1.85%; left: 29.5%; width: 42.4%; height: 5.2%; margin: 0; display: grid; place-items: center; padding: 0; text-align: center; font-family: "Kaiti SC", "STKaiti", "FZKai-Z03", "KaiTi", serif; font-size: clamp(.58rem,2.55vw,1.45rem); font-weight: 500; line-height: 1; letter-spacing: .18em; text-shadow: 0 1px rgba(255,255,255,.6); }
.stage-label { position: absolute; left: 5.5%; top: 25%; width: 10%; height: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; }
.stage-label strong { font-size: clamp(.75rem,3.7vw,2.1rem); letter-spacing: .12em; white-space: nowrap; }
.stage-label span { font: clamp(.48rem,1.8vw,1rem)/1 Georgia,serif; letter-spacing: .08em; }
.stage-label i { margin-top: .55em; font-style: normal; }
.table-layer { position: absolute; inset: 0; }
.table { position: absolute; width: 10.7%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; color: var(--green-deep); display: grid; place-items: center; cursor: default; transition: filter .25s ease,transform .25s ease,color .25s ease; }
.table span { position: relative; z-index: 1; display: grid; place-items: center; width: 48%; aspect-ratio: 1; border: 1px solid rgba(49,76,59,.3); border-radius: 50%; background: rgba(247,242,231,.78); box-shadow: 0 1px 5px rgba(31,49,38,.14),inset 0 0 0 2px rgba(255,255,255,.3); font-size: clamp(.78rem,3.1vw,1.78rem); font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: lining-nums; }
.table.empty span { font-size: clamp(.68rem,2.55vw,1.45rem); font-weight: 500; }
.table.active { z-index: 5; color: #fff; transform: translate(-50%,-50%) scale(1.1); filter: drop-shadow(0 0 .55rem #d6c16d); animation: pulse 1.25s ease-in-out 2; }
.table.active span { background: radial-gradient(circle at 35% 30%,#607963 0,#314c3b 72%); border-color: #e4cf81; box-shadow: 0 0 0 3px rgba(242,232,188,.7),0 0 0 6px rgba(49,76,59,.22); text-shadow: 0 1px 2px #1c2b22; }
.table.active::after { content: "您的桌次"; position: absolute; top: 88%; left: 50%; z-index: 2; transform: translateX(-50%); width: max-content; padding: .25em .65em; border: 1px solid rgba(49,76,59,.7); border-radius: 999px; background: #f2e9d6; color: var(--green); font-size: clamp(.4rem,1.5vw,.82rem); letter-spacing: .1em; text-shadow: none; }
.door { position: absolute; top: 91%; transform: translateX(-50%); font-size: clamp(.55rem,2.2vw,1.25rem); letter-spacing: .25em; }
.door-one { left: 39%; }
.door-two { left: 68%; }
.lookup { position: absolute; top: 71%; left: 6.4%; width: 87.2%; height: 8.1%; }
.lookup h2 { margin: 0 0 1.5%; padding-left: 2%; font-family: "Kaiti SC", "STKaiti", "FZKai-Z03", "KaiTi", serif; font-size: clamp(.63rem,2.7vw,1.55rem); font-weight: 500; letter-spacing: .12em; line-height: 1.4; }
.lookup form { position: relative; display: grid; grid-template-columns: 68% 29%; gap: 3%; height: 55%; }
.lookup input { min-width: 0; width: 100%; height: 100%; padding: 0 7%; border: 0; outline: 0; border-radius: 999px; color: #213a2c; background: transparent; font-size: clamp(.82rem,3.55vw,2rem); font-weight: 600; letter-spacing: .08em; }
.lookup input::placeholder { color: rgba(49,76,59,.52); font-weight: 400; }
.lookup input:focus { box-shadow: inset 0 0 0 2px rgba(49,76,59,.55),0 0 0 3px rgba(255,255,255,.5); }
.lookup button { width: 100%; height: 100%; display: grid; place-items: center; padding: 0 0 0 .12em; border: 0; outline: 0; border-radius: 999px; color: #f5f0e5; background: transparent; font-family: "Kaiti SC", "STKaiti", "FZKai-Z03", "KaiTi", serif; font-size: clamp(.65rem,2.75vw,1.55rem); line-height: 1; letter-spacing: .12em; cursor: pointer; text-shadow: 0 1px 1px #1f3026; }
.lookup button:focus-visible { box-shadow: 0 0 0 3px #e5d18a; }
.lookup button:active { transform: translateY(1px); }
.result { position: absolute; top: 81.2%; left: 7%; width: 86%; height: 15%; text-align: center; transition: opacity .3s ease; }
.result-ribbon { position: absolute; top: 1.2%; left: 30%; width: 40%; display: grid; place-items: center; font-family: "Kaiti SC", "STKaiti", "FZKai-Z03", "KaiTi", serif; font-size: clamp(.55rem,2.3vw,1.3rem); line-height: 1; letter-spacing: .16em; white-space: nowrap; }
.result-name { position: absolute; top: 27%; left: 20%; width: 64%; margin: 0; font-size: clamp(.72rem,3vw,1.72rem); letter-spacing: .08em; }
.result-seat { position: absolute; top: 47%; left: 17%; width: 68%; font-size: clamp(.68rem,2.7vw,1.55rem); letter-spacing: .06em; }
.result-seat strong { margin-left: .25em; color: var(--green-deep); font-size: clamp(1.25rem,5.2vw,3rem); font-weight: 600; }
.result-direction { position: absolute; top: 76%; left: 18%; width: 65%; margin: 0; font-size: clamp(.52rem,2.1vw,1.22rem); letter-spacing: .07em; }
.result small { position: absolute; top: 91%; left: 20%; width: 60%; color: var(--green-soft); font: clamp(.42rem,1.55vw,.9rem)/1.1 ui-sans-serif,system-ui,sans-serif; }
.result.error .result-seat strong { font-size: clamp(.76rem,3vw,1.7rem); }
footer { position: absolute; bottom: .9%; left: 10%; width: 80%; text-align: center; font: italic clamp(.48rem,2.05vw,1.16rem)/1.2 Georgia,"Times New Roman",serif; letter-spacing: .035em; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 .9rem #cfb957); transform: translate(-50%,-50%) scale(1.17); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }