:root{
  --bg:#f8f1e8;
  --ink:#151a1d;
  --muted:#a78f74;
  --line:#d8c7b4;
  --card:#fbf6ef;
  --shadow:0 18px 45px rgba(74,52,31,.12);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 50% 35%,#fffaf3 0,#f8f1e8 65%,#f2e8dc 100%);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
button{font:inherit}
.page{width:min(100%,1040px);min-height:100svh;margin:auto;padding:clamp(42px,8vw,92px) clamp(24px,7vw,72px) 28px;display:flex;flex-direction:column}
.hero-header{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;margin-bottom:42px}
.brand-logo{width:clamp(84px,12vw,128px);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.brand-copy h1{font-size:clamp(38px,7vw,72px);line-height:.95;margin:0 0 18px;letter-spacing:-.035em}
.brand-copy p{margin:0;font-size:clamp(15px,2.2vw,24px);letter-spacing:.08em}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);margin:0 auto 72px;width:min(100%,780px);border:1px solid rgba(167,143,116,.25);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.34);box-shadow:0 12px 36px rgba(96,68,40,.08)}
.tab{border:0;border-right:1px solid rgba(167,143,116,.2);background:transparent;padding:18px 8px;color:#765f49;font-weight:650;letter-spacing:.12em;cursor:pointer}
.tab:last-child{border-right:0}.tab.is-active{background:#efe1d2;color:#34291f;box-shadow:inset 0 0 0 1px rgba(128,96,65,.2)}
.stage{display:grid;grid-template-columns:1fr minmax(220px,360px) 1fr;align-items:center;gap:28px;min-height:510px;margin-bottom:58px}
.ome108,.side-action{border:0;background:transparent;cursor:pointer}
.ome108{display:grid;place-items:center;padding:0;border-radius:34px;transition:transform .25s ease,filter .25s ease;touch-action:manipulation}
.ome108 img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 28px rgba(44,35,26,.16))}
.ome108:hover{transform:translateY(-5px)}
.ome108.is-bouncing{animation:bounce .58s cubic-bezier(.2,.8,.2,1)}
@keyframes bounce{0%{transform:scale(1) translateY(0)}30%{transform:scale(.93) translateY(4px)}58%{transform:scale(1.08) translateY(-18px)}78%{transform:scale(.98) translateY(2px)}100%{transform:scale(1) translateY(0)}}
.side-action{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink);padding:16px;border-radius:20px;transition:.2s ease}
.side-action:hover,.side-action:focus-visible{background:rgba(255,255,255,.45);transform:translateY(-2px)}
.side-action .arrow{font-size:48px;line-height:1}.side-action strong{font-size:22px}.side-action small{font-size:16px}
.tap-hint{text-align:center;color:var(--muted);margin-bottom:72px}.tap-icon{font-size:52px;display:block}.tap-hint p{font-size:21px;margin:12px 0 5px;letter-spacing:.06em}.tap-hint small{font-size:16px}
.panel{position:relative;width:min(100%,760px);margin:0 auto 72px;padding:34px 36px;border:1px solid rgba(167,143,116,.23);border-radius:26px;background:rgba(255,255,255,.55);box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.panel h2{margin:0 0 12px;font-size:30px}.panel p{margin:0;line-height:1.8;color:#65513e}.panel-close{position:absolute;right:18px;top:12px;border:0;background:transparent;font-size:30px;color:#816b56;cursor:pointer}
.share-section{text-align:center;margin-top:auto;margin-bottom:58px}.section-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;width:min(100%,650px);margin:0 auto 26px}.section-title span{height:1px;background:var(--line)}.section-title h2{margin:0;font-size:clamp(20px,3vw,28px);font-weight:650;letter-spacing:.12em;color:#8d7358}
.share-button{width:86px;height:86px;border:1px solid rgba(167,143,116,.18);border-radius:24px;background:var(--card);box-shadow:0 12px 28px rgba(103,74,45,.14);font-size:44px;color:#9a795a;cursor:pointer;transition:.2s ease}.share-button:hover{transform:translateY(-4px)}.share-button:active{transform:scale(.96)}.share-status{min-height:24px;color:#8d7358}
footer{text-align:center;color:#a38c73;font-size:13px;line-height:1.65;letter-spacing:.04em}.footer-line{height:1px;background:var(--line);margin-bottom:15px}footer p{margin:3px 0}
@media (max-width:700px){
  .page{padding-top:36px}.hero-header{gap:15px;margin-bottom:34px}.brand-copy h1{font-size:40px;margin-bottom:10px}.brand-copy p{font-size:13px;line-height:1.65;letter-spacing:.05em}
  .tabs{margin-bottom:58px;border-radius:18px}.tab{padding:14px 4px;font-size:15px}
  .stage{grid-template-columns:78px minmax(0,1fr) 78px;gap:10px;min-height:390px;margin-bottom:74px}.side-action{padding:8px}.side-action .arrow{font-size:36px}.side-action strong{font-size:17px}.side-action small{font-size:14px}
  .tap-hint{margin-bottom:82px}.share-section{margin-bottom:38px}.section-title{gap:14px}.section-title h2{font-size:19px;letter-spacing:.08em}
}
@media (max-width:390px){.brand-copy h1{font-size:34px}.brand-logo{width:72px}.stage{grid-template-columns:68px minmax(0,1fr) 68px}.side-action strong{font-size:15px}.side-action small{font-size:13px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}