:root{font-family:'Microsoft JhengHei',system-ui,sans-serif;color:#252724;background:#f7f5ee;line-height:1.65;--ink:#252724;--muted:#676b62;--sage:#425b37;--sage-pale:#e9eddf;--coral:#df6047;--ochre:#dfa93e;--paper:#fffefa;--line:#dedfd6}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% 16%,#eef0e4 0,transparent 27%),#f7f5ee}button,textarea,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid #9f3f2d;outline-offset:3px}a{color:inherit;text-underline-offset:4px}.site-header,.site-footer{max-width:1320px;margin:auto;padding:22px 34px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.brand{font-size:25px;font-weight:900;text-decoration:none;color:var(--sage);letter-spacing:-.04em}.brand span{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:8px}.site-header nav,.site-footer nav{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px}.draw-page,.tools-home{max-width:1240px;margin:auto;padding:38px 24px 72px}.draw-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:6px 0 30px}.draw-heading h1,.tools-intro h1{font-size:clamp(40px,6vw,70px);line-height:1.05;letter-spacing:-.055em;margin:0 0 12px}.draw-heading>div>p,.tools-intro>div>p{font-size:21px;color:var(--muted);margin:0}.heading-note{text-align:right;color:#53664b;font-size:17px;transform:rotate(-2deg);margin:0 18px 8px 0}.draw-app{display:grid;grid-template-columns:minmax(280px,.95fr) minmax(360px,1.15fr) 240px;background:rgba(255,254,250,.9);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(63,69,54,.06)}.draw-setup,.wheel-stage,.history-panel{padding:24px}.draw-setup{border-right:1px solid var(--line)}.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}.mode-tabs button{min-height:48px;border:0;border-radius:12px;background:#eff0e9;color:var(--ink);font-weight:750}.mode-tabs button[aria-selected=true]{background:var(--sage);color:#fff}.list-label{display:block;font-weight:750;margin-bottom:7px}.draw-setup textarea{width:100%;min-height:282px;resize:vertical;border:1.5px solid #cfd3c8;border-radius:13px;background:#fff;padding:14px;font-size:16px;line-height:1.55;color:var(--ink)}.list-meta{display:flex;justify-content:space-between;gap:12px;margin:8px 2px 18px;color:var(--muted);font-size:14px}.text-button{border:0;background:transparent;color:#52644b;text-decoration:underline;text-underline-offset:3px;padding:2px}.draw-options{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px}.draw-options label{display:flex;align-items:center;gap:9px;font-weight:650}.draw-options input[type=checkbox]{width:20px;height:20px;accent-color:var(--sage)}.group-option input{width:64px;border:1px solid #cfd3c8;border-radius:9px;padding:6px 8px;background:#fff}.local-note{font-size:13px;color:var(--muted);margin:14px 0 0}.wheel-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.wheel-wrap{width:min(100%,430px);aspect-ratio:1;position:relative;transition:transform 3.6s cubic-bezier(.12,.7,.12,1);will-change:transform}.wheel-wrap canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 12px 18px rgba(43,60,35,.15))}.pointer{position:absolute;z-index:2;left:50%;top:-7px;transform:translateX(-50%);width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:38px solid var(--coral);filter:drop-shadow(0 3px 2px rgba(70,45,35,.18))}.wheel-center{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:94px;height:94px;border-radius:50%;background:var(--sage);color:#fff;font-weight:900;font-size:20px;box-shadow:0 0 0 7px rgba(255,255,255,.72)}.start-button{width:min(100%,380px);min-height:58px;border:0;border-radius:18px;background:var(--coral);color:white;font-size:21px;font-weight:850;box-shadow:0 8px 20px rgba(223,96,71,.18)}.start-button:hover{background:#cc4f38}.start-button:disabled{opacity:.55;cursor:wait}.screen-button{min-height:44px;border:1px solid #aeb4a7;border-radius:11px;background:transparent;color:#465242;padding:8px 16px}.history-panel{background:linear-gradient(180deg,#edf0e4,#f7f6ef);border-left:1px solid var(--line)}.history-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.history-title h2{font-size:21px;margin:0}.history-panel ol{list-style:none;padding:0;margin:16px 0 0}.history-panel li{padding:10px 0;border-bottom:1px solid #d7dbd0;overflow-wrap:anywhere}.history-panel li span{display:block;color:var(--muted);font-size:12px}.history-panel .empty-history{color:var(--muted);border:0}.result-panel{display:grid;grid-template-columns:minmax(220px,.8fr) 1.25fr auto;align-items:center;gap:28px;margin:18px 0 0;padding:26px 30px;background:#fffefa;border:1px solid var(--line);border-radius:22px}.result-panel>div:first-child span{color:var(--sage);font-weight:750}.result-panel h2{font-size:clamp(32px,5vw,58px);line-height:1.15;margin:5px 0;white-space:pre-line;overflow-wrap:anywhere}.result-panel dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0}.result-panel dl div{border-left:1px solid var(--line);padding-left:16px}.result-panel dt{font-size:12px;color:var(--muted)}.result-panel dd{margin:3px 0 0;font-weight:750;overflow-wrap:anywhere}.result-actions{display:grid;gap:8px}.result-actions button{min-height:44px;padding:9px 15px;border:1px solid #aeb4a7;border-radius:10px;background:#fff}.draw-content,.faq{margin-top:44px;padding:34px;background:rgba(255,254,250,.75);border-radius:22px}.draw-content h2,.faq h2,.tool-principles h2{font-size:29px;letter-spacing:-.03em;margin:0 0 14px}.draw-content>p{font-size:18px;color:#4f554c;max-width:900px}.content-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:28px}.content-columns h3{font-size:19px;margin:0 0 8px}.content-columns p{margin:0;color:#555c51}.faq details{border-top:1px solid var(--line);padding:16px 0}.faq summary{cursor:pointer;font-weight:800}.faq details p{margin:10px 0 0;color:#555c51}.guide-ad{margin:54px 0 0;min-height:280px;border-top:1px solid var(--line);padding-top:12px}.guide-ad>span{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}.site-footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px}.site-footer p{margin:18px 0 0}.tools-intro{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:60px;min-height:520px}.featured-tool{display:block;text-decoration:none;background:linear-gradient(135deg,#e5ead9,#f4e5c0);padding:38px;border-radius:26px;box-shadow:0 22px 60px rgba(60,67,49,.1)}.featured-tool span{font-size:13px;color:var(--muted)}.featured-tool h2{font-size:46px;margin:15px 0 4px}.featured-tool p{font-size:18px}.featured-tool strong{color:#b64732}.tool-principles{padding:34px;background:#fffefa;border-radius:22px}.tool-principles>div{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.tool-principles p{margin:0;color:#555c51}.tool-principles strong{color:var(--ink)}
@media(max-width:1000px){.draw-app{grid-template-columns:1fr 1fr}.history-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.history-panel ol{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.result-panel{grid-template-columns:1fr}.result-panel dl{grid-template-columns:repeat(3,1fr)}.result-actions{display:flex}.tools-intro{grid-template-columns:1fr;min-height:0}}
@media(max-width:720px){.site-header{padding:17px 20px}.site-header nav{display:none}.draw-page,.tools-home{padding:28px 15px 52px}.draw-heading{align-items:flex-start}.heading-note{display:none}.draw-heading h1,.tools-intro h1{font-size:42px}.draw-heading>div>p,.tools-intro>div>p{font-size:18px}.draw-app{grid-template-columns:1fr}.draw-setup{border-right:0;border-bottom:1px solid var(--line);padding:18px}.wheel-stage{padding:24px 18px}.wheel-wrap{width:min(88vw,390px)}.history-panel{grid-column:auto;padding:20px}.history-panel ol{grid-template-columns:1fr}.mode-tabs button{font-size:14px}.draw-setup textarea{min-height:220px}.result-panel{padding:22px 20px}.result-panel dl{grid-template-columns:1fr}.result-panel dl div{border-left:0;border-top:1px solid var(--line);padding:8px 0 0}.content-columns,.tool-principles>div{grid-template-columns:1fr}.draw-content,.faq,.tool-principles{padding:25px 20px}.tools-intro{gap:30px}.featured-tool{padding:28px}.site-footer{padding:22px 20px}.site-footer nav{gap:8px 16px}}
@media(prefers-reduced-motion:reduce){.wheel-wrap{transition-duration:.01ms}.start-button{scroll-behavior:auto}}
[hidden]{display:none!important}

/* Use-case entry pages */
.use-case-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}.use-case-links a{display:grid;gap:4px;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--paper);text-decoration:none}.use-case-links strong{color:var(--sage)}.use-case-links span{font-size:13px;color:var(--muted)}
.scenario-page{max-width:980px;margin:auto;padding:32px 24px 80px}.breadcrumbs{display:flex;gap:8px;font-size:13px;color:var(--muted);margin:10px 0 54px}.scenario-hero{max-width:820px}.scenario-hero>p:first-child{margin:0;color:var(--coral);font-weight:850;letter-spacing:.08em}.scenario-hero h1{font-size:clamp(40px,7vw,72px);line-height:1.08;letter-spacing:-.055em;margin:10px 0 20px;text-wrap:balance}.scenario-hero h1+p{margin:0;font-size:20px;color:#4f554c}.scenario-primary,.scenario-cta a{display:inline-block;margin-top:18px;padding:13px 22px;border-radius:13px;background:var(--coral);color:#fff;font-weight:850;text-decoration:none}.scenario-steps{margin:64px 0 28px;padding:30px 32px;background:var(--paper);border:1px solid var(--line);border-radius:22px}.scenario-steps h2,.scenario-cta h2{font-size:29px;margin:0 0 18px}.scenario-steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:steps;list-style:none;padding:0;margin:0}.scenario-steps li{counter-increment:steps}.scenario-steps li:before{content:counter(steps);display:grid;place-items:center;width:36px;height:36px;margin-bottom:12px;border-radius:50%;background:var(--sage-pale);color:var(--sage);font-weight:900}.scenario-note{padding:22px 26px;border-left:5px solid var(--ochre);background:#f4eddc;border-radius:6px 16px 16px 6px}.scenario-note p{margin:7px 0 0}.scenario-cta{text-align:center;margin-top:66px;padding:40px 24px;background:var(--sage-pale);border-radius:22px}.scenario-cta p{max-width:620px;margin:auto;color:#4f554c}
@media(max-width:900px){.use-case-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.use-case-links{grid-template-columns:1fr}.scenario-page{padding:22px 18px 58px}.breadcrumbs{margin:7px 0 25px}.scenario-hero h1{font-size:clamp(32px,8.4vw,37px);line-height:1.12;letter-spacing:-.045em;margin:8px 0 14px;text-wrap:pretty}.scenario-hero h1+p{font-size:17px;line-height:1.7}.scenario-primary{margin-top:16px;padding:11px 18px}.scenario-steps{margin:34px 0 22px;padding:21px 18px}.scenario-steps h2{font-size:25px;margin-bottom:8px}.scenario-steps ol{grid-template-columns:1fr;gap:0}.scenario-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:12px;padding:13px 0}.scenario-steps li+li{border-top:1px solid var(--line)}.scenario-steps li:before{margin:0}.scenario-note{padding:18px 19px}.scenario-cta{margin-top:38px;padding:30px 20px}}

/* Full-screen host console and page-by-page reading */
html{scroll-behavior:smooth;scroll-padding-top:78px;scroll-snap-type:y mandatory}
.site-header{position:sticky;top:0;z-index:20;background:rgba(247,245,238,.94);backdrop-filter:blur(14px)}
.snap-section{scroll-snap-align:start;scroll-snap-stop:always}
.draw-page{padding-top:0}
.draw-console{min-height:calc(100dvh - 78px);display:flex;flex-direction:column;justify-content:center;padding:10px 0 0}
.draw-heading{flex:0 0 auto;margin:0 0 13px}
.draw-heading h1{font-size:clamp(38px,5dvh,58px);margin-bottom:5px}
.draw-heading>div>p{font-size:clamp(16px,2.1dvh,20px)}
.draw-app{flex:0 1 auto;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.12fr) 225px}
.draw-setup,.wheel-stage,.history-panel{padding:clamp(15px,2dvh,22px)}
.control-label{margin:0 0 5px;color:var(--muted);font-size:13px;font-weight:800;letter-spacing:.05em}
.source-tabs{grid-template-columns:repeat(2,1fr);margin-bottom:10px}
.mode-tabs{margin-bottom:12px}
.source-tabs button{min-height:38px}
.draw-setup textarea{height:clamp(150px,23dvh,225px);min-height:0;resize:none}
.list-meta{margin:5px 2px 9px}
.wheel-stage{gap:10px}
.wheel-wrap{width:min(100%,41dvh,390px)}
.start-button{min-height:50px;font-size:19px}
.screen-button{min-height:38px;padding:6px 14px}
.history-panel ol{margin-top:9px;max-height:44dvh;overflow:auto;scrollbar-width:thin}
.history-panel li{padding:7px 0}
.result-panel{flex:0 0 auto;margin-top:4px;padding:6px 18px;gap:14px}
.result-panel h2{font-size:clamp(27px,4dvh,44px);margin:2px 0}
.scroll-cue{align-self:center;margin-top:7px;color:var(--muted);font-size:13px;text-decoration:none}
.draw-content,.faq{min-height:calc(100dvh - 78px);margin-top:0;display:flex;flex-direction:column;justify-content:center}

/* QR participant source */
.qr-source{min-height:190px}
.qr-create{width:100%;min-height:48px;border:0;border-radius:13px;background:var(--sage);color:#fff;font-weight:850}
.qr-status{margin:8px 0;color:var(--muted);font-size:13px}
.qr-status[data-error=true],.join-status[data-error=true]{color:#b13b2b}
.qr-room{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:13px;margin:8px 0}
.qr-room img{width:112px;height:112px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:5px}
.qr-room>div{display:grid;gap:2px;min-width:0}
.qr-room span{font-size:12px;color:var(--muted)}
.qr-room strong{font-size:28px;line-height:1.1;letter-spacing:.08em;color:var(--sage)}
.qr-room a{font-size:13px;color:#52644b}
.qr-room b{font-size:13px}
.qr-members{list-style:none;padding:0;margin:7px 0 10px;max-height:104px;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;scrollbar-width:thin}
.qr-members li{display:flex;align-items:center;gap:5px;border:1px solid #d5d9ce;border-radius:999px;background:#fff;padding:3px 5px 3px 10px;font-size:13px}
.qr-members button{border:0;border-radius:999px;background:#eef0e9;color:#586052;padding:2px 7px;font-size:11px}

/* Participant join screen */
.join-tool-page{min-height:calc(100dvh - 150px);display:grid;place-content:center;justify-items:center;padding:38px 18px;background:radial-gradient(circle at 50% 10%,#e8eddd,transparent 45%)}
.join-card{width:min(100%,480px);background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:clamp(25px,6vw,46px);box-shadow:0 22px 60px rgba(60,67,49,.09)}
.join-card .eyebrow{margin:0;color:var(--sage);font-weight:850}
.join-card h1{margin:7px 0 5px;font-size:clamp(34px,9vw,52px);line-height:1.05;letter-spacing:-.045em}
.join-card form{display:grid;gap:9px;margin-top:24px}
.join-card label{font-weight:800}
.join-card input{width:100%;min-height:54px;border:1.5px solid #cfd3c8;border-radius:13px;padding:10px 14px;background:#fff}
.join-card button{min-height:54px;border:0;border-radius:13px;background:var(--coral);color:#fff;font-weight:850}
.join-status{min-height:26px;margin:16px 0 0;color:var(--muted)}
.join-success{text-align:center;padding-top:20px}
.join-success>span{display:grid;place-items:center;width:58px;height:58px;margin:auto;border-radius:50%;background:var(--sage);color:#fff;font-size:30px;font-weight:900}
.join-success h2{margin:12px 0 4px}
.join-success p{margin:0;color:var(--muted)}
.join-back{margin-top:18px;color:var(--muted);font-size:14px}

@media(max-width:1000px) and (min-width:721px){.draw-app{grid-template-columns:minmax(260px,.9fr) minmax(330px,1.1fr)}.history-panel{display:none}.draw-heading{margin-bottom:10px}.wheel-wrap{width:min(100%,40dvh,370px)}}
@media(max-height:900px) and (min-width:721px){.site-header{padding-top:14px;padding-bottom:14px}.draw-console{min-height:calc(100dvh - 70px)}.draw-heading h1{font-size:38px}.heading-note{font-size:14px}.mode-tabs button{min-height:39px}.draw-setup textarea{height:150px}.wheel-wrap{width:min(100%,38dvh,310px)}.draw-content,.faq{min-height:calc(100dvh - 70px)}.result-panel h2{font-size:27px}.scroll-cue{margin-top:1px}}
@media(max-width:720px){html{scroll-snap-type:none;scroll-padding-top:0}.site-header{position:static}.draw-page{padding-top:22px}.draw-console,.draw-content,.faq{min-height:0;display:block;padding:0}.draw-heading{margin-bottom:22px}.draw-app{display:grid}.draw-setup textarea{height:auto;min-height:220px;resize:vertical}.wheel-wrap{width:min(88vw,390px)}.history-panel{display:block}.result-panel{margin-top:18px;padding:22px 20px}.scroll-cue{display:none}.draw-content,.faq{margin-top:44px}.qr-room{grid-template-columns:104px 1fr}.qr-room img{width:104px;height:104px}}