@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css');

/* source: hanja.css */

:root { --paper:#f7f7ef; --ink:#213d34; --muted:#62736b; --line:#dce2d6; --green:#245543; --sage:#e9efdf; --yellow:#f5dfa1; --blue:#e5eef1; --peach:#f4e6db; --font:'Gowun Dodum','Malgun Gothic',sans-serif; --glyph:'Noto Serif KR','Batang',serif; }
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--paper); scroll-padding-bottom:100px; }
body { margin:0; font-family:var(--font); background:radial-gradient(ellipse at 90% 0,#e6eddf70,transparent 40%),var(--paper); font-size:17px; line-height:1.65; }
button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:0; color:inherit; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid #aa541f; outline-offset:4px; }
h1,h2,h3,p { margin:0; word-break:keep-all; overflow-wrap:anywhere; }
h1:focus { outline:none; }
h1 { font-size:clamp(25px,3vw,33px); line-height:1.4; letter-spacing:-.04em; }
h2 { font-size:21px; line-height:1.4; }
strong { font-weight:700; }
a { color:inherit; }
progress { display:block; width:100%; height:9px; border:0; border-radius:10px; overflow:hidden; background:#e0e5d9; accent-color:var(--green); }
progress::-webkit-progress-bar { background:#e0e5d9; border-radius:10px; }
progress::-webkit-progress-value { background:var(--green); border-radius:10px; }
.skip-link { position:fixed; top:-100px; left:15px; padding:12px; background:var(--green); color:white; z-index:20; }
.skip-link:focus { top:10px; }
#app { width:min(1100px,calc(100% - 64px)); margin:auto; }
.header { min-height:108px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; gap:12px; align-items:center; text-decoration:none; font-size:24px; font-weight:700; letter-spacing:-.06em; }
.brand-icon { width:44px; height:48px; border-radius:13px 13px 18px 13px; background:var(--green); color:#f9e6ae; font:28px var(--glyph); display:grid; place-items:center; transform:rotate(-6deg); }
.brand-light { font-weight:400; }
.brand small { display:block; font-size:11px; letter-spacing:.04em; font-weight:400; color:var(--muted); }
.profile { display:flex; gap:20px; align-items:center; font-size:14px; }
.nickname { padding:11px 12px; border:1px solid var(--line); border-radius:30px; background:#fff9; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stars { white-space:nowrap; }
.stars > span { color:#997017; font-size:21px; }
.page-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:30px 0 22px; }
.eyebrow { font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; font-weight:700; }
.date,.quiet,.muted,.subtitle { font-size:13px; color:var(--muted); }
.subtitle { margin-top:8px; }
.date { white-space:nowrap; }
.tag { display:inline-block; padding:5px 11px; border:1px solid #a699624d; border-radius:6px; background:#fff5; font-size:12px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:50px; padding:12px 22px; border-radius:12px; color:white; background:var(--green); font-weight:700; line-height:1.5; text-decoration:none; border:1px solid transparent; }
.button:hover:not(:disabled) { background:#173f30; }
.button.primary { background:var(--green); color:white; box-shadow:0 4px 0 #173e30; }
.button.outline { color:var(--ink); border-color:var(--line); background:white; }
.button.outline:hover { background:#f1f4ec; }
.button.small { min-height:44px; padding:9px 15px; font-size:14px; }
.button:disabled { opacity:.4; }
.text-button { padding:10px 3px; min-height:44px; background:transparent; color:var(--green); font-size:14px; font-weight:700; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; padding:35px 40px; background:var(--yellow); border:1px solid #e5ce94; border-radius:25px; position:relative; overflow:hidden; }
.hero-copy { z-index:1; }
.hero h2 { font-size:37px; letter-spacing:-.05em; margin:18px 0 9px; }
.hero h2 > span { display:block; font-weight:400; font-size:25px; margin-top:3px; }
.hero-copy > p { font-size:15px; margin-bottom:24px; }
.hero-copy > .quiet { display:block; margin-top:14px; font-size:12px; color:#645b39; }
.hero-glyphs { display:flex; justify-content:center; align-items:center; gap:17px; z-index:1; }
.hero-tile { width:min(44%,158px); aspect-ratio:0.82; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#fffdf4; border:1px solid #cbbd95; border-radius:14px; box-shadow:0 7px 0 #c6b78460; transform:rotate(-6deg); }
.hero-tile + .hero-tile { transform:rotate(7deg) translateY(12px); }
.hero-tile b { font:clamp(60px,7vw,88px) var(--glyph); line-height:1.4; }
.hero-tile > span { font-size:14px; color:#6c6041; }
.hero-decoration { position:absolute; font:300px var(--glyph); right:-60px; top:-100px; opacity:.035; pointer-events:none; }
.home-lower { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; margin-top:20px; }
.review-card,.progress-card { padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.review-card { display:flex; align-items:center; gap:18px; }
.review-card h2 { font-size:19px; }
.review-card p:not(.eyebrow) { font-size:13px; margin-top:7px; color:var(--muted); }
.review-card > .button { margin-left:auto; white-space:nowrap; font-size:14px; padding:10px 14px; }
.mini-icon { display:grid; place-items:center; width:51px; height:55px; border-radius:50%; background:var(--sage); font:27px var(--glyph); flex-shrink:0; }
.check-mark { font-size:28px; margin-left:auto; color:#648c55; }
.progress-card .eyebrow { margin:0; }
.progress-number { display:flex; justify-content:space-between; align-items:baseline; margin:8px 0; gap:10px; }
.progress-number > strong { font-size:28px; line-height:1; }
.progress-number small { font-size:13px; font-weight:400; color:var(--muted); }
.progress-number > span { font-size:12px; }
.progress-card .text-button { padding-bottom:0; }
.section { margin-top:30px; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; }
.world-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.world-card { display:flex; gap:16px; align-items:center; text-align:left; padding:20px; border-radius:16px; border:1px solid #203d3412; min-height:98px; transition:transform .18s ease; }
.world-card:hover { transform:translateY(-3px); }
.sage { background:var(--sage); }
.blue { background:var(--blue); }
.peach { background:var(--peach); }
.yellow { background:#f5edd5; }
.world-mark { font:35px var(--glyph); width:42px; text-align:center; }
.world-card strong,.world-card small { display:block; }
.world-card strong { font-size:18px; }
.world-card small { font-size:12px; color:var(--muted); margin-top:3px; }
.world-count { margin-left:auto; font-size:13px; white-space:nowrap; }
.world-count > span { display:block; text-align:right; font-size:20px; }
.nav { display:flex; width:fit-content; margin:32px auto 0; border:1px solid var(--line); border-radius:18px; padding:5px; background:#fffc; }
.nav > button { display:flex; align-items:center; gap:10px; min-width:120px; min-height:48px; justify-content:center; border-radius:12px; background:transparent; font-size:14px; color:var(--muted); padding:10px 16px; }
.nav > button.selected { background:var(--green); color:#fff; }
.nav-mark { font:18px var(--glyph); }
.footer { font-size:11px; color:var(--muted); text-align:center; padding:22px 0 30px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.filters > button { border:1px solid var(--line); background:white; padding:10px 17px; min-height:44px; border-radius:30px; font-size:14px; }
.filters > button.active { background:var(--green); border-color:var(--green); color:white; }
.map-worlds { display:grid; gap:20px; }
.map-world { border-radius:23px; padding:25px; border:1px solid #203d3412; }
.world-seal { font-size:12px; border:1px dashed #728473; border-radius:30px; padding:7px 13px; }
.world-seal.earned { background:var(--green); color:white; border-style:solid; }
.map-nodes { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.map-node { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; border:1px solid #cbd3c5; background:#fffaf0b8; border-radius:15px; min-height:156px; padding:13px 8px; box-shadow:0 4px 0 #cbd3c550; }
.map-node:hover { background:white; }
.map-node.done { border-color:#6f987b; background:#fff; }
.node-order { font-size:11px; align-self:flex-start; color:var(--muted); }
.node-glyph { font:26px var(--glyph); margin:15px 0 8px; }
.map-node > strong { font-size:15px; }
.node-arrow { position:absolute; right:9px; bottom:9px; color:#6d806c; font-size:14px; }
.count { display:inline-block; vertical-align:middle; font-size:16px; padding:5px 12px; border:1px solid var(--line); border-radius:30px; margin-left:7px; }
.collection-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.collection-card { display:flex; align-items:center; flex-direction:column; gap:12px; border:1px solid var(--line); border-radius:16px; padding:15px 8px 20px; min-height:185px; background:#fff9; }
.collection-card.discovered { background:#eff4df; border-color:#a5b995; box-shadow:0 4px 0 #a5b99540; }
.collection-status { font-size:11px; color:var(--muted); }
.collection-glyph { font:51px var(--glyph); line-height:1.2; }
.collection-card > strong { font-size:15px; }
.undiscovered .collection-glyph { color:#8a9487; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stats-grid article { display:grid; padding:23px; border:1px solid var(--line); border-radius:17px; background:white; }
.stats-grid strong { font-size:32px; }
.stats-grid span { font-size:14px; color:var(--muted); }
.panel { border:1px solid var(--line); background:#fff; border-radius:22px; padding:26px; }
.week { list-style:none; display:flex; justify-content:space-between; gap:8px; margin:0; padding:0; }
.week li { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; flex:1; }
.week b { width:47px; height:47px; display:grid; place-items:center; border:1px dashed var(--line); border-radius:50%; font-size:22px; color:#71806b; background:#f8faf4; }
.week .stamped b { background:var(--green); color:#f9e1a6; border:0; }
.week small { color:var(--muted); }
.badge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.badge { display:flex; flex-direction:column; align-items:center; padding:23px 10px; background:#e9ece4; border-radius:18px; border:1px dashed #bbc5b5; color:#65745c; }
.badge b { font:35px var(--glyph); border:2px solid currentColor; border-radius:50%; padding:9px 14px; margin-bottom:12px; }
.badge strong { font-size:14px; }
.badge small { font-size:11px; margin-top:4px; }
.badge.earned { background:#f8e7af; color:#71531d; border-style:solid; border-color:#d9b65f; }
.timeline { background:white; border:1px solid var(--line); border-radius:16px; padding:18px 22px; margin-bottom:12px; }
.timeline summary { cursor:pointer; min-height:32px; }
.timeline summary > span { font-size:13px; float:right; color:var(--muted); }
.timeline ul { list-style:none; margin:14px 0 0; padding:0; }
.timeline li { display:flex; gap:15px; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); font-size:15px; }
.timeline small { color:var(--muted); font-size:12px; white-space:nowrap; }
.empty { padding:35px; text-align:center; border:1px dashed #bfcbbb; border-radius:20px; }
.empty > span { font:45px var(--glyph); }
.empty h3 { font-size:20px; margin:12px 0; }
.empty p { color:var(--muted); font-size:14px; }
.content-note { margin-top:30px; color:var(--muted); font-size:13px; }
.content-note summary { cursor:pointer; padding:10px 0; }
.content-note p { margin:10px 0; }
.resume-strip { display:flex; justify-content:space-between; align-items:center; gap:15px; background:#e8efdf; border:1px solid #c5d5b7; border-radius:15px; padding:15px 20px; margin-bottom:20px; }
.resume-strip strong { font-size:15px; }
.resume-strip span { display:block; font-size:12px; color:var(--muted); }
.study { max-width:850px; margin:0 auto; padding-bottom:45px; }
.study-header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:90px; font-size:15px; }
.study-header .step-label { font-size:12px; color:var(--muted); }
.study-intro { text-align:center; margin:32px 0 22px; }
.study-intro h1 { font-size:32px; }
.study-intro h1 .muted { font:27px var(--glyph); margin-left:8px; }
.study-intro > p:last-child { margin-top:10px; font-size:16px; color:var(--muted); }
.learn-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.learn-card { border:1px solid #d4ddcc; border-radius:22px; padding:20px; background:#fffdf5; text-align:center; position:relative; }
.card-index { position:absolute; left:20px; top:16px; font-size:12px; color:var(--muted); }
.learn-glyph { display:block; font:clamp(90px,13vw,140px) var(--glyph); line-height:1.5; }
.learn-card h2 { font-size:21px; font-weight:400; }
.learn-card h2 > span { font-weight:700; color:#a44f29; margin-left:8px; }
.learn-actions { display:flex; justify-content:center; gap:20px; border-top:1px solid var(--line); margin-top:20px; padding-top:10px; }
.word-note { background:#eaf0e4; border:1px solid #d9e3d1; border-radius:15px; padding:20px 24px; margin:20px 0; }
.word-note strong { font-size:18px; }
.word-note p { margin-top:6px; font-size:15px; color:var(--muted); }
.study-cta { display:flex; align-items:center; flex-direction:column; gap:12px; margin-top:24px; }
.study-cta .button { min-width:260px; }
.quiz-content { max-width:680px; margin:33px auto 0; text-align:center; }
.quiz-content h1 { font-size:25px; }
.quiz-glyph { font:clamp(74px,12vw,116px) var(--glyph); margin:20px auto 25px; line-height:1.6; }
.quiz-glyph.word-prompt { font:30px var(--font); margin:15px auto; }
.sentence-prompt { border:1px solid #d6decd; background:#fffef4; border-radius:18px; padding:30px; margin:25px 0; font-size:24px; line-height:1.8; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice { display:flex; align-items:center; gap:13px; border:1px solid #ced7c7; border-radius:14px; background:#fff; padding:18px; text-align:left; font-size:17px; min-height:75px; }
.choice:hover:not(:disabled) { background:#edf2e4; border-color:#7d9a74; }
.choice-key { width:27px; height:27px; display:grid; place-items:center; background:#f3f5ee; color:var(--muted); border:1px solid var(--line); border-radius:8px; flex-shrink:0; font-size:12px; }
.choice.correct { border:2px solid #527f4e; background:#e9f1df; }
.choice.incorrect { border:2px solid #b57636; background:#fbefda; }
.answer-mark { margin-left:auto; font-size:11px; white-space:nowrap; color:var(--green); }
.hint-area { margin:18px 0; }
.hint-area > p { background:#f4eed6; font-size:15px; border-radius:12px; padding:15px 20px; }
.feedback { text-align:left; border:1px solid #cedac0; background:#e9f1df; border-radius:17px; padding:23px; margin-top:22px; }
.feedback.encourage { background:#f9edd9; border-color:#e4d0ab; }
.feedback > strong { font-size:20px; }
.feedback > p { margin-top:10px; font-size:16px; }
.feedback > .button { margin-top:20px; min-width:170px; }
.correct-answer { font-weight:700; }
.build-slots { display:flex; justify-content:center; gap:12px; margin:18px 0 25px; }
.build-slots > span { width:100px; height:104px; border:2px dashed #b3c1a9; border-radius:15px; display:grid; place-items:center; background:white; font:55px var(--glyph); }
.tile-choices { display:flex; justify-content:center; gap:12px; }
.glyph-button { width:85px; height:90px; background:#fffaf0; border:1px solid #c5cdbb; border-radius:12px; font:44px var(--glyph); box-shadow:0 4px 0 #cbd3c560; }
.glyph-button:disabled { opacity:.3; box-shadow:none; }
.build-tools { display:flex; align-items:center; justify-content:center; gap:20px; margin:25px 0 8px; }
.result { max-width:690px; text-align:center; margin:40px auto; padding:40px; }
.result-seal { display:grid; place-items:center; width:100px; height:100px; font:55px var(--glyph); border:3px solid #547448; color:#547448; border-radius:50%; background:#edf3df; transform:rotate(-9deg); margin:0 auto 22px; }
.result h1 { margin:8px 0 15px; }
.result > p:not(.eyebrow) { font-size:15px; color:var(--muted); }
.result-stats { display:flex; justify-content:center; gap:55px; margin:25px 0; }
.result-stats > div { display:grid; }
.result-stats strong { font-size:32px; }
.result-stats span { font-size:13px; color:var(--muted); }
.result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:27px; }
.writing-panel { display:grid; justify-items:center; border:1px solid var(--line); border-radius:18px; background:white; padding:22px; margin-top:20px; gap:16px; text-align:center; }
.writing-panel h2 { font-size:20px; }
.writing-paper { width:min(300px,100%); aspect-ratio:1; position:relative; border:1px solid #cdd7c3; background:linear-gradient(90deg,transparent calc(50% - .5px),#dce3d6 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),#dce3d6 50%,transparent calc(50% + .5px)); }
.writing-paper > span { position:absolute; inset:0; display:grid; place-items:center; font:190px var(--glyph); color:#dae2d2; pointer-events:none; }
#writing-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.writing-tools { display:flex; gap:15px; }
.storage-warning { padding:15px; border:1px solid #b78646; background:#f7ebd3; border-radius:12px; margin-top:15px; font-size:14px; }
dialog { border:1px solid var(--line); border-radius:23px; width:min(470px,calc(100% - 32px)); padding:26px; color:var(--ink); font:17px/1.7 var(--font); box-shadow:0 24px 80px #132a3430; }
dialog::backdrop { background:#1d352c66; backdrop-filter:blur(3px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }
.dialog-head h2 { font-size:21px; }
.dialog-close { background:transparent; font:30px var(--font); min-width:44px; min-height:44px; }
.dialog-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:25px; }
.dialog-actions .button { flex:1; white-space:nowrap; font-size:15px; }
.name-label { display:block; font-size:14px; margin-bottom:8px; }
input { width:100%; border:1px solid #a5b69b; padding:13px; border-radius:10px; background:#fafbf6; color:var(--ink); }
.form-error { color:#984829; font-size:14px; }
.dialog-character { font:90px var(--glyph); text-align:center; margin:10px; }
@keyframes enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
.hero,.result { animation:enter .25s ease both; }
@media(min-width:1100px) { .home-lower .review-card { min-height:160px; } }
@media(max-width:900px) { .home-lower { grid-template-columns:1fr 1fr; } .review-card { flex-wrap:wrap; } .review-card > .button { margin:0; } .map-nodes { grid-template-columns:repeat(3,1fr); } .collection-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:600px) {
  body { font-size:16px; }
  #app { width:calc(100% - 32px); }
  .header { min-height:83px; gap:10px; }
  .brand { font-size:21px; gap:8px; }
  .brand-icon { width:36px; height:40px; font-size:23px; border-radius:10px; }
  .brand small { display:none; }
  .profile { gap:7px; font-size:12px; }
  .nickname { max-width:125px; padding:10px; min-height:44px; }
  .stars { font-size:12px; }
  .page-intro { padding:24px 0 19px; }
  .page-intro h1 { font-size:25px; }
  .date { display:none; }
  .hero { gap:15px; grid-template-columns:1fr; padding:24px; border-radius:22px; }
  .hero-copy { display:contents; }
  .hero .tag { width:fit-content; grid-row:1; }
  .hero h2 { font-size:28px; margin:0; grid-row:2; }
  .hero h2 > span { display:inline; font-size:19px; margin-left:8px; }
  .hero-copy > p { font-size:14px; margin:0; grid-row:3; }
  .hero-glyphs { grid-row:4; padding:2px 10px 12px; gap:22px; }
  .hero-tile { width:116px; aspect-ratio:.92; }
  .hero-tile b { font-size:63px; }
  .hero-tile > span { font-size:12px; }
  .hero-copy > .button { grid-row:5; width:100%; }
  .hero-copy > .quiet { grid-row:6; margin:0; text-align:center; font-size:11px; }
  .home-lower { grid-template-columns:1fr; gap:12px; margin-top:14px; }
  .review-card { flex-wrap:nowrap; gap:13px; padding:20px; }
  .review-card h2 { font-size:18px; }
  .review-card .mini-icon { width:40px; height:43px; font-size:24px; }
  .review-card > .button { margin-left:auto; font-size:12px; padding:10px; min-width:72px; }
  .review-card p:not(.eyebrow) { font-size:12px; }
  .progress-card { padding:20px; }
  .section { margin-top:25px; }
  .section-head h2 { font-size:20px; }
  .world-grid { grid-template-columns:1fr; gap:11px; }
  .world-card { min-height:86px; padding:17px 20px; }
  .world-mark { font-size:30px; }
  .nav { position:sticky; bottom:12px; width:100%; margin-top:25px; padding:5px; border-radius:17px; box-shadow:0 6px 25px #1d392b14; background:#fffef7f5; backdrop-filter:blur(8px); z-index:5; padding-bottom:max(5px,env(safe-area-inset-bottom)); }
  .nav > button { flex:1; min-width:0; padding:8px 4px; gap:3px; font-size:11px; flex-direction:column; min-height:54px; }
  .nav-mark { font-size:18px; }
  .footer { padding:20px 5px 30px; font-size:10px; }
  .filters { gap:6px; }
  .filters > button { padding:9px 13px; font-size:13px; }
  .map-world { padding:20px 15px; border-radius:18px; }
  .map-world .section-head { align-items:flex-end; }
  .world-seal { font-size:10px; padding:6px 9px; }
  .map-nodes { gap:9px; }
  .map-node { padding:11px 5px; min-height:135px; }
  .node-glyph { font-size:25px; margin:11px 0 7px; }
  .node-arrow { font-size:12px; right:5px; bottom:5px; }
  .collection-grid { grid-template-columns:repeat(3,1fr); gap:9px; }
  .collection-card { padding:12px 4px 17px; gap:10px; min-height:158px; }
  .collection-glyph { font-size:44px; }
  .collection-card > strong { font-size:13px; }
  .collection-status { font-size:10px; }
  .count { font-size:13px; padding:4px 8px; }
  .stats-grid { gap:8px; }
  .stats-grid article { padding:17px 12px; }
  .stats-grid strong { font-size:27px; }
  .stats-grid span { font-size:11px; }
  .panel { padding:19px; }
  .panel .section-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .week { gap:2px; }
  .week b { width:32px; height:32px; font-size:17px; }
  .week li { font-size:11px; }
  .badge-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .timeline { padding:16px; }
  .timeline summary { font-size:14px; }
  .timeline summary > span { display:block; float:none; margin-left:20px; font-size:12px; }
  .timeline li { flex-direction:column; gap:4px; }
  .resume-strip { padding:14px; }
  .resume-strip strong { font-size:13px; }
  .resume-strip .button { font-size:12px; padding:9px 12px; }
  .study-header { font-size:13px; min-height:76px; }
  .study-header .text-button { font-size:12px; }
  .study-header .step-label { font-size:11px; }
  .study-intro { margin:26px 0 19px; }
  .study-intro h1 { font-size:28px; }
  .study-intro > p:last-child { font-size:14px; }
  .learn-cards { gap:12px; }
  .learn-card { padding:18px 10px 10px; border-radius:18px; }
  .card-index { left:13px; top:11px; font-size:10px; }
  .learn-glyph { font-size:91px; }
  .learn-card h2 { font-size:18px; }
  .learn-actions { gap:0; margin-top:15px; padding-top:4px; justify-content:space-evenly; }
  .learn-actions .text-button { font-size:11px; }
  .word-note { padding:17px; }
  .word-note strong { font-size:16px; }
  .word-note p { font-size:14px; }
  .study-cta { margin-top:22px; }
  .study-cta .button { width:100%; }
  .study-cta .quiet { font-size:12px; }
  .quiz-content { margin-top:28px; }
  .quiz-content h1 { font-size:22px; }
  .quiz-glyph { font-size:97px; margin:14px 0 22px; }
  .quiz-glyph.word-prompt { font-size:27px; margin:12px 0; }
  .choices { gap:10px; grid-template-columns:1fr; }
  .choice { min-height:65px; padding:14px 15px; font-size:16px; }
  .feedback { padding:20px; }
  .feedback > .button { width:100%; }
  .sentence-prompt { padding:25px 18px; font-size:20px; }
  .glyph-button { width:61px; height:70px; font-size:36px; }
  .tile-choices { gap:10px; }
  .build-slots > span { width:85px; height:90px; font-size:50px; }
  .build-tools { gap:12px; }
  .build-tools > .button { padding:11px 15px; font-size:14px; }
  .result { margin:25px auto; padding:26px 20px; }
  .result h1 { font-size:25px; }
  .result-stats { gap:35px; }
  .result-actions { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }


/* source: mumuclass.css */
/* Observed mumuclass.kr: Pretendard, neutral canvas, violet/teal branding, white bordered cards. */

:root { --paper:#f7f7fa; --ink:#30283c; --muted:#726b80; --line:#e5e0ef; --green:#7c56bf; --sage:#efeaf8; --yellow:#f2ecfa; --blue:#e8f4f3; --peach:#fff2dd; --font:'Pretendard Variable','Pretendard','Malgun Gothic',sans-serif; --teal:#078d99; }
body { font-family:var(--font); background:#f7f7fa; font-size:16px; color:var(--ink); line-height:1.55; }
button,input { font-family:var(--font); }
h1,h2,h3 { letter-spacing:-.035em; }
h1 { font-weight:750; }
h2 { font-size:19px; font-weight:750; }
#app { width:min(1240px,calc(100% - 64px)); }
.brand-strip { display:flex; align-items:center; justify-content:space-between; color:#7b65a3; font-size:11px; height:30px; border-bottom:1px solid #ebe5f4; }
.brand-strip a { color:#786395; text-decoration:none; }
.header { min-height:87px; background:transparent; border-bottom:0; }
.brand { font-size:30px; gap:10px; line-height:1.05; letter-spacing:-.075em; }
.brand b { font-weight:950; color:#7e53b7; }
.brand-light { color:#058d98; font-weight:950; }
.brand-icon { background:linear-gradient(145deg,#8860c3,#6949a2); border-radius:9px; color:white; width:42px; height:45px; transform:none; font-size:27px; box-shadow:3px 3px 0 #d9caef; }
.brand small { color:#847391; font-size:11px; margin-top:8px; font-weight:450; letter-spacing:0; }
.profile { gap:14px; }
.nickname { background:white; border-color:#e1d9ef; border-radius:8px; color:#654b8f; font-size:13px; }
.stars { padding:8px 11px; border-radius:7px; background:#fff8e7; color:#8d6822; font-size:13px; }
.stars > span { color:#b98a2b; font-size:17px; }
.ui-icon { width:20px; height:20px; flex-shrink:0; }
.nav { display:flex; align-items:center; width:100%; gap:22px; margin:0; padding:0; min-height:55px; border:0; border-bottom:1px solid #ddd5e9; background:#f7f7faf5; border-radius:0; position:sticky; top:0; z-index:5; box-shadow:none; backdrop-filter:blur(8px); }
.nav > button { display:inline-flex; min-width:0; min-height:55px; border-radius:0; background:transparent; font-weight:650; font-size:15px; padding:12px 4px; color:#534960; gap:8px; border-bottom:3px solid transparent; }
.nav > button.selected { color:var(--green); background:transparent; border-bottom-color:var(--green); }
.nav-note { margin-left:auto; font-size:11px; color:#91839e; }
.page-intro { padding:23px 0 20px; }
.page-intro h1 { font-size:24px; }
.eyebrow { font-size:11px; letter-spacing:0; font-weight:600; margin-bottom:5px; }
.page-intro .eyebrow { color:#8b72a5; }
.date { font-size:12px; }
.playground-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:22px; }
.playground-main,.playground-side { min-width:0; }
.playground-side { display:grid; gap:16px; }
.button { border-radius:8px; min-height:46px; font-size:15px; padding:11px 18px; font-weight:650; }
.button.primary { box-shadow:0 3px 0 #654599; background:#8058be; }
.button:hover:not(:disabled),.button.primary:hover:not(:disabled) { background:#7047ad; }
.button.outline { color:#705092; border-color:#dbcfeb; background:#fff; }
.button.outline:hover { background:#f3edf9; }
.text-button { color:#7855a3; font-size:13px; font-weight:600; }
.hero { background:linear-gradient(115deg,#ede7f7 0%,#f1ecfa 58%,#e8f5f2 100%); border:1px solid #ded3ee; border-radius:13px; grid-template-columns:1fr 0.9fr; padding:27px 29px; gap:16px; min-height:283px; animation:none; }
.tag { border:1px solid #daccf0; background:#fcfaffb3; color:#7c5a9b; font-size:11px; padding:4px 8px; border-radius:5px; }
.hero h2 { font-size:31px; margin:14px 0 9px; line-height:1.2; }
.hero h2 > span { display:inline; font-size:20px; font-weight:600; margin-left:8px; }
.hero-copy > p { font-size:14px; color:#766b83; margin-bottom:19px; }
.hero-copy > .quiet { font-size:11px; color:#8d7e9c; margin-top:12px; }
.hero-glyphs { gap:13px; padding-right:4px; }
.hero-tile { width:min(46%,126px); aspect-ratio:.9; border-radius:12px; background:#fffefc; border-color:#cfc1e4; box-shadow:0 6px 0 #d1c2e859; transform:rotate(-7deg); }
.hero-tile + .hero-tile { transform:rotate(8deg) translateY(13px); border-color:#b6d5d2; box-shadow:0 6px 0 #b6d5d255; }
.hero-tile b { font-size:66px; color:#46305c; }
.hero-tile + .hero-tile b { color:#237a7b; }
.hero-tile > span { font-size:12px; color:#86798e; }
.worlds-section { margin-top:24px; }
.section-head { margin-bottom:12px; }
.world-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.world-card { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:0; gap:0; background:#fff; border:1px solid #e3ddec; border-radius:11px; overflow:hidden; box-shadow:none; }
.world-card:hover { transform:translateY(-3px); box-shadow:0 6px 16px #77609412; border-color:#c5b5db; }
.world-card-art { position:relative; display:grid; justify-items:center; align-content:center; height:122px; overflow:hidden; background:#eee8f7; border-bottom:1px solid #e5ddef; }
.world-card-art::after { content:''; position:absolute; width:95px; height:95px; border:1px solid #ffffff9c; border-radius:50%; right:-20px; top:-15px; }
.blue .world-card-art { background:#e2f1f1; }
.peach .world-card-art { background:#fff1d8; }
.yellow .world-card-art { background:#f9e9ed; }
.world-mark { display:grid; place-items:center; width:61px; height:65px; background:#fffdfc; font-size:36px; color:#675085; border:1px solid #cdbce1; border-radius:12px; transform:rotate(-9deg); box-shadow:4px 5px 0 #bca6d338; z-index:1; }
.blue .world-mark { color:#0a858d; border-color:#b2d5d3; }
.peach .world-mark { color:#9c6915; border-color:#e8ca93; }
.yellow .world-mark { color:#b35e7d; border-color:#e3bdcc; }
.world-card-props { font-size:12px; margin-top:8px; color:#877095; letter-spacing:.13em; font-weight:700; }
.art-star { position:absolute; color:#bc9bdc; font-size:16px; font-style:normal; }
.art-star-one { left:19%; top:22%; transform:rotate(12deg); }
.art-star-two { right:14%; bottom:25%; font-size:11px; }
.blue .art-star { color:#6bb5b7; }
.peach .art-star { color:#d9a650; }
.yellow .art-star { color:#d38fac; }
.world-card-copy { display:block; padding:14px 12px 0; text-align:left; }
.world-card-copy > small { font-size:10px; color:#8c79a2; font-weight:500; margin:0; }
.world-card-copy > strong { font-size:16px; margin:7px 0 6px; color:#392e48; }
.world-card-copy > span:not(.world-card-bottom) { display:block; font-size:12px; color:#8a7d96; line-height:1.6; min-height:38px; }
.world-card-bottom { display:flex; align-items:center; gap:5px; border-top:1px solid #eee7f5; font-size:10px; color:#8a7d96; margin-top:13px; padding:11px 0; }
.world-card-bottom > b { color:#7957aa; font-size:11px; }
.world-card-bottom > span { margin-left:auto; font-size:16px; }
.mission-card,.game-card,.review-card,.progress-card { border:1px solid #e5dfee; border-radius:12px; padding:19px; background:white; }
.mission-card h2 { display:flex; align-items:center; justify-content:space-between; font-size:15px; }
.mission-card h2 > span { border-radius:5px; padding:3px 6px; background:#f1eaf8; color:#8b67b6; font-size:10px; }
.mission-card ol { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:14px; }
.mission-card li { display:flex; align-items:center; gap:11px; }
.mission-card li > span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #e2d7ef; background:#faf7fe; border-radius:8px; font-size:11px; color:#a38fb8; }
.mission-card li.done > span { background:#e2f2ec; border-color:#b7ded0; color:#2f7f65; font-weight:700; }
.mission-card strong { display:block; font-size:13px; font-weight:650; }
.mission-card small { font-size:11px; color:#9889a4; display:block; margin-top:3px; }
.game-card { background:linear-gradient(130deg,#f6f0ff,#eaf5f5); padding:20px; border-color:#d9caec; }
.game-art { height:76px; display:flex; align-items:center; justify-content:center; gap:12px; position:relative; margin-bottom:17px; }
.game-art > span { display:grid; place-items:center; width:62px; height:70px; background:#fff; color:#855ab4; border:1px solid #cebbe5; border-radius:10px; font:39px var(--glyph); transform:rotate(-9deg); box-shadow:0 4px 0 #d9caec; }
.game-art > span + span { transform:rotate(9deg); background:#e9f8f4; color:#14848c; font:700 29px var(--font); border-color:#a7d3cb; box-shadow:0 4px 0 #b7d9d3; }
.game-art i { font-size:24px; font-style:normal; position:absolute; top:-3px; right:13px; color:#b59ad3; }
.game-label { font-size:10px; color:#9378ad; font-weight:600; }
.game-card h2 { font-size:20px; margin:6px 0; }
.game-card p { font-size:12px; color:#897596; }
.game-button { margin-top:16px; width:100%; background:white; border:1px solid #cdb9e3; color:#76509e; font-size:13px; min-height:44px; }
.game-button:hover:not(:disabled) { background:#f9f5ff; }
.review-card { display:block; min-height:0; }
.review-card h2 { font-size:15px; line-height:1.6; }
.review-card .eyebrow { color:#a18aaf; font-size:10px; }
.review-card p:not(.eyebrow) { font-size:12px; margin-top:6px; color:#96889f; }
.review-card .button { margin-top:12px; font-size:12px; }
.progress-number > strong { font-size:27px; }
.progress-number small { color:#9b8da6; font-size:12px; }
.progress-card progress { height:6px; margin-top:12px; }
.progress-card .eyebrow { font-size:11px; }
progress { accent-color:#8e6bc5; background:#e9e1f1; }
progress::-webkit-progress-bar { background:#e9e1f1; }
progress::-webkit-progress-value { background:linear-gradient(90deg,#9a7ad0,#7c59b2); }
.footer { padding:26px 0 24px; color:#a096aa; font-size:11px; }
.resume-strip { background:#f0eafa; border-color:#d8c7eb; border-radius:11px; }
.map-world { border-color:#e3d9ed; border-radius:13px; }
.sage { background:#f1ebf9; }.blue { background:#eaf5f4; }.peach { background:#fff6e7; }.yellow { background:#fcf0f3; }
.world-card.sage,.world-card.blue,.world-card.peach,.world-card.yellow { background:white; }
.map-node { border-color:#ded4e8; border-radius:10px; background:#fff; box-shadow:0 3px 0 #dacee84d; }
.map-node.done { border-color:#b8a0d6; }
.node-order { color:#9787a6; }
.node-glyph { color:#624985; }
.map-node.done .node-order { color:#127f85; }
.node-arrow { color:#ad96c3; }
.world-seal { border-color:#c2aedb; color:#9275ae; }
.world-seal.earned { background:#8d6ab8; border-color:#8d6ab8; }
.filters > button { border-color:#e3d9ec; border-radius:7px; font-size:13px; }
.filters > button.active { background:#eee6f8; color:#7956a7; border-color:#cdb9e6; font-weight:650; }
.collection-card { border-color:#e3d9ec; background:white; border-radius:11px; }
.collection-card.discovered { background:#f2edf9; border-color:#baa0db; box-shadow:0 3px 0 #c5b3de40; }
.collection-glyph { color:#685079; }
.undiscovered .collection-glyph { color:#a99bb7; }
.collection-status { color:#9a86ae; }
.stats-grid article,.panel,.timeline { border-radius:12px; border-color:#e4dceb; }
.stats-grid strong { color:#7e59ae; }
.week .stamped b { color:#7c55ad; background:#eee5f8; border:1px solid #d5bfe9; }
.week b { background:#faf8fc; border-color:#e3daeb; }
.badge { background:#f1eef5; border-color:#d8cde2; color:#9c8daa; border-radius:12px; }
.badge.earned { background:#f0e6fa; border-color:#bca0dc; color:#7e55a7; }
.study { padding-top:10px; }
.study-header { border-bottom:0; }
.learn-card { background:#fff; border-color:#dfd4eb; border-radius:14px; }
.learn-glyph { color:#684387; }
.learn-card + .learn-card .learn-glyph { color:#16848c; }
.learn-card h2 > span { color:#8560b0; }
.learn-card + .learn-card h2 > span { color:#12878e; }
.word-note { background:#f2ecfa; border-color:#e0d3ed; border-radius:10px; }
.quiz-glyph { color:#70528c; }
.choice { border-color:#e0d5ea; border-radius:10px; box-shadow:0 2px 0 #e1d9e84d; }
.choice:hover:not(:disabled) { background:#f5effd; border-color:#b59bcf; }
.choice-key { background:#f8f4fc; border-color:#e1d7ec; color:#a187b5; }
.choice.correct { border-color:#40968c; background:#eaf7f1; }
.choice.incorrect { border-color:#c89c56; background:#fff7e8; }
.feedback { border-radius:12px; background:#ecf7f2; border-color:#c5e1d7; }
.feedback.encourage { background:#fff6e8; border-color:#ead4b1; }
.sentence-prompt { background:#fcfaff; border-color:#dfd2ef; border-radius:12px; }
.glyph-button { background:#fff; color:#75558f; border-color:#cfbddd; box-shadow:0 4px 0 #e5d8ef; border-radius:9px; }
.build-slots > span { border-color:#c1a5d8; background:#faf6ff; border-radius:12px; color:#8058a0; }
.result-seal { color:#8660b4; border-color:#ae90d0; background:#f3eafc; }
.match-study { max-width:760px; }
.match-intro { text-align:center; margin:35px 0 28px; }
.match-intro h1 { font-size:28px; }
.match-intro > p:last-child { margin-top:10px; color:#93829e; font-size:14px; }
.match-board { display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:600px; margin:0 auto; }
.match-column { display:grid; gap:15px; }
.match-column h2 { font-size:12px; color:#9886a9; text-align:center; font-weight:500; }
.match-tile,.match-meaning { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:108px; border-radius:16px; border:2px solid #d9c9e9; background:white; box-shadow:0 4px 0 #e2d5ee; }
.match-tile > span { font:51px var(--glyph); color:#785298; }
.match-tile.picked { border-color:#9770c4; background:#f1e7ff; box-shadow:0 4px 0 #ae88d1; }
.match-meaning { border-color:#bfdedb; box-shadow:0 4px 0 #d4e9e5; color:#367d7f; font-size:21px; }
.match-meaning strong { color:#13898b; margin-left:5px; }
.match-tile small,.match-meaning small { color:#4c9692; font-size:11px; margin-top:4px; }
.match-tile.matched,.match-meaning.matched { border-color:#96c7bc; background:#e9f7f0; box-shadow:none; }
.match-meaning.try-again { background:#fff5e7; border-color:#e6c796; }
.match-status { text-align:center; font-size:16px; margin:28px 0 9px; color:#785699; min-height:50px; }
.match-quiet { text-align:center; font-size:12px; }
.match-complete { text-align:center; padding:35px 20px; }
.match-stamp,.mini-game-seal { display:grid; place-content:center; border:2px solid #a17ac5; background:#f2e6fc; color:#9368b4; border-radius:50%; text-align:center; font-weight:800; line-height:1.2; }
.match-stamp { width:113px; height:113px; font-size:26px; margin:0 auto 25px; transform:rotate(-9deg); animation:stamp .35s ease-out; }
.match-complete h1 { font-size:29px; margin:7px 0 12px; }
.match-complete > p:not(.eyebrow) { color:#94839e; font-size:14px; }
.match-complete ul { padding:0; list-style:none; margin:25px auto; display:flex; justify-content:center; gap:13px; }
.match-complete li { display:flex; flex-direction:column; align-items:center; padding:16px 20px; background:white; border:1px solid #dfd0ec; border-radius:13px; min-width:110px; }
.match-complete li b { font:40px var(--glyph); color:#8865a2; }
.match-complete li > span { margin-top:9px; font-size:14px; color:#9983a8; }
.match-actions { display:flex; justify-content:center; gap:12px; margin:26px 0 20px; }
.game-record { display:flex; align-items:center; gap:19px; border:1px solid #e2d5ee; border-radius:12px; background:#f5f0fc; padding:22px; }
.mini-game-seal { flex-shrink:0; width:62px; height:62px; font-size:15px; transform:rotate(-8deg); }
.game-record h2 { font-size:17px; }.game-record h2 > span { color:#9a75be; margin-left:6px; }
.game-record p { font-size:12px; color:#a18eaf; margin-top:7px; }
.game-record .text-button { margin-left:auto; white-space:nowrap; }
/* Keep the reference palette, but darken small instructional text for students. */
#app .eyebrow,#app .date,#app .quiet,#app .muted,#app .subtitle,
#app .brand small,#app .brand-strip,#app .brand-strip a,#app .nav-note,
#app .hero-copy > p,#app .hero-copy > .quiet,#app .hero-tile > span,
#app .world-card-copy > small,#app .world-card-copy > span:not(.world-card-bottom),
#app .world-card-bottom,#app .mission-card small,#app .game-label,#app .game-card p,
#app .review-card p:not(.eyebrow),#app .progress-number small,#app .footer,
#app .collection-status,#app .node-order,#app .match-intro > p:last-child,
#app .match-column h2,#app .match-complete > p:not(.eyebrow),#app .match-complete li > span,
#app .game-record p { color:#74637e; }
@keyframes stamp { from { opacity:0; transform:rotate(-18deg) scale(1.3); } to { opacity:1; transform:rotate(-9deg) scale(1); } }
@media(max-width:1100px) {
  .playground-layout { grid-template-columns:minmax(0,1fr) 245px; gap:18px; }
  .hero { padding:24px; grid-template-columns:1fr .85fr; }
  .hero h2 > span { display:block; margin:5px 0 0; }
  .hero-tile b { font-size:51px; }
  .world-grid { grid-template-columns:repeat(2,1fr); }
  .world-card-art { height:132px; }
  .world-card-copy > span:not(.world-card-bottom) { min-height:0; }
}
@media(max-width:760px) {
  #app { width:calc(100% - 32px); }
  .playground-layout { grid-template-columns:1fr; gap:18px; }
  .playground-side { grid-template-columns:1fr 1fr; align-items:stretch; gap:12px; }
  .playground-main { display:contents; }
  .hero { order:0; }
  .playground-side { order:1; }
  .worlds-section { order:2; }
  .game-card { grid-column:1; grid-row:1/3; display:flex; flex-direction:column; }
  .mission-card { grid-column:2; grid-row:1; }
  .review-card { grid-column:2; grid-row:2; }
  .progress-card { grid-column:1/-1; }
  .game-card h2 { font-size:19px; }
  .game-art { flex:1; margin-top:16px; min-height:90px; }
  .game-button { padding:10px 8px; }
  .worlds-section { margin-top:0; }
  .world-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .world-card-art { height:112px; }
  .nav-note { display:none; }
  .nav { gap:20px; }
}
@media(max-width:600px) {
  #app { width:calc(100% - 32px); }
  .brand-strip { height:27px; font-size:9px; }
  .brand-strip > span { max-width:62%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-strip a { font-size:9px; }
  .header { min-height:78px; gap:8px; }
  .brand { font-size:24px; gap:8px; }
  .brand small { display:none; }
  .brand-icon { width:31px; height:35px; font-size:21px; border-radius:7px; }
  .profile { gap:6px; }
  .nickname { font-size:11px; max-width:117px; min-height:44px; padding:9px 8px; }
  .stars { font-size:11px; padding:6px 7px; }
  .stars > span { font-size:14px; }
  .nav { position:fixed; top:auto; bottom:0; left:0; width:100%; margin:0; border:0; border-top:1px solid #e4daee; border-radius:0; box-shadow:0 -3px 16px #735b8909; gap:0; min-height:65px; padding:5px 12px max(7px,env(safe-area-inset-bottom)); background:#fffcfffa; }
  .nav > button { flex:1; min-height:51px; gap:4px; border:0; border-radius:9px; font-size:11px; padding:7px 3px; color:#9d8aa9; }
  .nav > button.selected { background:#f1e8fa; color:#8a5eb7; border:0; }
  .nav .ui-icon { width:19px; height:19px; }
  .footer { padding:24px 0 calc(90px + env(safe-area-inset-bottom)); font-size:9px; }
  .page-intro { padding:22px 0 18px; }
  .page-intro h1 { font-size:22px; }
  .page-intro .eyebrow { font-size:10px; margin-bottom:5px; }
  .hero { grid-template-columns:1fr; padding:22px; gap:13px; border-radius:13px; min-height:0; }
  .hero h2 { font-size:27px; margin:0; }
  .hero h2 > span { display:inline; margin-left:7px; font-size:18px; }
  .hero-copy > p { margin:0; font-size:13px; }
  .hero-copy > .quiet { margin:0; font-size:10px; }
  .hero-glyphs { gap:22px; padding:6px 12px 12px; }
  .hero-tile { width:107px; aspect-ratio:.98; }
  .hero-tile b { font-size:56px; }
  .hero-tile > span { font-size:11px; }
  .hero-copy > .button { min-height:48px; }
  .tag { font-size:10px; }
  .playground-side { gap:11px; }
  .mission-card,.game-card,.review-card,.progress-card { padding:16px; border-radius:11px; }
  .mission-card { grid-column:1/-1; grid-row:1; }
  .mission-card h2 { font-size:14px; }
  .mission-card ol { grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
  .mission-card li { gap:8px; }
  .mission-card li > span { width:24px; height:26px; flex-shrink:0; font-size:10px; }
  .mission-card strong { font-size:12px; }
  .mission-card small { font-size:10px; }
  .game-card { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:90px 1fr; column-gap:17px; align-items:center; }
  .game-art { grid-column:1; grid-row:1/5; margin:0; height:94px; min-height:0; gap:5px; }
  .game-art > span { width:40px; height:50px; font-size:28px; border-radius:7px; }
  .game-art > span + span { font-size:22px; }
  .game-art i { font-size:18px; top:4px; right:2px; }
  .game-label { grid-column:2; font-size:9px; }
  .game-card h2 { grid-column:2; font-size:19px; margin:4px 0; }
  .game-card p { grid-column:2; font-size:11px; }
  .game-button { grid-column:2; font-size:12px; margin-top:12px; min-height:44px; }
  .review-card { grid-column:1; grid-row:3; }
  .progress-card { grid-column:2; grid-row:3; }
  .review-card h2 { font-size:14px; line-height:1.5; }
  .review-card p:not(.eyebrow) { font-size:10px; }
  .review-card .button { min-width:0; min-height:44px; font-size:11px; }
  .progress-number > strong { font-size:26px; line-height:1.3; }
  .progress-number small { display:block; font-size:10px; margin:3px 0 0; }
  .progress-card .text-button { font-size:11px; }
  .world-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .world-card-art { height:124px; }
  .world-card-copy { padding:13px 13px 0; }
  .world-card-copy > strong { font-size:17px; }
  .world-card-copy > small { font-size:10px; }
  .world-card-copy > span:not(.world-card-bottom) { font-size:11px; }
  .world-card-bottom { margin-top:12px; font-size:10px; }
  .map-nodes { gap:9px; }
  .study { padding-top:0; }
  .match-intro { margin:29px 0 22px; }
  .match-intro h1 { font-size:23px; }
  .match-intro > p:last-child { font-size:13px; }
  .match-board { gap:20px; }
  .match-tile,.match-meaning { min-height:95px; border-radius:13px; }
  .match-tile > span { font-size:46px; }
  .match-meaning { font-size:18px; }
  .match-status { font-size:14px; margin-top:26px; }
  .match-complete { padding:30px 0; }
  .match-complete h1 { font-size:25px; }
  .match-complete ul { gap:8px; }
  .match-complete li { min-width:0; flex:1; padding:15px 8px; }
  .match-complete li b { font-size:35px; }
  .match-complete li > span { font-size:12px; }
  .match-actions { gap:10px; }
  .match-actions > .button { flex:1; padding:12px; font-size:14px; }
  .game-record { padding:17px; flex-wrap:wrap; gap:13px; }
  .game-record h2 { font-size:15px; }
  .game-record > div { flex:1; }
  .game-record p { font-size:11px; }
  .game-record > .text-button { margin:0 0 0 auto; }
}
@media(prefers-reduced-motion:reduce) { .match-stamp { animation:none; } }
.hanja-assessment-records { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 14px; }
.hanja-assessment-records article { padding: 20px; border: 1px solid #dce5d3; border-radius: 14px; background: #f5f8ed; }
.hanja-assessment-records article > div > small { display: block; margin-top: 6px; color: #6c7f6b; }
.hanja-assessment-records dl { margin: 20px 0 12px; }
.hanja-assessment-records dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #dce5d3; }
.hanja-assessment-records dt { font-size: 13px; }
.hanja-assessment-records dd { margin: 0; font-size: 22px; font-weight: 800; }
.hanja-assessment-records article > small { color: #6c7f6b; }
.hanja-assessment-records article > p { font-size: 14px; }


/* source: village.css */
.village-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 0 23px; }
#app .village-heading .eyebrow { font-size:10px; letter-spacing:.16em; color:#8a7970; }
.village-heading h1 { font-size:29px; font-weight:760; letter-spacing:-.045em; color:#3d493e; }
.village-heading h1 > span { color:#71835d; }
.village-heading > div > p:last-child { color:#8a8c7d; font-size:13px; margin-top:8px; }
.village-count { display:block; font-size:17px; color:#9b9b8b; line-height:1.3; text-align:right; padding-right:3px; }
.village-count b { font-size:33px; color:#657853; font-weight:760; }
.village-count small { display:block; font-size:11px; margin-top:5px; color:#929585; }
.village-layout { display:grid; grid-template-columns:minmax(0,1fr) 274px; align-items:stretch; gap:19px; }
.village-scene-wrap { position:relative; border:1px solid #d9dfd1; border-radius:17px; overflow:hidden; min-width:0; background:#d8e4da; display:flex; flex-direction:column; }
.village-scene { flex:1; min-height:0; display:flex; align-items:center; position:relative; }
.village-world-svg { display:block; width:100%; height:auto; min-height:460px; max-height:680px; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.village-world-svg:active { cursor:grabbing; }
.village-building,.village-map-label { cursor:pointer; }
.village-building:focus-visible { outline:none; filter:drop-shadow(0 0 6px #fff4b5); }
.village-building.is-selected { filter:drop-shadow(0 2px 4px #545b3510); }
.village-world-title { position:absolute; z-index:2; display:flex; align-items:center; gap:8px; top:19px; left:21px; font-size:13px; color:#53634e; pointer-events:none; }
.village-world-title small { margin-left:5px; color:#7d8c75; font-size:10px; }
.village-live-dot { width:6px; height:6px; background:#839b6d; border-radius:50%; box-shadow:0 0 0 3px #839b6d16; }
.village-world-tools { position:absolute; top:14px; right:16px; display:flex; align-items:center; gap:9px; z-index:3; }
.village-tool { background:#fcfdf4cc; border:1px solid #c6d0b9; color:#718368; border-radius:7px; min-width:36px; min-height:36px; font-size:19px; display:inline-grid; place-items:center; box-shadow:0 2px 4px #3f54380a; }
.village-tool:hover { background:#fffef5; border-color:#8b9e78; }
.village-tool.theme-tool { font-size:11px; padding:7px 11px; }
.village-zoom-tools { display:flex; gap:4px; }
.village-scene-caption { position:absolute; bottom:17px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; pointer-events:none; color:#6b7a62; font-size:10px; }
.village-scene-caption > span:first-child { padding:6px 10px; border:1px solid #bdcab57a; background:#fafcf3b3; border-radius:6px; }
.village-dusk { border-color:#7a8694; background:#4c6274; }
.village-dusk .village-world-title { color:#eee3cb; }
.village-dusk .village-world-title small,.village-dusk .village-scene-caption { color:#d9d9c9; }
.village-dusk .village-scene-caption > span:first-child { color:#d9e1db; background:#425d73b3; border-color:#9cb2b04a; }
.village-dusk .village-tool { background:#607589df; border-color:#8c9fa58a; color:#f2e2b8; }
.village-island.at-dusk { filter:brightness(.79) saturate(.88); }
.village-detail { background:#fffef9; border:1px solid #e2dfd3; border-radius:15px; padding:21px; display:flex; flex-direction:column; min-width:0; }
.village-card-label { display:flex; justify-content:space-between; align-items:center; color:#8a8b76; font-size:10px; }
.village-card-label > span:last-child { font-family:Georgia,serif; color:#c0b49c; font-style:italic; font-size:15px; }
.village-blueprint { height:127px; display:grid; place-items:center; position:relative; overflow:hidden; margin:17px 0 21px; border-radius:10px; background:#f0f0e3; border:1px solid #e8e7d5; }
.village-blueprint-grid { position:absolute; inset:0; opacity:.35; background:linear-gradient(30deg,transparent 48%,#ccd1ba 49%,#ccd1ba 50%,transparent 51%),linear-gradient(-30deg,transparent 48%,#ccd1ba 49%,#ccd1ba 50%,transparent 51%); background-size:30px 19px; }
.village-blueprint-glyph { position:relative; z-index:1; font:46px var(--glyph); color:#7b8767; transform:rotate(-5deg); border:1px solid #c3cbb3; padding:6px 12px; border-radius:8px; background:#fffef7; box-shadow:5px 5px 0 #c9cdb04d; }
.village-blueprint.library { background:#e9ecf1; }.village-blueprint.library .village-blueprint-glyph { color:#6a7fa3; border-color:#c1cada; }
.village-blueprint.observatory { background:#e6edf0; }.village-blueprint.observatory .village-blueprint-glyph { color:#6c8694; }
.village-blueprint.plaza { background:#f4ecdb; }.village-blueprint.plaza .village-blueprint-glyph { color:#aa8956; }
.village-detail h2 { font-size:22px; color:#555e49; }
.village-detail > p:not(.village-detail-note) { color:#8a8b7b; font-size:12px; margin-top:8px; }
.village-recipe-label { color:#9d9984; font-size:10px; margin:25px 0 10px; }
.village-recipe { display:flex; align-items:center; justify-content:center; gap:12px; }
.village-recipe > div { flex:1; min-width:0; text-align:center; background:#fafaf2; border:1px solid #e6e6d5; border-radius:9px; padding:12px 3px; }
.village-recipe b { display:block; font:36px var(--glyph); color:#737b5e; }
.village-recipe > div > span { display:block; margin-top:6px; font-size:10px; color:#969480; }
.village-recipe > div strong { color:#7b8962; }
.village-recipe-plus { color:#b7b19d; font-size:17px; }
.village-word-definition { display:flex; flex-direction:column; gap:6px; margin:17px 0 24px; padding:13px 0; border-top:1px solid #eeeddf; border-bottom:1px solid #eeeddf; }
.village-word-definition > strong { color:#6a725b; font-size:13px; }
.village-word-definition > span { color:#8d8d7a; font-size:12px; }
.village-detail .button { margin-top:auto; width:100%; font-size:13px; min-height:46px; border-radius:8px; padding:12px 8px; }
.village-detail .village-build-button { background:#6f8355; color:#fff; box-shadow:0 3px 0 #56673f; }
.village-detail .village-build-button:hover { background:#64784b; }
.village-detail .village-learn-button { color:#71805c; background:#eef1e3; border:1px solid #d4dcc4; }
.village-detail .village-learn-button:hover { background:#e6edda; }
.village-detail-note { font-size:10px; color:#929680; text-align:center; margin-top:12px; line-height:1.7; }
.village-buildings-section { margin-top:24px; }
.village-buildings-section .section-head h2 { color:#59644d; font-size:18px; }
.village-buildings { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.village-building-card { display:flex; gap:9px; align-items:center; text-align:left; background:white; border:1px solid #e2e4da; border-radius:11px; padding:15px 12px; position:relative; min-height:92px; }
.village-building-card.selected { border-color:#a0b38b; background:#f4f7ed; box-shadow:0 0 0 1px #c2cfb366; }
.village-building-icon { display:grid; place-items:center; width:36px; height:39px; font:23px var(--glyph); color:var(--building-color); border:1px solid #e4e4d6; background:#fffef7; border-radius:7px; flex-shrink:0; }
.village-building-card > span > strong { font-size:12px; color:#6b735d; display:block; white-space:nowrap; }
.village-building-card small { font-size:10px; display:block; color:#969984; margin-top:5px; }
.village-building-state { position:absolute; right:10px; bottom:8px; font-size:9px; color:#9f9e88; }
.village-building-state.ready { color:#ad8840; }.village-building-state.built { color:#6c8854; }
.village-how { margin-top:22px; color:#92937f; font-size:12px; }
.village-how summary { cursor:pointer; padding:12px 0; min-height:44px; }
.village-how p { margin:8px 0; max-width:850px; line-height:1.8; }
.village-toast { position:absolute; bottom:52px; left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:12px; background:#fffdf0ee; border:1px solid #d8c692; border-radius:11px; box-shadow:0 7px 25px #4a574217; padding:15px 22px; min-width:280px; pointer-events:none; }
.village-toast > span { color:#b7a566; font-size:27px; }
.village-toast strong { color:#747348; font-size:14px; display:block; }.village-toast div > span { display:block; font-size:11px; color:#95916f; margin-top:4px; }
.village-arrived { animation:village-build .65s cubic-bezier(.2,.8,.2,1); transform-box:fill-box; transform-origin:50% 100%; }
@keyframes village-build { from { opacity:.25; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
.village-windmill { animation:village-wind 30s linear infinite; }
@keyframes village-wind { to { transform:rotate(360deg); } }
.village-teaser { display:flex; align-items:center; gap:17px; width:100%; margin:0 0 18px; padding:15px 20px; background:linear-gradient(115deg,#f0f2e8,#f7f6eb); border:1px solid #dce2cf; border-radius:12px; color:#6d7858; text-align:left; }
.village-teaser small { font-size:10px; color:#8b947c; display:block; margin-bottom:4px; }
.village-teaser strong { font-size:15px; font-weight:650; }
.village-teaser-art { display:flex; align-items:flex-end; gap:4px; width:65px; height:41px; padding:0 0 2px 3px; position:relative; }
.village-teaser-art:before { content:""; position:absolute; width:58px; height:28px; transform:skewY(-16deg); background:#c4d2a7; bottom:0; left:0; border-radius:3px; border-bottom:5px solid #b4bb91; }
.village-teaser-art > i { display:block; position:relative; z-index:1; width:16px; height:22px; background:#edddbe; border-right:5px solid #d2bd98; border-top:7px solid #b68768; margin-bottom:10px; }
.village-teaser-art > i:nth-child(2) { height:30px; border-top-color:#8699ae; margin-bottom:9px; }
.village-teaser-cta { margin-left:auto; font-size:11px; color:#8b947c; white-space:nowrap; }.village-teaser-cta b { margin-left:12px; font-size:20px; font-weight:400; color:#8d9c70; }
#app .village-detail > p,#app .village-word-definition > span,#app .village-recipe-label,
#app .village-recipe > div > span,#app .village-detail-note,#app .village-card-label,
#app .village-how,#app .village-heading > div > p:last-child,#app .village-building-card small { color:#74765f; }
.village-recipe > div > span { font-size:12px; }
.village-word-definition > span { font-size:13px; }
@media(max-width:1100px) { .village-layout { grid-template-columns:minmax(0,1fr) 240px; gap:14px; }.village-detail { padding:18px; }.village-world-title small { display:none; }.village-building-card { padding:13px 9px; gap:7px; }.village-building-icon { width:30px; height:34px; font-size:21px; }.village-building-card > span > strong { font-size:11px; }.village-buildings { gap:8px; } }
@media(max-width:760px) {
  .village-heading { padding:22px 0 20px; }.village-heading h1 { font-size:25px; }.village-layout { grid-template-columns:1fr; gap:15px; }
  .village-scene-wrap { min-height:420px; }.village-world-svg { min-height:420px; max-height:570px; }.village-detail { display:grid; grid-template-columns:120px 1fr; column-gap:20px; padding:20px; }
  .village-card-label { grid-column:1/-1; margin-bottom:18px; }.village-blueprint { grid-column:1; grid-row:2/5; height:135px; margin:0; }.village-blueprint-glyph { font-size:32px; padding:8px; }
  .village-detail h2 { grid-column:2; font-size:20px; }.village-detail > p:not(.village-detail-note) { grid-column:2; font-size:12px; margin-top:4px; }.village-recipe-label { grid-column:2; margin:13px 0 7px; }
  .village-recipe { grid-column:2; gap:10px; }.village-recipe > div { padding:7px 2px; }.village-recipe b { font-size:28px; }.village-recipe > div > span { font-size:10px; margin-top:2px; }
  .village-word-definition { grid-column:1/-1; margin:16px 0; padding:11px 0; flex-direction:row; align-items:center; gap:12px; }.village-word-definition > strong { flex-shrink:0; }.village-word-definition > span { font-size:12px; }
  .village-detail .button { grid-column:1/-1; font-size:14px; }.village-detail-note { grid-column:1/-1; margin-top:10px; }
  .village-buildings { grid-template-columns:repeat(3,minmax(0,1fr)); }.village-building-card { min-height:93px; padding:12px; gap:9px; }.village-building-card > span > strong { font-size:12px; }
}
@media(max-width:600px) {
  .village-heading { gap:10px; padding:21px 0 18px; }.village-heading h1 { font-size:23px; line-height:1.4; }.village-heading h1 > span { display:block; }.village-heading > div > p:last-child { font-size:12px; margin-top:7px; }
  #app .village-heading .eyebrow { font-size:8px; letter-spacing:.12em; margin-bottom:8px; }.village-count b { font-size:29px; }.village-count { font-size:14px; }.village-count small { font-size:9px; }
  .village-scene-wrap { min-height:370px; border-radius:13px; }.village-world-svg { width:100%; min-height:370px; max-height:440px; }
  .village-world-title { left:13px; top:17px; font-size:11px; gap:6px; }.village-world-tools { right:10px; top:10px; gap:5px; }
  .village-tool { min-width:36px; min-height:44px; font-size:19px; }.village-tool.theme-tool { font-size:10px; padding:7px 8px; }.village-zoom-tools { gap:3px; }
  .village-scene-caption { left:11px; right:11px; bottom:11px; font-size:8px; gap:8px; }.village-scene-caption > span:first-child { padding:6px 7px; }.village-scene-caption > span:last-child { text-align:right; }
  .village-detail { grid-template-columns:95px 1fr; gap:0 16px; padding:18px; border-radius:12px; }.village-blueprint { height:126px; }.village-blueprint-glyph { font-size:28px; padding:7px; }
  .village-card-label { font-size:10px; margin-bottom:16px; }.village-detail h2 { font-size:20px; }.village-detail > p:not(.village-detail-note) { font-size:11px; }.village-recipe-label { font-size:9px; margin:11px 0 6px; }
  .village-recipe > div { padding:6px 2px; }.village-recipe b { font-size:27px; }.village-recipe > div > span { font-size:11px; }.village-recipe-plus { font-size:14px; }
  .village-word-definition { margin:14px 0; }.village-word-definition > span { font-size:11px; }.village-detail-note { font-size:9px; }
  .village-buildings-section { margin-top:23px; }.village-buildings-section .section-head h2 { font-size:17px; }.village-buildings-section .muted { font-size:10px; }
  .village-buildings { grid-template-columns:1fr 1fr; gap:9px; }.village-building-card { min-height:87px; gap:8px; padding:12px 10px; }.village-building-icon { width:31px; height:34px; }.village-building-card > span > strong { font-size:12px; }.village-building-card small { font-size:9px; margin-top:4px; }.village-building-state { font-size:9px; bottom:7px; }
  .village-toast { min-width:0; width:calc(100% - 30px); bottom:45px; padding:12px; gap:9px; }.village-toast strong { font-size:12px; }.village-toast div > span { font-size:9px; }
  .village-teaser { gap:12px; padding:13px 14px; }.village-teaser-art { flex-shrink:0; width:50px; transform:scale(.85); transform-origin:left center; margin-right:-6px; }.village-teaser strong { font-size:12px; }.village-teaser small { font-size:9px; }.village-teaser-cta { font-size:9px; }.village-teaser-cta b { margin-left:3px; font-size:17px; }
  .nav > button { font-size:10px; }.nav .ui-icon { width:18px; height:18px; }
}
@media(prefers-reduced-motion:reduce) { .village-windmill,.village-arrived { animation:none; } }


/* source: voxel.css */
.voxel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 12px 0 20px;
}
.voxel-heading .eyebrow {
  color: #527a66;
  margin-bottom: 5px;
  letter-spacing: 0.15em;
  font-size: 11px;
}
.voxel-heading h1 {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.06em;
  margin: 0;
}
.voxel-heading p:last-child {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.voxel-view-switch {
  display: flex;
  padding: 4px;
  background: #e7ebe5;
  border-radius: 12px;
  flex-shrink: 0;
}
.voxel-view-switch button {
  min-height: 42px;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  color: #53624f;
  font-weight: 750;
  cursor: pointer;
}
.voxel-view-switch button[aria-pressed="true"] {
  background: white;
  color: #203d38;
  box-shadow: 0 2px 5px #1a3c2010;
}
.voxel-stage {
  height: clamp(540px, 75vh, 840px);
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #a9cedd;
  isolation: isolate;
  box-shadow: 0 15px 42px #1d39351a;
  user-select: none;
  font-family: inherit;
}
.voxel-canvas {
  position: absolute;
  inset: 0;
  outline: none;
  touch-action: none;
  cursor: grab;
}
.voxel-canvas:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}
.voxel-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.voxel-stage button {
  font: inherit;
  cursor: pointer;
  min-height: 44px;
  border-radius: 9px;
  font-weight: 750;
}
.voxel-stage button:focus-visible {
  outline: 3px solid #ffe8a6;
  outline-offset: 3px;
}
.voxel-top {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  gap: 12px;
}
.voxel-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #ffffff32;
  background: #15362ee0;
  box-shadow: 0 4px 0 #17352d55;
  color: #fff;
  backdrop-filter: blur(10px);
  border-radius: 12px;
}
.voxel-brand strong {
  display: block;
  font-size: 18px;
  letter-spacing: -0.04em;
}
.voxel-brand small {
  display: block;
  font-size: 11px;
  color: #c3dccb;
  margin-top: 4px;
}
.voxel-brand small b {
  margin-left: 8px;
  color: #fff5d7;
}
.voxel-cube {
  width: 28px;
  height: 29px;
  background: linear-gradient(90deg, #8caa5b 50%, #65884b 50%);
  border-top: 8px solid #b1c77e;
  box-shadow: 0 6px 0 #9b7956;
  transform: rotate(-8deg);
  flex-shrink: 0;
}
.voxel-toolbar {
  display: flex;
  gap: 6px;
  pointer-events: auto;
}
.voxel-toolbar button {
  border: 1px solid #ffffff55;
  color: #fff;
  background: #17382ecc;
  padding: 9px 12px;
  font-size: 12px;
}
.voxel-toolbar button:hover {
  background: #294e3c;
}
.voxel-compass {
  position: absolute;
  top: 103px;
  left: 26px;
  color: #fff;
  text-shadow: 0 2px 3px #102620;
  pointer-events: none;
  font-weight: 900;
  font-size: 12px;
}
.voxel-compass span {
  font-weight: 600;
  color: #edf4d7;
  margin-left: 8px;
}
.voxel-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: monospace;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 3px #000b;
  pointer-events: none;
}
.voxel-context {
  position: absolute;
  left: 50%;
  bottom: 185px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 220px;
  max-width: 90%;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
  font-size: 13px;
}
.voxel-context[hidden] {
  display: none;
}
.voxel-context button {
  pointer-events: auto;
  border: 1px solid #fff7e0;
  background: #fff6df;
  color: #243c2b;
  padding: 10px 22px;
  box-shadow: 0 4px 0 #8b7958;
  font-size: 14px;
  text-shadow: none;
}
.voxel-bottom {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  width: max-content;
  pointer-events: none;
  gap: 7px;
}
.voxel-material {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #18352bc9;
  border-radius: 7px;
  padding: 6px 12px;
  color: white;
  font-size: 12px;
}
.voxel-material strong {
  font-size: 14px;
}
.voxel-material span {
  color: #c6dbc9;
  font-size: 11px;
}
.voxel-hotbar {
  display: flex;
  gap: 4px;
  background: #23352fdf;
  border: 2px solid #e3d9bb7a;
  padding: 6px;
  border-radius: 10px;
  pointer-events: auto;
  box-shadow: 0 4px 0 #17322b99;
}
.voxel-hotbar button {
  width: 53px;
  height: 56px;
  min-height: 44px;
  padding: 6px;
  border: 2px solid #d5dece33;
  border-radius: 5px !important;
  background: #526154;
  position: relative;
}
.voxel-hotbar button[aria-pressed="true"] {
  border-color: #ffeba8;
  background: #8b966a;
  box-shadow: inset 0 0 0 1px #fff0ba;
}
.voxel-block {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  background: var(--block);
  color: #fff;
  text-shadow: 0 1px 2px #18382d;
  box-shadow:
    inset 0 5px 0 #ffffff26,
    inset -5px 0 0 #0002,
    0 2px 2px #0003;
  border-radius: 2px;
  font-family: "Noto Serif KR", serif;
}
.voxel-hotbar small {
  position: absolute;
  font-size: 9px;
  right: 3px;
  bottom: 1px;
  color: #fff;
}
.voxel-help {
  font-size: 10px;
  text-align: center;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 1px 4px #000;
  background: #17352b85;
  padding: 5px 12px;
  border-radius: 6px;
}
.voxel-toast {
  position: absolute;
  top: 115px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  width: max-content;
  text-align: center;
  padding: 9px 14px;
  color: #fff9e5;
  background: #18382ce8;
  border-radius: 9px;
  font-size: 13px;
  pointer-events: none;
}
.voxel-toast:empty {
  display: none;
}
.voxel-gate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, #132b304d, #132b3008);
  backdrop-filter: blur(2px);
  z-index: 5;
  padding: 18px;
}
.voxel-gate[hidden] {
  display: none;
}
.voxel-gate-card {
  width: min(430px, 100%);
  padding: 32px;
  border: 1px solid #ffffff70;
  border-radius: 18px;
  background: #f9f6ecef;
  box-shadow: 0 20px 65px #0d292644;
  backdrop-filter: blur(14px);
}
.voxel-gate-tag {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #61816b;
  margin-bottom: 17px;
}
.voxel-gate h2 {
  font-size: 30px;
  letter-spacing: -0.07em;
  line-height: 1.2;
  color: #203e33;
  margin: 0 0 14px;
  word-break: keep-all;
}
.voxel-gate p {
  font-size: 15px;
  color: #586b5b;
  line-height: 1.7;
  margin: 0 0 24px;
  word-break: keep-all;
}
.voxel-play {
  background: #29523b;
  color: #fff9e1;
  border: 1px solid #1a3e2a;
  box-shadow: 0 4px 0 #173124;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  font-size: 16px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.voxel-play:hover {
  background: #386447;
}
.voxel-mouse {
  background: transparent;
  border: 1px solid #a3b09c;
  color: #38563c;
  padding: 8px;
  width: 100%;
  font-size: 12px !important;
  margin-top: 13px;
}
.voxel-gate small {
  display: block;
  color: #71806f;
  font-size: 10px;
  line-height: 1.6;
  margin-top: 17px;
}
.voxel-loading {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: #e9ede2;
  border-radius: 20px;
  color: #34553e;
}
.voxel-loading strong {
  font-size: 20px;
}
.voxel-touch {
  display: none;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.voxel-stick {
  position: absolute;
  bottom: 140px;
  left: 22px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #183c3555;
  border: 2px solid #fff6;
  pointer-events: auto;
  touch-action: none;
  box-shadow: inset 0 0 0 16px #ffffff0a;
}
.voxel-stick span {
  position: absolute;
  width: 48px;
  height: 48px;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: #f5f3dfbb;
  box-shadow: 0 3px 9px #153d3833;
  transform: translate(-50%, -50%);
}
.voxel-stick b {
  position: absolute;
  bottom: -22px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  width: 100%;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}
.voxel-touch-actions {
  position: absolute;
  right: 15px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: auto;
}
.voxel-touch-actions button {
  border: 1px solid #fff9;
  background: #1d4138bc;
  color: #fff;
  padding: 10px 14px;
  font-size: 12px;
  touch-action: manipulation;
}
.voxel-expanded {
  position: fixed;
  inset: 0;
  border-radius: 0 !important;
  width: 100vw;
  height: 100dvh !important;
  z-index: 1000;
}
.voxel-is-expanded {
  overflow: hidden !important;
}
.voxel-journey {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 16px 4px;
  color: #68776a;
  font-size: 12px;
}
.voxel-journey b {
  color: #294d36;
}
.voxel-facilities {
  margin: 14px 0 24px;
}
.voxel-facilities summary {
  cursor: pointer;
  color: #435f47;
  font-size: 14px;
  font-weight: 750;
  padding: 12px 0;
}
.voxel-facilities .village-buildings {
  margin-top: 10px;
}
@media (pointer: coarse) {
  .voxel-touch {
    display: block;
  }
  .voxel-help,
  .voxel-mouse {
    display: none;
  }
  .voxel-context {
    bottom: 155px;
  }
  .voxel-bottom {
    bottom: 18px;
  }
}
@media (max-width: 700px) {
  .voxel-heading {
    align-items: flex-start;
    margin: 5px 0 14px;
    gap: 9px;
  }
  .voxel-heading h1 {
    font-size: 23px;
  }
  .voxel-heading p:last-child {
    font-size: 12px;
    max-width: 190px;
    line-height: 1.5;
  }
  .voxel-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 0.09em;
  }
  .voxel-view-switch button {
    padding: 8px 9px;
    font-size: 11px;
  }
  .voxel-stage {
    height: calc(100svh - 220px);
    min-height: 500px;
    max-height: 820px;
    border-radius: 16px;
  }
  .voxel-top {
    left: 12px;
    right: 12px;
    top: 12px;
    gap: 5px;
  }
  .voxel-brand {
    padding: 10px;
    gap: 8px;
  }
  .voxel-brand strong {
    font-size: 14px;
  }
  .voxel-brand small {
    font-size: 9px;
  }
  .voxel-brand small b {
    margin-left: 4px;
  }
  .voxel-cube {
    width: 20px;
    height: 22px;
    border-top-width: 6px;
  }
  .voxel-toolbar {
    gap: 4px;
  }
  .voxel-toolbar button {
    padding: 7px 9px;
    font-size: 10px;
  }
  .voxel-toolbar [data-voxel="wide"] {
    display: none;
  }
  .voxel-compass {
    left: 16px;
    top: 86px;
    font-size: 10px;
  }
  .voxel-hotbar {
    gap: 3px;
    padding: 5px;
  }
  .voxel-hotbar button {
    width: calc((100vw - 90px) / 8);
    min-width: 29px;
    height: 44px;
    min-height: 44px;
    padding: 3px;
  }
  .voxel-block {
    width: 24px;
    height: 27px;
    font-size: 16px;
  }
  .voxel-material span {
    display: none;
  }
  .voxel-material strong {
    font-size: 12px;
  }
  .voxel-bottom {
    bottom: 13px;
  }
  .voxel-context {
    bottom: 113px;
    max-width: 55%;
    min-width: 150px;
    gap: 4px;
  }
  .voxel-context span {
    font-size: 10px;
  }
  .voxel-context button {
    font-size: 11px;
    padding: 9px 12px;
  }
  .voxel-touch-actions {
    right: 10px;
    bottom: 145px;
  }
  .voxel-touch-actions button {
    font-size: 11px;
    padding: 10px;
    min-width: 49px;
  }
  .voxel-stick {
    width: 94px;
    height: 94px;
    left: 14px;
    bottom: 151px;
  }
  .voxel-stick span {
    width: 42px;
    height: 42px;
  }
  .voxel-gate-card {
    padding: 25px 23px;
  }
  .voxel-gate h2 {
    font-size: 27px;
  }
  .voxel-gate p {
    font-size: 13px;
  }
  .voxel-toast {
    top: 88px;
    font-size: 11px;
    max-width: 90%;
    padding: 8px 12px;
  }
  .voxel-journey {
    font-size: 11px;
    line-height: 1.6;
    align-items: flex-start;
  }
  .voxel-journey span:last-child {
    text-align: right;
  }
  .voxel-touch {
    display: block;
  }
  .voxel-help,
  .voxel-mouse {
    display: none;
  }
  .voxel-facilities .village-buildings {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voxel-stage * {
    transition: none !important;
    animation: none !important;
  }
}
@media (max-width: 700px) {
  .voxel-hotbar {
    max-width: calc(100vw - 60px);
    overflow-x: auto;
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: #b9c79b #344c40;
  }
  .voxel-hotbar button {
    width: 44px;
    min-width: 44px;
    flex: 0 0 44px;
  }
}
@media (max-width: 700px) {
  .voxel-toolbar [data-voxel="wide"] {
    display: block;
  }
  .voxel-toolbar button {
    max-width: 56px;
    min-width: 44px;
  }
  .voxel-brand {
    min-width: 0;
    max-width: calc(100% - 145px);
  }
  .voxel-brand strong {
    white-space: nowrap;
    font-size: 13px;
  }
  .voxel-brand small {
    font-size: 8px;
  }
  .voxel-brand small b {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
  .voxel-expanded .voxel-gate-card {
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
  }
  .voxel-expanded .voxel-top {
    top: max(12px, env(safe-area-inset-top));
  }
  .voxel-expanded .voxel-bottom {
    bottom: max(13px, env(safe-area-inset-bottom));
  }
}
.voxel-stage.voxel-expanded {
  max-height: none !important;
  min-height: 0 !important;
}
.voxel-life {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #fff4db;
}
.voxel-mission {
  position: absolute;
  left: 22px;
  top: 116px;
  width: 258px;
  padding: 14px 16px;
  border: 1px solid #e1eacb44;
  border-radius: 11px;
  background: #183c30e8;
  box-shadow: 0 4px 0 #16372d55;
  backdrop-filter: blur(8px);
}
.voxel-mission-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #b9d2b5;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
}
.voxel-mission-kicker b {
  color: #f1d898;
  font-size: 10px;
}
.voxel-mission > strong {
  font-size: 16px;
  line-height: 1.4;
  display: block;
  letter-spacing: -0.04em;
}
.voxel-mission > p {
  font-size: 11px;
  color: #d0ddc5;
  margin: 5px 0 10px;
  line-height: 1.5;
}
.voxel-mission > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.voxel-mission button {
  pointer-events: auto;
  border: 1px solid #b5c59c88;
  background: #53794b55;
  color: #fff6d8;
  font-size: 11px !important;
  padding: 7px 10px;
}
.voxel-mission-distance {
  font-size: 12px;
  color: #f6d58d;
  font-weight: 700;
}
.voxel-map-toggle {
  position: absolute;
  right: 22px;
  top: 103px;
  pointer-events: auto;
  border: 1px solid #fff6;
  background: #1d4034e0;
  color: #fff5d6;
  min-width: 48px;
  padding: 8px 13px;
  font-size: 12px !important;
}
.voxel-mini-panel {
  position: absolute;
  right: 22px;
  top: 155px;
  width: 188px;
  padding: 10px;
  background: #203e30e6;
  border: 1px solid #c8d6b67d;
  border-radius: 11px;
  box-shadow: 0 4px 0 #183b2a55;
  backdrop-filter: blur(8px);
}
.voxel-mini-panel[hidden] {
  display: none;
}
.voxel-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin-bottom: 8px;
  gap: 6px;
}
.voxel-mini-header span {
  color: #e6cf91;
  font-size: 9px;
}
.voxel-mini-panel canvas {
  display: block;
  width: 168px;
  height: 168px;
  border: 1px solid #e8ddb965;
  border-radius: 5px;
  image-rendering: pixelated;
}
.voxel-mini-panel button {
  width: 100%;
  pointer-events: auto;
  margin-top: 7px;
  background: #e5ead2;
  color: #2e4b37;
  font-size: 11px !important;
  border: 1px solid #cad4b6;
  padding: 7px;
}
.voxel-life-dialog {
  width: min(460px, calc(100vw - 30px));
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  border: 1px solid #9aa784;
  border-radius: 18px;
  background: #f8f5e9;
  color: #264434;
  padding: 26px;
  box-shadow: 0 20px 80px #091e2060;
  font-family: inherit;
}
.voxel-life-dialog::backdrop {
  background: #122c2980;
  backdrop-filter: blur(3px);
}
.voxel-talk-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #6c8168;
  font-size: 11px;
  margin-bottom: 17px;
}
.voxel-talk-heading button {
  min-width: 44px;
  background: #e1e8d8;
  border: 1px solid #bdcab0;
  font-size: 11px !important;
  padding: 8px 11px;
}
.voxel-life-dialog h2 {
  font-size: 24px;
  letter-spacing: -0.05em;
  line-height: 1.4;
  word-break: keep-all;
}
.voxel-talk-word {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 17px 0;
  margin-top: 12px;
}
.voxel-talk-word > b {
  font-family: var(--glyph);
  font-size: 58px;
  font-weight: 700;
  color: #2d5a40;
  line-height: 1.3;
}
.voxel-talk-word > span {
  font-size: 21px;
  font-weight: 750;
}
.voxel-life-dialog > p {
  text-align: center;
  color: #5d745b;
  font-size: 14px;
}
.voxel-talk-characters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0 21px;
}
.voxel-talk-characters > span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  background: #e9eddc;
  border: 1px solid #d6dec8;
  border-radius: 9px;
  font-size: 13px;
}
.voxel-talk-characters b {
  font-size: 26px;
  font-family: var(--glyph);
}
.voxel-talk-primary {
  display: block;
  width: 100%;
  margin-top: 20px;
  background: #315b40;
  color: #fff6d9;
  border: 1px solid #214832;
  box-shadow: 0 4px 0 #173a27;
  padding: 12px 18px;
  font-size: 15px !important;
}
.voxel-life-dialog > small {
  display: block;
  margin-top: 16px;
  font-size: 10px;
  line-height: 1.6;
  color: #7b866f;
  word-break: keep-all;
}
.voxel-destination-list {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.voxel-destination-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: #fffdf6;
  border: 1px solid #d2dcc5;
  padding: 12px;
  border-radius: 10px;
}
.voxel-destination-list button[aria-pressed="true"] {
  border-color: #668b57;
  background: #eaf1df;
}
.voxel-destination-list button > b {
  font: 26px var(--glyph);
  color: #57754c;
}
.voxel-destination-list strong {
  display: block;
  font-size: 14px;
}
.voxel-destination-list small {
  display: block;
  font-size: 10px;
  color: #7a876e;
  font-weight: 500;
  margin-top: 3px;
}
.voxel-destination-list i {
  font-size: 11px;
  color: #75915c;
  font-style: normal;
  margin-left: auto;
}
.voxel-stage .voxel-compass {
  display: none;
}
@media (max-width: 700px) {
  .voxel-map-open .voxel-mission {
    visibility: hidden;
  }
}
@media (max-width: 700px) {
  .voxel-mission {
    left: 12px;
    top: 104px;
    width: min(230px, calc(100% - 80px));
    padding: 11px 12px;
  }
  .voxel-mission-kicker {
    font-size: 8px;
    margin-bottom: 4px;
  }
  .voxel-mission > strong {
    font-size: 12px;
  }
  .voxel-mission > p {
    display: none;
  }
  .voxel-mission > div {
    margin-top: 8px;
  }
  .voxel-mission button {
    font-size: 10px !important;
    padding: 6px 9px;
  }
  .voxel-mission-distance {
    font-size: 11px;
  }
  .voxel-map-toggle {
    top: 104px;
    right: 12px;
    padding: 8px 11px;
  }
  .voxel-mini-panel {
    right: 12px;
    top: 157px;
    width: 178px;
  }
  .voxel-mini-panel canvas {
    width: 158px;
    height: 158px;
  }
  .voxel-life-dialog {
    padding: 22px;
  }
  .voxel-life-dialog h2 {
    font-size: 21px;
  }
  .voxel-talk-word > b {
    font-size: 48px;
  }
  .voxel-talk-word > span {
    font-size: 19px;
  }
  .voxel-talk-characters > span {
    padding: 8px 10px;
    font-size: 11px;
  }
  .voxel-talk-characters b {
    font-size: 22px;
  }
}
@media (max-height: 500px) {
  .voxel-mission {
    top: 95px;
    padding: 8px 12px;
  }
  .voxel-mission > p {
    display: none;
  }
  .voxel-mini-panel {
    top: 95px;
    right: 80px;
  }
  .voxel-mini-panel canvas {
    width: 120px;
    height: 120px;
  }
  .voxel-mini-panel {
    width: 140px;
  }
  .voxel-mini-header {
    font-size: 8px;
  }
  .voxel-life-dialog {
    max-height: calc(100dvh - 20px);
    padding: 18px;
  }
}
.voxel-toast {
  z-index: 4;
}


/* source: tree-world.css */
.tree-mode .voxel-life {
  display: none;
}
.tree-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #fff7de;
}
.tree-objective {
  position: absolute;
  top: 112px;
  left: 22px;
  width: 290px;
  border: 1px solid #e6dfb45c;
  border-radius: 13px;
  background: linear-gradient(140deg, #214735ed, #345942ed);
  padding: 16px 17px;
  box-shadow: 0 6px 0 #1d3b2c55;
  backdrop-filter: blur(8px);
}
.tree-eyebrow {
  display: block;
  color: #e0dba7;
  font-size: 9px;
  letter-spacing: 0.11em;
  font-weight: 800;
  margin-bottom: 8px;
}
.tree-objective > strong {
  display: block;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.06em;
}
.tree-objective > p {
  font-size: 11px;
  color: #d4dfba;
  margin-top: 7px;
  line-height: 1.5;
}
.tree-hud-actions {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}
.tree-hud-actions button {
  pointer-events: auto;
  min-height: 44px;
  background: #d9dca32b;
  color: #fff7dc;
  border: 1px solid #e4dfa878;
  padding: 8px 12px;
  font-size: 11px !important;
}
.tree-hud-actions button:first-child {
  background: #eadbab;
  color: #284433;
  border-color: #f5e9b4;
}
.tree-hud-actions b {
  margin-left: 5px;
  color: inherit;
  font-size: 11px;
}
.tree-growth-status {
  display: block;
  width: 100%;
  min-height: 66px;
  margin-top: 12px;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid #d2dfae45;
  border-radius: 0;
  background: transparent;
  color: #fff7dc;
  text-align: left;
  pointer-events: auto;
}
.tree-growth-status > span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  align-items: center;
}
.tree-growth-status b {
  font-size: 12px;
}
.tree-growth-status i {
  font-size: 10px;
  font-style: normal;
  color: #e0dba7;
}
.tree-growth-status small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #e7e9c9;
}
.tree-growth-status progress {
  display: block;
  width: 100%;
  height: 6px;
  margin: 8px 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #163627;
  accent-color: #ead49a;
}
.tree-growth-status progress::-webkit-progress-bar {
  background: #163627;
}
.tree-growth-status progress::-webkit-progress-value {
  background: #ead49a;
}
.tree-growth-status progress::-moz-progress-bar {
  background: #ead49a;
}
.tree-growth-status:focus-visible {
  outline: 3px solid #ffe3a0;
  outline-offset: 4px;
}
.tree-growth-reward {
  margin-top: 16px;
  padding: 16px;
  background: #e7edd8;
  border: 1px solid #c7d3aa;
  border-radius: 12px;
  text-align: left;
}
.tree-growth-reward small {
  display: block;
  font-size: 11px;
  color: #58693e;
}
.tree-growth-reward strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
}
.tree-growth-reward p {
  font-size: 12px;
  line-height: 1.6;
  margin: 5px 0 0;
}
.tree-return-link {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  background: transparent;
  color: #3c613e;
  border: 1px solid #c2cfae;
  font-size: 13px !important;
}
.tree-growth-roadmap {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 22px 0;
}
.tree-growth-roadmap li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border: 1px solid #dadfcf;
  border-radius: 12px;
  background: #f1f1e7;
}
.tree-growth-roadmap li.earned {
  background: #e4ecd8;
  border-color: #adbf96;
}
.tree-growth-roadmap li[aria-current] {
  border: 2px solid #7c9a69;
  background: #fffdf5;
}
.tree-growth-roadmap li > b {
  font-size: 15px;
  white-space: nowrap;
  color: #5e754d;
}
.tree-growth-roadmap li > div {
  flex: 1;
  min-width: 0;
}
.tree-growth-roadmap strong {
  display: block;
  font-size: 15px;
}
.tree-growth-roadmap span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #5d6b52;
}
.tree-growth-roadmap em {
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}
.tree-dialog {
  width: min(520px, calc(100vw - 30px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border: 1px solid #c7c794;
  border-radius: 19px;
  background: #f8f5e8;
  color: #274231;
  padding: 28px;
  box-shadow: 0 24px 90px #132e2f66;
  font-family: inherit;
}
.tree-dialog::backdrop {
  background: #1029239c;
  backdrop-filter: blur(5px);
}
.tree-grade-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 18px 0;
}
.tree-grade-tabs button {
  min-height: 58px;
  border: 1px solid #cbd4ba;
  padding: 8px 5px;
  background: #fffdf4;
  color: #405934;
}
.tree-grade-tabs button[aria-pressed="true"] {
  background: #365b40;
  border-color: #365b40;
  color: #fff8dd;
}
.tree-grade-tabs strong {
  display: block;
  font-size: 13px;
}
.tree-grade-tabs small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}
.tree-passport-section .uncollected {
  border-style: dashed;
  background: #f4f3e9;
}
.tree-passport-section article > small {
  display: block;
  font-size: 10px;
  margin-top: 7px;
  color: #596f4e;
}
.tree-realm-list button:disabled {
  opacity: 0.6;
  cursor: default;
}
.tree-dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  gap: 12px;
  color: #6c8061;
  margin-bottom: 18px;
}
.tree-dialog-top button {
  background: #e3e9d5;
  border: 1px solid #bbcaa8;
  color: #3d5838;
  padding: 8px 12px;
  min-width: 44px;
  font-size: 11px !important;
}
.tree-dialog h2 {
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: -0.05em;
  word-break: keep-all;
}
.tree-dialog > p {
  font-size: 13px;
  color: #6d7d61;
  line-height: 1.7;
  margin-top: 10px;
}
.tree-dialog > small {
  display: block;
  font-size: 10px;
  line-height: 1.6;
  color: #7f866e;
  margin-top: 17px;
  word-break: keep-all;
}
.tree-realm-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.tree-realm-list button {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 13px;
  text-align: left;
  width: 100%;
  background: #fffdf6;
  border: 1px solid #d6dec8;
  min-height: 85px !important;
}
.tree-realm-list button:hover {
  border-color: var(--realm);
  background: #edf0dd;
}
.tree-realm-list button > b {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--realm);
  color: #fff9df;
  box-shadow:
    inset 0 7px 0 #fff2,
    inset -7px 0 0 #0001;
  font: 32px var(--glyph);
}
.tree-realm-list strong {
  display: block;
  font-size: 16px;
}
.tree-realm-list small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #7d8a70;
  margin-top: 4px;
  line-height: 1.5;
}
.tree-realm-list em {
  font-size: 12px;
  font-weight: 750;
  margin-left: auto;
  white-space: nowrap;
  color: #6b8457;
  font-style: normal;
}
.tree-realm-list i {
  font-style: normal;
  margin-left: 7px;
}
.tree-portal-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #647a58;
  background: #e7ecd7;
  padding: 12px 14px;
  border-radius: 10px;
  margin-top: 17px;
}
.tree-portal-total b {
  color: #38613e;
  font-size: 17px;
}
.tree-passport-section {
  margin-top: 21px;
}
.tree-passport-section h3 {
  font-size: 12px;
  color: #6f855c;
  margin-bottom: 9px;
}
.tree-passport-section > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tree-passport-section article {
  border: 1px solid #d6ddc7;
  border-radius: 10px;
  background: #fffdf5;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  gap: 6px;
}
.tree-passport-section article.found {
  border-color: #a5b37a;
  background: #edf1d9;
}
.tree-passport-section article > b {
  font: 38px var(--glyph);
  line-height: 1.3;
}
.tree-passport-section article > span {
  font-size: 11px;
  color: #6f7d60;
  text-align: center;
}
.tree-passport-section article.unknown {
  color: #bdc7ac;
}
.tree-passport-section article.unknown > span {
  font-size: 9px;
}
.tree-challenge-glyph {
  font: 86px var(--glyph);
  text-align: center;
  color: #365e3d;
  line-height: 1.4;
  margin: 0 0 16px;
}
.tree-challenge-glyph.collected {
  color: #9a742a;
  text-shadow: 0 3px 0 #e4d7a5;
}
.tree-answer-list {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}
.tree-answer-list button {
  width: 100%;
  background: #fffdf6;
  border: 1px solid #cbd6b7;
  color: #36523c;
  text-align: left;
  padding: 13px 16px;
  font-size: 16px !important;
  min-height: 53px !important;
}
.tree-answer-list button:hover {
  background: #e9efdc;
  border-color: #789a5b;
}
.tree-answer-list button:disabled {
  background: #ecede4;
  color: #919782;
  border-color: #d8dccb;
}
.tree-dialog .tree-answer-feedback {
  color: #8c6a33;
  font-size: 13px;
  background: #f1e9cf;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
}
.tree-answer-feedback:empty {
  display: none;
}
.tree-found-progress {
  background: #e5edd6;
  border-radius: 9px;
  color: #476e3e;
  text-align: center;
  padding: 11px;
  font-size: 13px;
  font-weight: 750;
  margin-top: 17px;
}
.tree-primary {
  display: block;
  width: 100%;
  background: #375d3c;
  color: #fff7d5;
  box-shadow: 0 4px 0 #203f29;
  border: 1px solid #284b2d;
  padding: 13px 15px;
  margin-top: 20px;
  font-size: 14px !important;
}
.tree-save-error {
  background: #f2e2d1;
  color: #8c5538 !important;
  padding: 10px;
  border-radius: 8px;
}
.tree-in-realm .voxel-bottom {
  display: none;
}
.tree-in-realm .voxel-touch-actions [data-voxel="place"],
.tree-in-realm .voxel-touch-actions [data-voxel="remove"] {
  display: none;
}
.tree-actionbar {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  background: #1c3b2fdb;
  padding: 12px 20px;
  border: 1px solid #e4e2b362;
  border-radius: 11px;
  text-align: center;
}
.tree-actionbar[hidden],
.tree-dash[hidden] {
  display: none;
}
.tree-actionbar > span {
  display: block;
  font-size: 13px;
  color: #f2ecc4;
}
.tree-actionbar > small {
  display: block;
  color: #c0d0b2;
  font-size: 10px;
  margin-top: 4px;
}
.tree-dash {
  position: absolute;
  pointer-events: auto;
  right: 15px;
  bottom: 196px;
  padding: 10px 13px;
  min-height: 51px !important;
  min-width: 50px;
  border: 1px solid #ffedbc;
  background: #a77b3cd9;
  color: #fff6db;
  font-size: 12px !important;
}
.tree-dash small {
  display: block;
  font-size: 9px;
  font-weight: 500;
}
.tree-dash:disabled {
  opacity: 0.65;
}
.tree-mode .voxel-context {
  bottom: 190px;
}
.tree-in-realm .voxel-context {
  bottom: 110px;
}
.tree-in-realm .voxel-brand {
  background: #344d42e8;
}
.tree-in-realm .voxel-toast {
  top: 114px;
}
.tree-dialog button:focus-visible {
  outline: 3px solid #c49c42;
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .tree-objective {
    top: 105px;
    left: 12px;
    width: min(270px, calc(100% - 24px));
    padding: 12px 13px;
  }
  .tree-eyebrow {
    font-size: 8px;
    margin-bottom: 5px;
    letter-spacing: 0.07em;
  }
  .tree-objective > strong {
    font-size: 16px;
  }
  .tree-objective > p {
    font-size: 10px;
    margin-top: 5px;
  }
  .tree-hud-actions {
    gap: 6px;
    margin-top: 10px;
  }
  .tree-hud-actions button {
    font-size: 10px !important;
    padding: 7px 10px;
  }
  .tree-hud-actions b {
    font-size: 10px;
  }
  .tree-dialog {
    padding: 22px;
  }
  .tree-dialog h2 {
    font-size: 21px;
  }
  .tree-dialog > p {
    font-size: 12px;
  }
  .tree-realm-list {
    gap: 8px;
    margin-top: 19px;
  }
  .tree-realm-list button {
    gap: 10px;
    padding: 12px 10px;
    min-height: 75px !important;
  }
  .tree-realm-list button > b {
    width: 45px;
    height: 48px;
    font-size: 28px;
  }
  .tree-realm-list strong {
    font-size: 14px;
  }
  .tree-realm-list small {
    font-size: 9px;
  }
  .tree-realm-list em {
    font-size: 11px;
  }
  .tree-realm-list i {
    margin-left: 3px;
  }
  .tree-portal-total {
    font-size: 11px;
    padding: 10px 11px;
  }
  .tree-portal-total b {
    font-size: 15px;
  }
  .tree-mode .voxel-context {
    bottom: 112px;
    max-width: 65%;
  }
  .tree-in-realm .voxel-context {
    bottom: 103px;
  }
  .tree-in-realm .voxel-touch-actions {
    bottom: 124px;
  }
  .tree-in-realm .voxel-stick {
    bottom: 125px;
  }
  .tree-actionbar {
    bottom: 23px;
    padding: 10px 13px;
  }
  .tree-actionbar > span {
    font-size: 10px;
  }
  .tree-actionbar > small {
    display: none;
  }
  .tree-dash {
    bottom: 185px;
    right: 10px;
  }
  .tree-in-realm .voxel-toast {
    top: 88px;
  }
  .tree-passport-section article {
    min-height: 95px;
  }
  .tree-challenge-glyph {
    font-size: 72px;
  }
  .voxel-heading h1 {
    font-size: 21px;
  }
}
@media (max-height: 500px) {
  .tree-objective {
    top: 100px;
    max-width: 250px;
    padding: 9px 12px;
  }
  .tree-objective > p {
    display: none;
  }
  .tree-eyebrow {
    font-size: 8px;
  }
  .tree-objective > strong {
    font-size: 14px;
  }
  .tree-hud-actions {
    margin-top: 7px;
  }
  .tree-hud-actions button {
    min-height: 40px;
  }
  .tree-dialog {
    padding: 18px;
  }
  .tree-realm-list {
    margin-top: 14px;
  }
  .tree-realm-list button {
    min-height: 68px !important;
  }
  .tree-actionbar {
    bottom: 10px;
  }
  .tree-mode .voxel-context {
    bottom: 125px;
  }
  .tree-in-realm .voxel-context {
    bottom: 80px;
  }
  .tree-dash {
    bottom: 190px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tree-hud *,
  .tree-dialog * {
    animation: none !important;
    transition: none !important;
  }
}


/* source: game-screen.css */
/* Immersive play has one compact status line. Explanations live in the pause menu. */
.voxel-stage {
  --game-top: max(12px, env(safe-area-inset-top));
  --game-left: max(12px, env(safe-area-inset-left));
  --game-right: max(12px, env(safe-area-inset-right));
  --game-bottom: max(16px, env(safe-area-inset-bottom));
}
.voxel-stage.voxel-expanded,
.voxel-stage:fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  min-height: 0 !important;
  border-radius: 0;
  z-index: 1000;
}
.voxel-stage .voxel-brand,
.voxel-stage .voxel-compass,
.voxel-stage .voxel-material,
.voxel-stage .voxel-help,
.voxel-stage .tree-actionbar,
.voxel-stage .tree-objective > p,
.voxel-stage .tree-eyebrow {
  display: none;
}
.voxel-stage .voxel-top {
  inset: var(--game-top) var(--game-right) auto auto;
  gap: 0;
  z-index: 2;
}
.voxel-stage .voxel-toolbar {
  gap: 6px;
}
.voxel-stage .voxel-toolbar button {
  display: block;
  min-width: 52px;
  min-height: 44px;
  max-width: none;
  padding: 8px 12px;
  font-size: 12px;
  background: #163d34d9;
}
.voxel-stage .tree-objective {
  inset: var(--game-top) auto auto var(--game-left);
  width: max-content;
  max-width: calc(100% - 155px - var(--game-left) - var(--game-right));
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: none;
  background: #163d34c9;
}
.voxel-stage .tree-objective > strong {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voxel-stage .voxel-bottom {
  display: none;
}
.voxel-stage.voxel-building:not(.tree-in-realm) .voxel-bottom {
  display: flex;
  bottom: var(--game-bottom);
}
.voxel-stage .voxel-hotbar {
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  touch-action: pan-x;
}
.voxel-stage .voxel-hotbar button {
  width: 44px;
  min-width: 44px;
  height: 46px;
  flex: 0 0 44px;
}
.voxel-stage .voxel-touch-actions [data-voxel="remove"],
.voxel-stage .voxel-touch-actions [data-voxel="place"] {
  display: none;
}
.voxel-stage.voxel-building:not(.tree-in-realm)
  .voxel-touch-actions
  [data-voxel="remove"],
.voxel-stage.voxel-building:not(.tree-in-realm)
  .voxel-touch-actions
  [data-voxel="place"] {
  display: block;
}
.voxel-stage .voxel-context {
  bottom: var(--game-bottom);
  max-width: min(300px, calc(100% - 24px));
  min-width: 0;
  gap: 5px;
  text-align: center;
}
.voxel-stage.voxel-building .voxel-context {
  bottom: 98px;
}
.voxel-stage .voxel-context span {
  font-size: 12px;
}
.voxel-stage .voxel-context button {
  min-height: 44px;
  font-size: 13px;
  padding: 8px 16px;
}
.voxel-stage .voxel-toast,
.voxel-stage.tree-in-realm .voxel-toast {
  top: calc(var(--game-top) + 54px);
  max-width: min(360px, calc(100% - 32px));
  font-size: 12px;
  padding: 8px 12px;
}
.voxel-stage .voxel-gate {
  padding: max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
.voxel-stage .voxel-gate-card {
  width: min(390px, 100%);
  max-height: calc(
    100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.voxel-stage .voxel-gate h2 {
  font-size: 25px;
  margin-bottom: 12px;
}
.voxel-stage .voxel-gate-tag {
  font-size: 11px;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.voxel-stage .voxel-gate p {
  font-size: 13px;
  margin-bottom: 16px;
}
.voxel-stage:not(.voxel-entered) .voxel-game-menu {
  display: none;
}
.voxel-stage.voxel-entered .voxel-gate-card > p,
.voxel-stage.voxel-entered .voxel-gate-tag {
  display: none;
}
.voxel-game-menu {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.voxel-game-menu .tree-hud-actions {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.voxel-game-menu .tree-hud-actions button {
  color: #294c35;
  background: #e9eddc;
  border-color: #becbb0;
  font-size: 13px !important;
  padding: 10px;
}
.voxel-game-menu .tree-growth-status {
  margin: 0;
  padding: 12px;
  background: #edf0e2;
  color: #355337;
  border: 1px solid #c6d1b9;
  border-radius: 10px;
}
.voxel-game-menu .tree-growth-status small,
.voxel-game-menu .tree-growth-status i {
  color: #536f43;
}
.voxel-game-menu .tree-growth-status progress {
  background: #d8dfc9;
  accent-color: #547642;
}
.voxel-game-menu .tree-growth-status progress::-webkit-progress-bar {
  background: #d8dfc9;
}
.voxel-game-menu .tree-growth-status progress::-webkit-progress-value {
  background: #547642;
}
.voxel-game-menu .tree-growth-status progress::-moz-progress-bar {
  background: #547642;
}
.voxel-menu-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.voxel-menu-tools button {
  border: 1px solid #b9c8ab;
  background: #fffdf5;
  color: #385439;
  font-size: 12px;
  padding: 10px;
  min-height: 44px;
}
.voxel-menu-tools button:disabled {
  opacity: 0.5;
}
.voxel-controls-guide {
  color: #45613e;
  font-size: 12px;
}
.voxel-stage .voxel-fullscreen-note {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: #e8edda;
  font-size: 12px;
}
.voxel-controls-guide summary {
  cursor: pointer;
  padding: 12px 0;
  min-height: 44px;
}
.voxel-stage .voxel-controls-guide p {
  font-size: 12px;
  line-height: 1.7;
  margin: 6px 0;
}
.voxel-stage:not(.voxel-playing) .voxel-crosshair,
.voxel-stage:not(.voxel-playing) .voxel-context,
.voxel-stage:not(.voxel-playing) .voxel-touch,
.voxel-stage:not(.voxel-playing) .tree-dash {
  visibility: hidden;
}
.voxel-stage .tree-dash {
  bottom: var(--game-bottom);
  right: var(--game-right);
  min-height: 44px !important;
}
.voxel-stage .tree-dash small {
  display: none;
}
.voxel-stage .tree-dialog,
.voxel-stage .voxel-life-dialog {
  top: env(safe-area-inset-top);
  bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  max-width: calc(
    100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)
  );
  max-height: calc(
    100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
  overscroll-behavior: contain;
}
@media (pointer: coarse), (max-width: 700px) {
  .voxel-stage .voxel-touch {
    display: block;
  }
  .voxel-stage .voxel-stick {
    left: var(--game-left);
    bottom: var(--game-bottom);
    width: 96px;
    height: 96px;
  }
  .voxel-stage .voxel-stick b {
    display: none;
  }
  .voxel-stage .voxel-touch-actions {
    bottom: var(--game-bottom);
    right: var(--game-right);
    gap: 6px;
  }
  .voxel-stage .voxel-touch-actions button {
    min-width: 52px;
    min-height: 48px;
    font-size: 12px;
  }
  .voxel-stage .tree-dash {
    bottom: calc(var(--game-bottom) + 58px);
  }
  .voxel-stage .voxel-context {
    bottom: calc(var(--game-bottom) + 118px);
  }
  .voxel-stage.voxel-building:not(.tree-in-realm) .voxel-bottom {
    bottom: calc(var(--game-bottom) + 174px);
  }
  .voxel-stage.voxel-building .voxel-context {
    bottom: calc(var(--game-bottom) + 236px);
  }
  .voxel-stage .voxel-hotbar {
    max-width: calc(100vw - 24px);
  }
  .voxel-stage .tree-objective > strong {
    font-size: 12px;
  }
}
@media (orientation: landscape) and (max-height: 560px) {
  .voxel-stage .voxel-stick {
    width: 84px;
    height: 84px;
  }
  .voxel-stage .voxel-context {
    bottom: var(--game-bottom);
    max-width: min(300px, calc(100% - 250px));
  }
  .voxel-stage.voxel-building .voxel-context {
    bottom: calc(var(--game-bottom) + 64px);
  }
  .voxel-stage.voxel-building:not(.tree-in-realm) .voxel-bottom {
    bottom: var(--game-bottom);
    max-width: calc(100% - 250px);
  }
  .voxel-stage .voxel-hotbar {
    max-width: 100%;
  }
  .voxel-stage .voxel-hotbar button {
    height: 44px;
  }
  .voxel-stage .voxel-gate-card {
    padding: 16px 20px;
    width: min(440px, 100%);
  }
  .voxel-stage .voxel-gate h2 {
    font-size: 21px;
  }
  .voxel-stage .tree-dialog,
  .voxel-stage .voxel-life-dialog {
    padding: 18px 22px;
  }
}


/* source: story-world.css */
/* The map and questions are temporary overlays; the playfield keeps only one goal. */
.story-dialog {
  --ink: #294c42;
  --paper: #fcf8ee;
  --line: #dce3d4;
  width: min(620px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 24px;
  margin: auto;
  border: 1px solid #e0dccd;
  border-radius: 22px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 100px #152f3155;
  overflow: auto;
  overscroll-behavior: contain;
  text-align: left;
  font-family: "Pretendard", "Malgun Gothic", sans-serif;
}
.story-dialog::backdrop {
  background: #102c3166;
  backdrop-filter: blur(3px);
}
.story-dialog *,
.story-dialog *::before,
.story-dialog *::after {
  box-sizing: border-box;
}
.story-dialog button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf7;
  font-weight: 700;
  line-height: 1.4;
  touch-action: manipulation;
}
.story-dialog button:hover:not(:disabled) {
  background: #e9efdf;
}
.story-dialog button:focus-visible {
  outline: 3px solid #d49c42;
  outline-offset: 3px;
}
.story-dialog button:disabled {
  opacity: 0.6;
  cursor: default;
}
.story-dialog .story-primary {
  display: block;
  width: 100%;
  background: #315f4a;
  color: #fff8e7;
  border-color: #315f4a;
  box-shadow: 0 4px 0 #224633;
  margin-top: 18px;
}
.story-dialog .story-primary:hover:not(:disabled) {
  background: #244d3b;
}
.story-secondary {
  width: 100%;
  margin-top: 12px;
}
.story-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.story-dialog-head small {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: #7a876a;
}
.story-dialog h2 {
  font-size: clamp(21px, 2.5vw, 30px);
  letter-spacing: -0.05em;
  line-height: 1.3;
  margin: 6px 0 0;
}
.story-dialog-head > button {
  flex: 0 0 auto;
  padding: 8px 12px;
}
.king-invitation {
  --invite-ink: #46311f;
  --invite-seal: #89452c;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px 20px;
  color: var(--invite-ink);
}
.king-invite-source {
  align-self: start;
  border-inline-start: 4px solid var(--invite-seal);
  padding-inline-start: 12px;
}
.king-invitation h3, .king-invitation dl, .king-invitation dd {
  margin: 0;
}
.king-invitation dl > div {
  margin-block: 10px;
}
.king-invitation dt {
  color: var(--invite-seal);
  font-weight: 700;
}
.king-invitation dd {
  font-weight: 800;
}
.king-invite-row {
  display: grid;
  grid-template-columns: 3em repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.king-invite-row[data-mismatch="true"] > b {
  text-decoration: underline 2px var(--invite-seal);
  text-underline-offset: 4px;
}
.story-dialog .king-invite-row button[aria-pressed="true"] {
  background: #fff1c8;
  outline: 2px solid var(--invite-seal);
  outline-offset: -3px;
}
.king-invitation .story-feedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--invite-ink);
}
body:has(.story-dialog[open] :is(.king-invitation, .friends-role-plan, .trial-evidence, .ong-ledger, .club-workshop)) .voxel-gate {
  visibility: hidden;
}
.king-invitation button {
  word-break: keep-all;
}
@media (max-width: 540px) {
  .king-invitation { grid-template-columns: 1fr; }
  .king-invitation dl { display: flex; flex-wrap: wrap; gap: 0 16px; }
}
.friends-role-row, .trial-evidence-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.friends-role-row button, .trial-evidence button, .ong-ledger button {
  overflow-wrap: anywhere;
  word-break: keep-all;
  min-width: 0;
}
.friends-role-row button small, .trial-evidence-row button small, .ong-ledger-times button small {
  display: block;
  line-height: 1.2;
}
.friends-role-wish {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
  border-block: 1px solid #aa80535c;
  padding-block: 10px;
  margin-block: 12px;
}
.friends-role-wish p { margin: 0; }
.friends-role-wish span { font-weight: 800; color: #713c22; }
.friends-role-plan .story-feedback { color: #624025; margin-top: 8px; }
.friends-role-row button[aria-pressed="true"]:not(:focus-visible),
.trial-evidence button[aria-pressed="true"]:not(:focus-visible),
.ong-ledger button[aria-pressed="true"]:not(:focus-visible) {
  outline: 2px solid #89452c;
  outline-offset: -3px;
}
.trial-evidence-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trial-evidence-bins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trial-evidence-note { margin: 0 0 14px; color: #624025; }
.trial-evidence-card {
  padding-block: 16px;
  margin-block: 12px;
  border-block: 1px solid #aa80535c;
  font-weight: 750;
}
.ong-ledger-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ong-ledger-times button small { font-size: inherit; }
.ong-ledger-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ong-ledger-note, .ong-ledger-stock { margin: 0 0 12px; color: #624025; }
.ong-ledger-stock { margin-block: 14px; font-weight: 700; }
.club-workshop-count {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 10px;
}
.club-workshop-preview {
  aspect-ratio: 18 / 5;
  position: relative;
  overflow: hidden;
  background: #51463a;
}
.club-workshop-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.club-workshop-preview [data-workshop-fallback] {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 16px;
  margin: 0;
  text-align: center;
  color: #fff4df;
}
.club-workshop-preview [hidden] { display: none; }
.club-workshop-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}
.club-workshop-actions button { word-break: keep-all; }
.story-map-dialog {
  width: min(1080px, calc(100vw - 32px));
  background: #fcf9ef;
}
.story-atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  gap: 22px;
}
.story-atlas {
  position: relative;
  min-height: 480px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #cadbcf;
  background:
    radial-gradient(ellipse at 45% 40%, #f7f6dc88, transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 47px, #6d998e12 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, #6d998e12 48px),
    #dcebe2;
}
.story-atlas > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.story-atlas > svg path {
  stroke: #91ad9c;
  stroke-width: 0.5;
  stroke-dasharray: 1.3 1.5;
  fill: none;
}
.story-dialog .story-island {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 112px;
  min-height: 99px;
  padding: 8px 3px;
  border-radius: 42% 48% 44% 38%;
  border: 2px solid #fff8e7aa;
  background: color-mix(in srgb, var(--island) 30%, #f3f2d9);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--island) 60%, #a6b99c);
  z-index: 1;
  transition:
    box-shadow 0.2s,
    background 0.2s;
}
.story-dialog .story-island.selected {
  outline: 3px solid #ab7e37;
  outline-offset: 4px;
  background: #f6e7b9;
}
.story-island > b {
  font-family: "Noto Serif KR", "Batang", serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.1;
}
.story-island > span {
  font-size: 12px;
  margin-top: 3px;
  white-space: nowrap;
}
.story-island > small {
  font-size: 10px;
  opacity: 0.8;
  margin-top: 3px;
}
.story-atlas-hub {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.story-atlas-hub > b {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 45% 45% 35% 35%;
  font:
    36px "Batang",
    serif;
  color: #f7edca;
  background: #466b4c;
  box-shadow:
    0 6px 0 #795b3b,
    -10px -10px 0 -5px #709a67,
    12px -13px 0 -5px #729b6f;
}
.story-atlas-hub > span {
  font-size: 11px;
  font-weight: 800;
  margin-top: 13px;
}
.story-compass {
  position: absolute;
  top: 14px;
  left: 20px;
  font:
    14px Georgia,
    serif;
  text-align: center;
  color: #7e998a;
}
.story-sea-label {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #77968d;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.story-map-legend {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-size: 10px;
  color: #587868;
}
.story-region {
  min-width: 0;
}
.story-region-heading > span {
  font-size: 12px;
  color: #89936f;
  font-weight: 800;
}
.story-region-heading h3 {
  margin: 4px 0 14px;
  font-size: 23px;
}
.story-chapter {
  padding: 18px;
  border-radius: 15px;
  background: #fffdfa;
  border: 1px solid #e4e5d8;
  margin-bottom: 12px;
}
.story-chapter.ready {
  border-color: #d6bf87;
  background: linear-gradient(120deg, #fff9e5, #fffdfa);
}
.story-chapter > small {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #9a7a42;
  font-weight: 800;
}
.story-chapter h4 {
  font-size: 19px;
  margin: 7px 0;
}
.story-chapter p {
  font-size: 13px;
  line-height: 1.7;
  color: #758274;
  margin: 4px 0 12px;
}
.story-chapter.soon button {
  width: 100%;
  min-height: 40px;
}
.story-chapter-rewards {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.story-chapter-rewards > span {
  width: 30px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #ebe9d6;
  border-radius: 6px;
  font:
    20px "Batang",
    serif;
}
.story-chapter-rewards small {
  font-size: 11px;
  color: #8b7957;
  margin-left: 4px;
}
.story-map-footer {
  border-top: 1px solid #e5e5d7;
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.story-map-footer > span {
  font-size: 12px;
  color: #7d8978;
}
.story-map-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.story-map-footer button {
  font-size: 12px;
}
.story-quest-copy p {
  font-size: 17px;
  line-height: 1.85;
  word-break: keep-all;
  margin: 12px 0 20px;
}
.story-step {
  font-size: 12px;
  color: #9c814a;
  font-weight: 800;
}
.story-choices {
  display: grid;
  gap: 10px;
}
.story-choices > button {
  min-height: 58px;
  font-size: 18px;
  text-align: left;
  padding-left: 20px;
}
.story-feedback {
  min-height: 24px;
  font-size: 14px;
  color: #96723b;
  line-height: 1.7;
  margin: 12px 0 0;
}
.story-success {
  text-align: center;
  padding: 14px 8px;
}
.story-success-glyph {
  font-family: "Batang", serif;
  font-size: 64px;
  color: #718746;
  margin: 12px 0 22px;
  overflow-wrap: anywhere;
}
.story-success p {
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
}
.story-success small {
  color: #7f8979;
  font-size: 12px;
  display: block;
  line-height: 1.7;
}
.story-warning {
  color: #a34c31;
  background: #ffebdd;
  border-radius: 9px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.story-workshop-art {
  height: 140px;
  display: grid;
  place-items: center;
  position: relative;
  margin: 20px auto;
  background: radial-gradient(ellipse, #dfe7ce, transparent 70%);
}
.story-workshop-art > span {
  display: grid;
  place-items: center;
  width: 130px;
  height: 90px;
  font:
    48px "Batang",
    serif;
  background: #c5a273;
  border: 8px solid #8a6e49;
  border-top: 16px solid #74906c;
  color: #5c4931;
  transform: skewY(-3deg);
  box-shadow: 10px 10px 0 #6f7c4e33;
}
.story-observatory-art {
  background: radial-gradient(ellipse, #d8e8e5, transparent 70%);
}
.story-observatory-art > span {
  width: 150px;
  color: #426c76;
  background: #eee1ae;
  border-color: #75999d;
  border-top-color: #a8c7c8;
  transform: none;
}
.story-garden-art {
  background: radial-gradient(ellipse, #e6e7c4, transparent 70%);
}
.story-garden-art > span {
  width: 150px;
  background: #efdfaf;
  border-color: #ac905e;
  border-top-color: #82a464;
  transform: none;
}
.story-persimmon-art {
  background: radial-gradient(ellipse, #f0dfbb, transparent 70%);
}
.story-persimmon-art > span {
  width: 150px;
  background: #f1d3a0;
  border-color: #ad8755;
  border-top-color: #c08d59;
  color: #755336;
  transform: none;
}
.story-flower-art {
  background: radial-gradient(ellipse, #f0dfd5, transparent 70%);
}
.story-flower-art > span {
  width: 150px;
  background: #f1dfc8;
  border-color: #b19679;
  border-top-color: #9cb286;
  color: #8d655d;
  transform: none;
}
.story-song-art {
  background: radial-gradient(ellipse, #dce9df, transparent 70%);
}
.story-song-art > span {
  width: 150px;
  background: #ebdfb8;
  border-color: #a28e66;
  border-top-color: #8da895;
  color: #587776;
  transform: none;
}
.story-porridge-art {
  background: radial-gradient(ellipse, #e9ddcb, transparent 70%);
}
.story-starlight-art {
  background: linear-gradient(145deg, #dce8e6, #b9cddc);
}
.story-cloud-art {
  background: linear-gradient(145deg, #e4ecdc, #bbd4cd);
}
.story-snail-art {
  background: linear-gradient(145deg, #e8e6c9, #bdd0ae);
}
.story-mill-art {
  background: linear-gradient(145deg, #e1e9dc, #b9d2d1);
}
.story-breeze-art {
  background: linear-gradient(145deg, #e9e5c3, #c1d6ad);
}
.story-magpie-art { background: linear-gradient(145deg, #e4e6cf, #bbd0d0); }
.story-magpie-art > span { color: #607f83; }
.story-frog-art { background: linear-gradient(145deg, #dce8ce, #b8d4d2); }
.story-frog-art > span { color: #598b7d; }
.story-breeze-art > span {
  color: #748754;
}
.story-mill-art > span {
  color: #567c7d;
}
.story-snail-art > span {
  color: #677b4c;
}
.story-cloud-art > span {
  color: #517f75;
}
.story-starlight-art > span {
  color: #476d87;
}
.story-porridge-art > span {
  width: 150px;
  background: #ead7b4;
  border-color: #9a815a;
  border-top-color: #b09c78;
  color: #926f58;
  transform: none;
}
.story-active .tree-dash {
  display: none !important;
}
@media (max-width: 760px) {
  .story-atlas-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .story-atlas {
    min-height: 380px;
  }
  .story-dialog .story-island {
    width: 89px;
    min-height: 78px;
  }
  .story-island > span {
    font-size: 10px;
  }
  .story-island > b {
    font-size: 23px;
  }
  .story-island > small {
    font-size: 9px;
  }
  .story-atlas-hub > b {
    width: 50px;
    height: 50px;
    font-size: 29px;
  }
  .story-map-dialog {
    padding: 18px;
  }
  .story-dialog {
    max-height: calc(100dvh - 24px);
    padding: 18px;
    border-radius: 16px;
  }
  .story-dialog h2 {
    font-size: 22px;
  }
  .story-quest-copy p {
    font-size: 16px;
  }
  .story-choices > button {
    font-size: 17px;
    min-height: 52px;
  }
}
@media (max-width: 370px) {
  .story-atlas {
    min-height: 355px;
  }
  .story-dialog .story-island {
    width: 72px;
    min-height: 70px;
  }
  .story-island > span {
    font-size: 9px;
  }
  .story-atlas-hub > span {
    font-size: 9px;
  }
  .story-sea-label {
    font-size: 10px;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .story-map-dialog {
    width: calc(100vw - 24px);
  }
  .story-atlas-layout {
    grid-template-columns: minmax(290px, 1.3fr) minmax(200px, 1fr);
  }
  .story-atlas {
    min-height: 355px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-dialog .story-island {
    transition: none;
  }
}
/* Original floating-island illustrations replace the flat region badges. */
.story-map-quick {
  display: none;
}
.story-atlas {
  min-height: 550px;
  background-color: #cfe2db;
}
.story-dialog .story-island {
  width: 132px;
  min-height: 126px;
  padding: 0 0 6px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  gap: 0;
}
.story-dialog .story-island:hover:not(:disabled) {
  background: #fff7d855;
}
.story-dialog .story-island.selected {
  background: #fff3c777;
  outline: 2px solid #b19357;
  outline-offset: 0;
  box-shadow: 0 8px 16px #69877b22;
}
.story-island .story-island-art {
  position: static;
  width: 122px;
  height: 86px;
  filter: drop-shadow(0 5px 4px #5c857622);
}
.story-island > span {
  font-size: 12px;
  margin-top: -2px;
  text-shadow: 0 1px #f4f4de;
}
.story-island > small {
  font-size: 10px;
  margin-top: 2px;
  color: #476c5c;
}
.story-atlas-hub > b {
  width: 100px;
  height: 92px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.story-atlas-hub > b svg {
  position: static;
  width: 112px;
  height: 92px;
  pointer-events: none;
}
.story-atlas-hub > span {
  margin-top: 0;
}
@media (max-width: 760px) {
  .story-map-quick {
    display: grid;
    gap: 6px;
    margin: -4px 0 18px;
  }
  .story-map-quick > button {
    background: #315f4a;
    color: #fff8e7;
    border-color: #315f4a;
  }
  .story-map-quick > small {
    font-size: 11px;
    text-align: center;
    color: #788669;
  }
  .story-atlas {
    min-height: 410px;
  }
  .story-dialog .story-island {
    width: 91px;
    min-height: 102px;
    border-radius: 14px;
  }
  .story-island .story-island-art {
    width: 92px;
    height: 67px;
  }
  .story-island > span {
    font-size: 10px;
  }
  .story-island > small {
    font-size: 9px;
  }
  .story-atlas-hub > b {
    width: 70px;
    height: 72px;
  }
  .story-atlas-hub > b svg {
    width: 83px;
    height: 72px;
  }
}
@media (max-width: 370px) {
  .story-atlas {
    min-height: 390px;
  }
  .story-dialog .story-island {
    width: 75px;
    min-height: 94px;
  }
  .story-island .story-island-art {
    width: 79px;
    height: 59px;
  }
  .story-island > span {
    font-size: 9px;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .story-atlas {
    min-height: 410px;
  }
}
.story-brothers-art {
  background: linear-gradient(145deg, #f0dfac, #c7cf9b);
}
.story-brothers-art > span {
  color: #9d7e40;
}
.story-king-art {
  background: linear-gradient(145deg, #e6e8bd, #b3d0bb);
}
.story-king-art > span {
  color: #618b70;
}
.story-friends-art {
  background: linear-gradient(145deg, #e8ddba, #bbcdb8);
}
.story-friends-art > span {
  color: #98805b;
}
.story-rabbit-art {
  background: linear-gradient(145deg, #e7e3c8, #b9d0c2);
}
.story-rabbit-art > span {
  color: #77958c;
}
.story-ong-art {
  background: linear-gradient(145deg, #e8dfbd, #bfd0b8);
}
.story-ong-art > span {
  color: #8f8c62;
}
.story-club-art {
  background: linear-gradient(145deg, #f0dfaa, #abcbbd);
}
.story-club-art > span {
  color: #91804d;
}


/* source: play-loop.css */
/* One active objective stays in the HUD; instructions and practice are on demand. */
.story-entry {
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 16px 0 10px;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: #2c5843;
  color: #fff5df;
  box-shadow: 0 4px 0 #204330;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.story-entry:focus-visible {
  outline: 3px solid #e2bb6d;
  outline-offset: 3px;
}
.voxel-stage.voxel-entered .story-entry {
  display: none;
}
.voxel-stage:not(.voxel-entered) .voxel-play {
  min-height: 44px;
  padding: 10px 14px;
  background: transparent;
  color: #627763;
  border: 1px solid #b6c3a5;
  box-shadow: none;
  font-size: 13px;
}
.voxel-stage .tree-objective {
  gap: 8px;
}
.voxel-stage .tree-objective > strong {
  min-width: 0;
  flex: 1;
}
.story-compass-button {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  margin: -8px -6px -8px 0;
  padding: 4px;
  border: 0;
  border-radius: 7px;
  background: #d3d7a91c;
  color: #ffe4a1;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.story-compass-button[hidden] {
  display: none;
}
.story-compass-button i {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 13px solid #f5d38a;
  transform-origin: 50% 65%;
}
.story-compass-button:focus-visible {
  outline: 2px solid #f4d182;
  outline-offset: 2px;
}
.story-journal-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #7e8d6a;
}
.story-journal > progress {
  appearance: none;
  -webkit-appearance: none;
  background: #dfe7d3;
  width: 100%;
  margin: 10px 0 16px;
  height: 7px;
  accent-color: #77985b;
}
.story-journal h3 {
  font-size: 21px;
  margin: 0 0 10px;
  letter-spacing: -0.04em;
}
.story-journal p {
  font-size: 16px;
  line-height: 1.7;
  margin: 10px 0;
}
.story-journal > small {
  font-size: 12px;
  color: #7d886e;
  line-height: 1.6;
}
.story-journal details {
  border-top: 1px solid #e1e4d5;
  margin: 20px 0 10px;
  padding-top: 12px;
  font-size: 13px;
  color: #75846b;
}
.story-journal summary {
  cursor: pointer;
  min-height: 36px;
  padding: 6px 0;
}
.story-journal ol {
  padding-left: 22px;
  line-height: 1.9;
  margin: 5px 0 15px;
}
.memory-dialog {
  width: min(540px, calc(100vw - 24px));
}
.memory-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #8a9675;
}
.memory-progress > progress {
  appearance: none;
  -webkit-appearance: none;
  background: #dfe7d3;
  flex: 1;
  min-width: 30px;
  height: 6px;
  accent-color: #78976b;
}
.memory-progress > progress::-webkit-progress-value,
.story-journal > progress::-webkit-progress-value {
  background: #78976b;
}
.memory-progress > progress::-webkit-progress-bar,
.story-journal > progress::-webkit-progress-bar {
  background: #dfe7d3;
}
.memory-progress > progress::-moz-progress-bar,
.story-journal > progress::-moz-progress-bar {
  background: #78976b;
}
.memory-glyph {
  font:
    92px/1.1 "Batang",
    "Noto Serif KR",
    serif;
  color: #35584a;
  text-align: center;
  padding: 25px 0 28px;
  background: radial-gradient(ellipse, #e7ecd8aa, transparent 68%);
  margin: 10px 0;
}
.memory-hint-button {
  display: block;
  margin: 14px auto 0;
  font-size: 12px !important;
  background: transparent !important;
  color: #818d72 !important;
  font-weight: 600 !important;
}
.memory-hint {
  font-size: 13px;
  line-height: 1.7;
  border-radius: 10px;
  padding: 12px;
  background: #eeedda;
  color: #7b815e;
}
.memory-feedback {
  border-radius: 16px;
  background: #eaf0e1;
  padding: 18px;
  text-align: center;
}
.memory-feedback > strong {
  display: block;
  font-size: 15px;
  color: #67865a;
}
.memory-feedback > b {
  display: block;
  font-size: 24px;
  margin: 12px 0;
  letter-spacing: -0.04em;
}
.memory-feedback p {
  font-size: 15px;
  line-height: 1.85;
  color: #60765f;
}
.memory-feedback small {
  font-size: 12px;
  color: #7e8c70;
  line-height: 1.7;
}
.memory-stamp {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 3px double #b8925d;
  border-radius: 50%;
  margin: 24px auto;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  color: #a28150;
  transform: rotate(-8deg);
  background: #f6edcf;
}
.memory-result {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin: 16px 0 10px;
}
.memory-result + p {
  font-size: 13px;
  text-align: center;
  color: #859073;
}
.memory-collected {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}
.memory-collected > span {
  font:
    32px "Batang",
    serif;
  display: grid;
  place-items: center;
  width: 54px;
  height: 62px;
  border-radius: 10px;
  background: #e7ead7;
  box-shadow: 0 3px 0 #d4dcc3;
}
.memory-next {
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #65835c;
}
.memory-note {
  font-size: 11px;
  line-height: 1.7;
  color: #949b86;
  text-align: center;
}
.memory-workshop-status {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: 12px;
  padding: 14px;
  background: #e8eddc;
  font-size: 14px;
}
.memory-workshop-status > span {
  font-size: 12px;
  color: #7b896d;
}
.voxel-game-menu > [data-memory="open"] {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid #c8d2b8;
  background: #e7edd9;
  color: #3f6547;
  padding: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.voxel-game-menu > [data-memory="open"]:disabled {
  opacity: 0.55;
  cursor: default;
}
@media (max-width: 370px) {
  .voxel-stage .tree-objective {
    gap: 4px;
    padding-left: 8px;
  }
  .voxel-stage .tree-objective > strong {
    font-size: 11px;
  }
  .story-compass-button {
    min-width: 40px;
  }
  .memory-glyph {
    font-size: 76px;
    padding: 15px 0 20px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .memory-glyph {
    font-size: 60px;
    margin: 0;
    padding: 8px;
  }
  .memory-dialog .story-dialog-head {
    margin-bottom: 12px;
  }
}


/* source: chapter-one.css */
/* The optional route belongs in the journal, never over the walking view. */
.chapter-route {
  border-block: 1px solid #d8cfb8;
  margin-block: 12px;
  padding-block: 10px;
  color: #304e40;
}
.chapter-route p { margin: 0 0 8px; line-height: 1.65; }
.chapter-route summary { min-height: 44px; align-content: center; cursor: pointer; font-weight: 700; }
.chapter-route summary:focus-visible { outline: 3px solid #876628; outline-offset: 2px; }
.chapter-route ol { list-style: none; margin: 6px 0 12px; padding: 0; }
.chapter-route li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-left: 2px solid #c5cbb9; }
.chapter-route li > span { display: grid; place-items: center; height: 32px; background: #e8e4d4; border-radius: 5px; }
.chapter-route li b { font-size: 14px; }
.chapter-route li small { font-size: 12px; white-space: nowrap; }
.chapter-route li[data-status="current"] { background: #e0ebdf; border-color: #38654d; }
.chapter-route li[data-status="done"] > span { background: #d6e0cd; }
.chapter-route details > small { display: block; font-size: 12px; line-height: 1.5; }

/* A field notebook stays at the edge; the story world remains the main view. */
.story-cinematic {
  position: fixed;
  inset: auto auto max(28px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
  margin: 0;
  width: min(440px, calc(100vw - 56px));
  max-height: min(470px, calc(100dvh - 100px));
  padding: 22px;
  border: 1px solid #e2d7bb;
  border-radius: 6px 22px 22px 22px;
  background: #fcf7e9;
  color: #263e36;
  box-shadow: 0 14px 60px #163d3652;
}
.story-cinematic::backdrop {
  background: #173c321c;
  backdrop-filter: none;
}
.voxel-stage:has(.story-cinematic[open]) .voxel-gate,
.voxel-stage:has(.story-commission[open]) .voxel-gate {
  display: none;
}
.story-cinematic .story-dialog-head {
  margin-bottom: 16px;
}
.story-cinematic .story-dialog-head h2 {
  font-size: 23px;
  line-height: 1.35;
}
.story-cinematic .story-dialog-head small {
  font-size: 10px;
  color: #8e7956;
  letter-spacing: 0.09em;
}
.story-cinematic .story-step {
  display: none;
}
.story-cinematic .story-quest-copy p {
  font-size: 16px;
  line-height: 1.75;
}
.story-cinematic .story-primary {
  margin: 14px 0 0;
  min-height: 48px;
  border-radius: 9px;
  background: #2d6356;
}
.story-cinematic .story-success-glyph {
  font-size: 48px;
  padding: 6px 0;
}
.story-cinematic .story-success {
  padding: 0;
}
.story-field-note {
  display: flex;
  gap: 20px;
  align-items: center;
  text-align: left;
}
.story-field-glyph {
  flex: 0 0 88px;
  font:
    78px/1.2 "Noto Serif KR",
    "Batang",
    serif;
  color: #426e5a;
}
.story-field-note b {
  font-size: 18px;
  color: #315648;
}
.story-field-note p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #56675a;
}
.story-commission {
  width: min(520px, calc(100vw - 24px));
  text-align: center;
  background: #fcf7e9;
  border-color: #d7c9a5;
}
.story-commission .story-dialog-head {
  text-align: left;
}
.commission-seal {
  display: grid;
  place-items: center;
  margin: 12px auto 16px;
  width: 76px;
  height: 76px;
  border: 2px solid #b98c55;
  border-radius: 50%;
  background: #eaddbd;
  color: #896338;
  font:
    44px "Noto Serif KR",
    "Batang",
    serif;
}
.commission-speaker {
  margin: 0 0 10px;
  color: #8d7954;
  font-size: 12px;
}
.commission-quote {
  font-family: "Noto Serif KR", "Batang", serif;
  font-size: 20px;
  line-height: 1.8;
  color: #334e43;
}
.commission-rewards {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 24px 0 8px;
  padding-top: 18px;
  border-top: 1px dashed #d4c8aa;
}
.commission-rewards span {
  flex: 1;
  font-size: 11px;
  color: #8a7d60;
}
.commission-rewards b {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  color: #3a5b4c;
}
.story-discovery {
  position: absolute;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(100px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 22px 13px 15px;
  border: 1px solid #f0d49b;
  border-radius: 12px;
  background: #fbf4dfef;
  color: #395747;
  pointer-events: none;
  box-shadow: 0 8px 30px #173f3429;
  animation: discovery-arrive 0.4s ease-out;
  z-index: 3;
}
.story-discovery[hidden] {
  display: none;
}
.story-discovery > span {
  font:
    45px "Noto Serif KR",
    "Batang",
    serif;
  color: #aa804a;
}
.story-discovery small {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  color: #8b805f;
}
.story-discovery b {
  font-size: 17px;
}
.story-atelier .voxel-crosshair {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff5da;
  font-size: 0;
  box-shadow: 0 0 0 4px #fff5da24;
}
.story-atelier .tree-objective {
  background: #173e34e6;
  border: 1px solid #b9c8a950;
}
.story-atelier .voxel-context button {
  background: #f9f0d6;
  color: #294b3e;
  border: 1px solid #d6be86;
  box-shadow: 0 3px 0 #6f6741;
}
@keyframes discovery-arrive {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chapter-shot {
  position: absolute;
  z-index: 22;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 8px 10px 8px 20px;
  border: 1px solid #c8b77e70;
  border-radius: 14px;
  background: #183d32ed;
  color: #fff5db;
  box-shadow: 0 6px 25px #10281f30;
  font-size: 15px;
}
.chapter-shot[hidden],
.chapter-av-settings[hidden] {
  display: none;
}
.chapter-shot button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #ddc99380;
  border-radius: 9px;
  background: #fff3d8;
  color: #28483b;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.chapter-shot small {
  opacity: 0.7;
  margin-left: 6px;
}
.chapter-directing .voxel-context,
.chapter-directing .voxel-touch,
.chapter-directing .voxel-crosshair,
.chapter-directing .story-discovery,
.chapter-directing .voxel-toast {
  visibility: hidden;
  pointer-events: none;
}
.chapter-directing .tree-objective {
  pointer-events: none;
}
.chapter-av-settings {
  display: grid;
  min-inline-size: 0;
  gap: 12px;
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid #597c5c50;
  border-radius: 12px;
  text-align: left;
  color: #254638;
  background: #f5f2e5;
}
.chapter-av-settings legend {
  font-weight: 800;
  font-size: 14px;
  padding: 0 6px;
}
.chapter-av-settings label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  white-space: nowrap;
}
.chapter-av-settings input[type="range"] {
  flex: 1;
  width: 0;
  min-width: 50px;
  min-height: 44px;
  accent-color: #356e53;
}
.chapter-av-settings input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #356e53;
}
.chapter-av-settings output {
  min-width: 40px;
  font-size: 13px;
}
.chapter-av-settings small {
  font-size: 12px;
  line-height: 1.5;
  color: #5b7064;
}
.chapter-av-settings button {
  min-height: 44px;
}
.chapter-shot button:focus-visible,
.chapter-av-settings :focus-visible {
  outline: 3px solid #d4a746;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .chapter-shot {
    gap: 8px;
    width: calc(100% - 24px);
    max-width: none;
    padding-left: 12px;
    font-size: 13px;
    justify-content: space-between;
  }
  .chapter-shot small {
    display: none;
  }
  .chapter-shot button {
    font-size: 12px;
    padding: 8px;
  }
}
@media (max-width: 600px) {
  .story-cinematic {
    inset: auto 12px max(14px, env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 90px);
    padding: 18px;
  }
  .story-field-glyph {
    flex-basis: 72px;
    font-size: 66px;
  }
  .story-cinematic .story-dialog-head h2 {
    font-size: 20px;
  }
  .commission-quote {
    font-size: 17px;
  }
  .story-discovery {
    left: 16px;
    bottom: 110px;
    padding: 10px 16px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .story-cinematic {
    inset: auto 12px 12px auto;
    width: min(390px, calc(100vw - 145px));
    max-height: calc(100dvh - 24px);
    padding: 14px 18px;
  }
  .story-cinematic .story-dialog-head {
    margin-bottom: 8px;
  }
  .story-field-glyph {
    flex-basis: 58px;
    font-size: 52px;
  }
  .story-field-note {
    gap: 12px;
  }
  .story-field-note p {
    font-size: 13px;
    line-height: 1.5;
  }
  .story-cinematic .story-dialog-head h2 {
    font-size: 18px;
  }
  .story-cinematic .story-primary {
    margin-top: 10px;
  }
  .story-discovery {
    left: 120px;
    bottom: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-discovery {
    animation: none;
  }
}
.second-map-open { position:absolute;z-index:12;right:16px;top:68px;min-height:44px;padding:8px 16px;border:1px solid #819f91;background:#e8efe2;color:#274d43;font-family:inherit;font-size:14px;font-weight:700; }
.second-route-tabs { display:flex;gap:8px;margin:8px 0 12px; }
.second-route-tabs button { flex:1;min-height:44px;border:1px solid #b8c9b5;background:#f6f4e9;color:#355c4d;font-weight:700; }
.second-route-tabs button[aria-pressed="true"] { background:#365d4e;color:#fff9e7; }
.second-route-map { background:#eff3e8;border:1px solid #d6e0d1;border-radius:8px; }
.second-route-map svg { display:block;width:100%;height:auto;max-height:50dvh; }
.second-route-map text { font:700 20px "Malgun Gothic",sans-serif;fill:#345147;paint-order:stroke;stroke:#eff3e8;stroke-width:5;stroke-linejoin:round; }
.second-route-legend { display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;font-size:13px;color:#5c7163; }


/* source: block-ui.css */
/* Original block UI: readable Korean labels, beveled controls, separate settings. */
.voxel-stage {
  --block-ink: #264b45;
  --block-edge: #91afa0;
  --block-face: #fffdf5;
  --block-green: #32876d;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Dotum", sans-serif;
}
.voxel-stage .voxel-gate {
  background: linear-gradient(120deg, #e9f7edb8, #f9f6df80 50%, #d7f3f0a3);
  backdrop-filter: none;
}
.voxel-stage .voxel-gate-card {
  position: relative;
  width: min(740px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-content: center;
  column-gap: 48px;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  scrollbar-color: #a3a69c #252b25;
}
.voxel-stage .voxel-gate-card > :not(.voxel-pause-world) { grid-column: 1; }
.voxel-stage .voxel-gate h2 {
  color: #214c43;
  font-size: 30px;
  line-height: 1.25;
  text-shadow: 0 2px #fff9;
  letter-spacing: -.04em;
  margin: 0 0 20px;
}
.voxel-stage .voxel-gate-tag { color: #2b6d5c; }
.voxel-stage .voxel-gate-card > p { color: #36584c; }
.voxel-stage .voxel-gate button,
.voxel-stage .voxel-controls-guide summary {
  appearance: none;
  border: 2px solid var(--block-edge);
  border-radius: 4px;
  background: var(--block-face);
  box-shadow: inset 0 2px #fff, inset 0 -4px #dce5d5, 0 3px 0 #65847235, 0 6px 14px #355a4210;
  color: var(--block-ink);
  text-shadow: none;
  min-height: 48px;
  padding: 10px 12px 14px;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  transition: none;
}
.voxel-stage .voxel-gate button:hover:not(:disabled),
.voxel-stage .voxel-controls-guide summary:hover {
  background: #e5f5eb;
  color: #172212;
}
.voxel-stage .voxel-gate button:active:not(:disabled) {
  box-shadow: inset 0 3px #c6ddcc, inset 0 -2px #f4faf0;
  transform: translateY(2px);
}
.voxel-stage .voxel-gate :is(button,input,summary):focus-visible {
  outline: 3px solid #246a5a;
  outline-offset: 3px;
}
.voxel-stage .voxel-gate button:disabled {
  opacity: 1;
  color: #718476;
  background: #e2e9dd;
  box-shadow: inset 0 2px #f0f5eb, inset 0 -4px #cdd8c8;
  cursor: not-allowed;
}
.voxel-stage .voxel-gate .voxel-play,
.voxel-stage .voxel-gate .story-entry {
  margin: 0 0 8px;
  background: var(--block-green);
  color: #fff;
  border-color: #236c57;
  box-shadow: inset 0 3px #6bb79a, inset 0 -5px #246b56, 0 4px 0 #285b4125;
  text-shadow: 0 1px #235c4b;
  text-align: center;
  justify-content: center;
}
.voxel-stage .voxel-play:hover,
.voxel-stage .voxel-gate .story-entry:hover {
  background: #419b7c !important;
  color: white !important;
}
.voxel-stage .voxel-play > span { display: none; }
.voxel-stage .voxel-game-menu { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.voxel-stage .voxel-game-menu .tree-hud-actions { gap: 8px; }
.voxel-stage .voxel-menu-tools { order: 5; gap: 8px; }
.voxel-stage .voxel-menu-tools [data-voxel="build"],
.voxel-stage .voxel-menu-tools [data-voxel="fullscreen"],
.voxel-stage .voxel-menu-tools [data-art],
.voxel-stage .chapter-av-settings,
.voxel-stage .voxel-controls-guide,
.voxel-stage [data-voxel="menu-back"],
.voxel-stage .voxel-settings-title,
.voxel-stage .voxel-fullscreen-note { display: none; }
.voxel-stage .voxel-pause-world {
  grid-column: 2;
  grid-row: 1 / span 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #254c43;
  gap: 10px;
  text-align: center;
  min-width: 0;
  padding: 18px;
  border: 2px solid #fff9;
  border-radius: 8px;
  background: linear-gradient(145deg, #fffff5ed, #e4f6e9e8);
  box-shadow: 0 12px 36px #2853451a, inset 0 1px #fff;
}
.voxel-stage:not(.voxel-entered) .voxel-pause-state { display: none; }
.voxel-world-label {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.06em;
  text-shadow: 0 2px #fff;
}
.voxel-pause-location { font-size: 16px; line-height: 1.5; word-break: keep-all; }
.voxel-pause-state { font-size: 12px; color: #526f62; }
.voxel-stage .voxel-pause-world .tree-growth-status {
  margin: 8px 0 0;
  width: 100%;
  background: #f9fcf2;
  color: #294f40;
  border: 1px solid #b8d0b6;
  box-shadow: inset 0 2px #fff, inset 0 -3px #e3edda;
  padding: 10px;
  text-align: left;
}
.voxel-stage .voxel-pause-world .tree-growth-status :is(small,i) { color: #526d4b; font-size: 12px; margin-top: 4px; }
.voxel-stage .tree-growth-status progress { border-radius: 0; accent-color: #65a878; }
.voxel-stage .tree-growth-status progress::-webkit-progress-bar { background: #dde9d6; }
.voxel-stage .tree-growth-status progress::-webkit-progress-value { background: #65a878; }
.voxel-stage .voxel-pixel-avatar { position: relative; width: 140px; height: 170px; margin: 12px 0; filter: drop-shadow(5px 7px #3e876322); }
.voxel-pixel-avatar::before { content: ""; position: absolute; inset: 18px -18px -4px; background: radial-gradient(ellipse, #fff8d2 25%, #c7ead180 65%, transparent 66%); }
.voxel-pixel-avatar::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: -6px; height: 6px; background: #89bca25c; }
.voxel-pixel-avatar i { position: absolute; display: block; border: 2px solid #20271d; border-radius: 0; }
.pixel-head { top: 12px; left: 45px; width: 50px; height: 48px; background: #f1cf9b; box-shadow: inset -6px -4px #d8ad7c; }
.pixel-head::after { content: ""; position: absolute; width: 12px; height: 3px; background: #a96d48; left: 17px; top: 34px; box-shadow: -10px -5px #e9b18b, 10px -5px #e9b18b; }
.pixel-head::before { content: ""; position: absolute; width: 6px; height: 6px; left: 9px; top: 21px; background: #253326; box-shadow: 22px 0 #253326; }
.pixel-hair { top: 6px; left: 43px; width: 54px; height: 18px; background: #74543c; box-shadow: inset -8px 0 #563e2d, inset 0 4px #927047; }
.pixel-body { top: 61px; left: 43px; width: 54px; height: 59px; background: #467d70; box-shadow: inset -10px 0 #305d53; }
.pixel-body::after { content: ""; position: absolute; top: 36px; width: 50px; height: 7px; background: #b1a173; }
.pixel-arm { top: 62px; width: 22px; height: 59px; background: linear-gradient(#467d70 70%, #d2ab7d 70%); }
.pixel-arm.pixel-left { left: 20px; }
.pixel-arm.pixel-right { right: 20px; }
.pixel-leg { top: 120px; width: 25px; height: 47px; background: linear-gradient(#555c49 76%, #30382e 76%); }
.pixel-leg.pixel-left { left: 44px; }
.pixel-leg.pixel-right { right: 44px; }
/* Settings have their own page; closed controls cannot receive keyboard focus. */
.voxel-stage.voxel-settings-open .voxel-gate-card { display: block; width: min(520px, 100%); padding: 18px; background: #f6fbf0f5; border: 2px solid #a9c3ac; border-radius: 6px; box-shadow: inset 0 3px #fff, 0 16px 40px #294c3322; }
.voxel-stage.voxel-settings-open .voxel-gate-card > :not(.voxel-game-menu) { display: none; }
.voxel-stage.voxel-settings-open .voxel-game-menu > :is(.tree-hud-actions,[data-voxel="settings"],[data-story],[data-memory]) { display: none; }
.voxel-stage.voxel-settings-open [data-voxel="menu-back"] { display: block; order: -5; align-self: start; min-width: 88px; }
.voxel-stage.voxel-settings-open .voxel-settings-title { display: block; order: -4; color: #264e43; font-size: 24px; margin: 8px 0; }
.voxel-stage.voxel-settings-open .voxel-menu-tools { order: -3; }
.voxel-stage.voxel-settings-open .voxel-menu-tools :is([data-voxel="home"],[data-voxel="exit"]) { display: none; }
.voxel-stage.voxel-settings-open .voxel-menu-tools :is([data-voxel="build"],[data-voxel="fullscreen"],[data-art]) { display: block; }
.voxel-stage.voxel-settings-open .chapter-av-settings:not([hidden]) { display: grid; margin: 8px 0; background: #eaf3e3; border: 1px solid #b4cbae; border-radius: 4px; color: #2e5243; }
.voxel-stage.voxel-settings-open .chapter-av-settings small { color: #526b4e; }
.voxel-stage.voxel-settings-open .chapter-av-settings input { accent-color: #80b957; }
.voxel-stage.voxel-settings-open .voxel-controls-guide { display: block; color: #2e5243; }
.voxel-stage.voxel-settings-open .voxel-controls-guide p { color: #526b4e; padding: 10px 0; margin: 0; }
.voxel-stage.voxel-settings-open .voxel-fullscreen-note:not([hidden]) { display: block; color: #182811; }
/* HUD retains its compact placement; only its visual language changes. */
.voxel-stage :is(.voxel-toolbar button,.tree-objective,.story-compass-button,.voxel-context button,.voxel-toast,.chapter-shot,.chapter-shot button,.voxel-hotbar,.voxel-hotbar button,.voxel-touch-actions button) {
  border-radius: 0;
  border: 2px solid #131c12;
  box-shadow: inset 0 2px #ffffff30, inset 0 -3px #0005;
  backdrop-filter: none;
}
.voxel-stage :is(.voxel-toolbar button,.tree-objective,.story-compass-button,.voxel-toast,.chapter-shot) { background: #263025d9; color: white; }
.voxel-stage :is(.voxel-context button,.chapter-shot button) { background: #d7dacd; color: #253020; }
.voxel-stage .voxel-context button { font-size: 15px; font-weight: 800; }
.voxel-stage :is(.story-dialog,.tree-dialog) { border-radius: 0; border: 3px solid #263425; box-shadow: inset 0 3px #fff8, 5px 5px #13200e70; }
.voxel-stage :is(.story-dialog,.tree-dialog) button { border-radius: 0; }
.voxel-stage .voxel-hotbar button[aria-pressed="true"] { outline: 3px solid #f4f4e7; outline-offset: -3px; }
.voxel-stage:has(.voxel-gate:not([hidden])) :is(.voxel-top,.tree-objective,.story-compass-button,.voxel-toast) { visibility: hidden; }
.voxel-stage.chapter-directing :is(.tree-objective,.story-compass-button,.voxel-top,.voxel-hotbar) { visibility: hidden; }
.voxel-stage.chapter-directing .chapter-shot {
  width: min(660px, calc(100% - 32px));
  padding: 14px 16px 18px;
  gap: 16px;
  background: #fffdf2f2;
  color: #254c42;
  border: 2px solid #a2bfa5;
  border-radius: 5px;
  box-shadow: inset 0 2px #fff, 0 8px 28px #2c634328;
}
.chapter-caption { flex: 1; min-width: 0; display: grid; gap: 5px; }
.voxel-stage .chapter-caption small { margin: 0; color: #477956; font-size: 12px; font-weight: 800; opacity: 1; display: block; }
.chapter-caption > span { font-size: 17px; font-weight: 800; line-height: 1.5; word-break: keep-all; }
.chapter-caption > b { color: #61764f; font-size: 12px; font-weight: 600; }
.chapter-caption > b:empty { display: none; }
.voxel-stage .chapter-shot button { border: 1px solid #b3c7ae; background: #edf4e5; color: #355e48; box-shadow: inset 0 2px #fff, inset 0 -3px #d8e6cf; padding: 8px 12px; }
.chapter-shot-progress { position: absolute; bottom: 0; left: 0; width: var(--shot-progress, 0%); height: 3px; background: #69a482; }
.voxel-stage .chapter-shot[data-tone="gold"] { border-color: #ccb577; background: #fffbedf5; }
.voxel-stage .chapter-shot[data-tone="silver"] { border-color: #a5c3ce; background: #f4fcfff5; }
.voxel-stage .chapter-shot[data-tone="iron"] { border-color: #a6b9b0; background: #f7faf3f5; }
.chapter-shot[data-tone="gold"] .chapter-shot-progress { background: #b28d39; }
.chapter-shot[data-tone="silver"] .chapter-shot-progress { background: #6f9daa; }
@media (max-width: 600px) {
  .voxel-stage .chapter-shot { padding: 10px 12px 14px; gap: 8px; }
  .chapter-caption > span { font-size: 15px; }
  .voxel-stage .chapter-shot button { padding: 8px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .voxel-stage .chapter-shot { bottom: max(8px, env(safe-area-inset-bottom)); padding: 6px 12px 10px; }
  .chapter-caption { gap: 2px; }
  .chapter-caption > span { font-size: 14px; }
}
.voxel-stage [hidden] { display: none !important; }
/* Keep the workshop visible while its workbench is in use. */
.voxel-stage:has(.memory-in-workshop[open]) :is(.voxel-gate,.voxel-top,.tree-objective,.voxel-context,.voxel-crosshair,.voxel-toast) { visibility: hidden; pointer-events: none; }
.voxel-stage .memory-in-workshop {
  position: fixed; inset: auto auto 18px 18px; margin: 0;
  width: min(360px, calc(100vw - 36px)); max-height: calc(100dvh - 36px);
  padding: 18px; border: 2px solid #a9c7b3; border-radius: 6px;
  background: #fffdf3f5; color: #294e42;
  box-shadow: 0 12px 35px #244d3520; overflow: auto;
}
.memory-in-workshop::backdrop { background: #23433318; backdrop-filter: none; }
.memory-in-workshop .story-dialog-head { margin-bottom: 10px; }
.memory-in-workshop .story-dialog-head h2 { font-size: 19px; line-height: 1.35; }
.memory-in-workshop .story-dialog-head small { font-size: 11px; }
.memory-in-workshop .story-dialog-head button { min-width: 44px; min-height: 44px; }
.memory-in-workshop .memory-glyph { font-size: 72px; margin: 6px 0; padding: 4px 0; line-height: 1.15; }
.memory-in-workshop .memory-hint-button { margin: 6px auto 0; min-height: 44px; }
.memory-in-workshop .story-choices { gap: 7px; }
.memory-in-workshop .story-choices button { min-height: 44px; padding: 8px; font-size: 16px; }
.memory-in-workshop .memory-scene-clue { margin: 0 0 10px; font-size: 13px; color: #557363; line-height: 1.5; }
.memory-in-workshop .memory-stamp { width: 76px; height: 76px; font-size: 22px; margin: 8px auto; }
.memory-in-workshop .memory-feedback { padding: 12px; }
.memory-in-workshop .memory-feedback p { margin: 8px 0; font-size: 14px; }
.memory-in-workshop .memory-note, .memory-in-workshop .memory-next { font-size: 12px; line-height: 1.5; }
.craft-dialog .craft-steps { font-size: 12px; color: #657c68; margin-bottom: 12px; letter-spacing: .03em; }
.craft-dialog p { font-size: 15px; line-height: 1.6; }
.craft-dialog > small { display: block; font-size: 12px; color: #586d60; line-height: 1.5; margin: 10px 0; }
.craft-dialog > button { width: 100%; min-height: 44px; margin-top: 8px; }
.craft-word { display: grid; justify-items: center; gap: 2px; padding: 8px; background: #edf3e7; border-radius: 6px; }
.craft-word b { font-family: "Noto Serif KR", "Batang", serif; font-size: 68px; line-height: 1.25; }
.craft-word span { color: #426b55; font-weight: 700; }
.craft-writing { display: block; width: min(230px, 100%); aspect-ratio: 1; margin: 0 auto 10px; background: #fffef9; border: 1px solid #c3d5bb; touch-action: none; user-select: none; }
.craft-writing polyline { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.craft-grid { stroke: #e1e7da; stroke-dasharray: 2 2; stroke-width: .5; }
.craft-guide { stroke: #e0e7d9; }
.craft-current { stroke: #c49c51; stroke-dasharray: 1 7; }
.craft-ink { stroke: #366b54; }
.craft-user { stroke: #28534a; opacity: .75; }
.craft-start { fill: #cb9841; stroke: white; stroke-width: 1; }
.craft-arrow { fill: #8d642d; font-size: 12px; text-anchor: middle; }
.craft-tools { display: flex; gap: 8px; }
.craft-tools button { flex: 1; min-height: 44px; font-size: 13px; }
.craft-blueprint { display: block; width: 100%; max-height: 165px; background: #eef4e8; border-radius: 6px; }
.craft-dialog .craft-status { margin: 8px 0 0; color: #825929; font-size: 13px; }
.craft-status:empty { display: none; }
.expedition-map-toggle { position: absolute; z-index: 8; top: max(62px, calc(env(safe-area-inset-top) + 56px)); right: max(12px, env(safe-area-inset-right)); min-height: 44px; padding: 8px 12px; border: 1px solid #abc2a1; border-bottom: 3px solid #739775; background: #f5f7e8ed; color: #315344; font-family: inherit; font-size: 13px; font-weight: 700; }
.chapter-directing .expedition-map-toggle { visibility: hidden; }
.voxel-stage .expedition-dialog { width: min(470px, calc(100vw - 28px)); padding: 20px; max-height: 78dvh; color: #284a3c; }
.expedition-dialog p { font-size: 16px; line-height: 1.65; }
.expedition-dialog .story-choices { display: grid; gap: 8px; }
.expedition-dialog button { min-height: 46px; }
.expedition-clue { padding: 18px; background: #edf3e3; border-left: 4px solid #9bb481; margin-bottom: 14px; }
.expedition-clue span { font-size: 12px; color: #52705c; }
.expedition-clue p { margin: 6px 0 0; font-weight: 700; }
.expedition-slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.expedition-slots span { flex: 1; min-width: 60px; padding: 12px 5px; border: 2px dashed #b9cbb0; text-align: center; font-size: 13px; background: #f4f5e9; }
.expedition-slots .filled { background: #dcebd1; border-style: solid; }
.expedition-slots .current { border-color: #739b64; }
.expedition-baskets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.expedition-baskets section { display: grid; gap: 12px; padding: 12px 5px; text-align: center; background: #f0edda; }
.expedition-baskets section > span { font-size: 22px; font-weight: 800; }
.expedition-baskets section > div { display: flex; gap: 4px; justify-content: center; }
.expedition-baskets button { min-width: 44px; }
.expedition-done { padding: 18px; background: #deedcf; font-size: 24px; font-weight: 800; }
.expedition-status { color: #815e25; min-height: 1em; }
.expedition-status:empty { display: none; }
.voxel-stage .expedition-map-dialog { width: min(560px, calc(100vw - 28px)); }
.expedition-map { display: block; width: 100%; max-height: 47dvh; background: #eaf0db; border: 1px solid #c6d3b4; }
.expedition-map text { font: 700 15px sans-serif; fill: #254637; }
.expedition-dialog .expedition-map-note, .expedition-time { font-size: 13px; color: #65795e; }
@media (max-width: 600px) {
  .voxel-stage .expedition-dialog { padding: 14px; max-height: 66dvh; }
  .expedition-dialog p { font-size: 15px; }
  .expedition-slots span { font-size: 12px; }
}
.craft-dialog .craft-record { font-size: 13px; }
.craft-projects { display: grid; gap: 8px; margin: 6px 0 16px; }
.craft-projects button { min-height: 48px; text-align: left; background: #e8f1e1; color: #294e42; border: 1px solid #b7cbb1; padding: 10px 12px; font-size: 15px; }
.story-learning-goal { padding: 10px 12px; background: #e8f1e1; border-left: 3px solid #83a273; }
.story-axe-inspection { display: flex; align-items: center; gap: 20px; padding: 12px; background: #eef2e5; }
.story-axe-inspection dl { margin: 0; font-size: 15px; }
.story-axe-inspection dt { color: #5c7363; font-size: 12px; margin-top: 8px; }
.story-axe-inspection dd { margin: 2px 0 8px; font-weight: 700; }
.story-inspection-art { position: relative; width: 90px; min-width: 90px; height: 140px; }
.story-inspection-art i { position: absolute; width: 12px; height: 110px; background: #97724e; top: 20px; left: 36px; transform: rotate(15deg); }
.story-inspection-art b { position: absolute; width: 54px; height: 38px; top: 23px; left: 37px; background: #b2c4c1; border-right: 5px solid #d5e5db; transform: rotate(15deg); }
[data-tone="gold"] .story-inspection-art b { background: #d8b35b; border-color: #f1d78d; }
[data-tone="iron"] .story-inspection-art i { background: #6e5036; }
[data-tone="iron"] .story-inspection-art b { background: #7e9691; border-color: #a7b8ad; }
@media (max-width: 600px) {
  .voxel-stage .memory-in-workshop.craft-dialog { max-height: 78dvh; }
  .craft-writing { width: 200px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .craft-writing { width: 160px; }
  .craft-dialog .craft-steps { margin-bottom: 4px; }
  .craft-dialog .craft-instruction { margin: 6px 0; }
}

.voxel-stage .memory-in-workshop.expedition-transfer-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 20px;
  overflow-y: auto;
}
.expedition-transfer-dialog .story-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.expedition-transfer-dialog .story-choices button { min-height: 52px; padding: 10px; line-height: 1.45; }
.expedition-transfer-dialog .expedition-baskets section > div { flex-wrap: wrap; }
@media (max-width: 600px) {
  .voxel-stage .memory-in-workshop.expedition-transfer-dialog { padding: 16px; }
  .expedition-transfer-dialog .story-dialog-head h2 { font-size: 22px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .memory-in-workshop.expedition-transfer-dialog { width: min(820px, calc(100vw - 24px)); padding: 12px 16px; max-height: calc(100dvh - 16px); }
  .expedition-transfer-dialog .story-dialog-head { position: sticky; top: -12px; z-index: 1; background: #fbfaf0; padding-bottom: 8px; }
}
@media (max-width: 600px) {
  .voxel-stage .memory-in-workshop { inset: auto 12px max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); max-height: 56dvh; padding: 12px; }
  .memory-in-workshop .memory-glyph { font-size: 56px; margin: 4px 0; }
  .memory-in-workshop .story-dialog-head h2 { font-size: 17px; }
  .memory-in-workshop .memory-scene-clue { font-size: 12px; margin-bottom: 6px; }
}
@media (max-width: 600px), (max-height: 500px) {
  .memory-in-workshop .story-dialog-head { position: sticky; top: -12px; z-index: 2; background: #fffdf3; padding: 6px 0; }
  .memory-in-workshop > .story-primary { position: sticky; bottom: -12px; z-index: 1; min-height: 44px; box-shadow: 0 -6px 12px #fffdf3; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .memory-in-workshop { inset: 10px auto 10px 10px; width: 330px; max-height: calc(100dvh - 20px); padding: 12px; }
  .memory-in-workshop .memory-glyph { font-size: 44px; }
}
@media (max-width: 600px) {
  .voxel-stage .voxel-gate-card { width: min(360px, 100%); display: block; padding: 14px; }
  .voxel-stage .voxel-pause-world { display: block; margin-top: 12px; padding: 0; border: 0; background: none; box-shadow: none; }
  .voxel-stage .voxel-pause-world > :not(.tree-growth-status) { display: none; }
  .voxel-stage .voxel-gate h2 { font-size: 26px; margin-bottom: 16px; }
  .voxel-stage .voxel-gate button { min-height: 48px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .voxel-gate-card { width: min(720px, 100%); column-gap: 28px; padding: 10px; align-content: start; }
  .voxel-stage .voxel-gate h2 { font-size: 23px; margin-bottom: 10px; }
  .voxel-stage .voxel-game-menu { gap: 5px; }
  .voxel-stage .voxel-gate button { min-height: 44px; padding: 8px 10px 11px; font-size: 13px !important; }
  .voxel-stage .voxel-pixel-avatar { transform: scale(.7); margin: -20px 0; }
  .voxel-stage .voxel-pause-world { gap: 4px; padding: 8px; }
  .voxel-world-label { font-size: 26px; }
  .voxel-stage .expedition-dialog { width: min(480px, calc(100vw - 28px)); }
}
.voxel-stage .assessment-dialog { inset: 0; margin: auto; width: min(500px, calc(100vw - 24px)); max-height: min(730px, calc(100dvh - 28px)); padding: 20px; }
.assessment-dialog p { line-height: 1.65; font-size: 16px; }
.assessment-dialog .craft-word b { font-size: 72px; }
.assessment-dialog .assessment-revealed-word { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 8px 0; padding: 8px; }
.assessment-dialog .assessment-revealed-word b { font-size: 48px; }
.assessment-progress { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 6px; color: #50735c; font-size: 13px; }
.assessment-dialog progress { width: 100%; height: 7px; accent-color: #6f9872; }
.assessment-dialog progress::-webkit-progress-value { background: #6f9872; }
.assessment-dialog progress::-moz-progress-bar { background: #6f9872; }
.voxel-stage .assessment-dialog::backdrop { background: #e9efddf7; backdrop-filter: blur(12px); }
.assessment-prompt { font-weight: 700; }
.assessment-skill-list { display: flex; gap: 6px; margin: 14px 0; }
.assessment-skill-list span { flex: 1; text-align: center; padding: 12px 4px; background: #edf2df; font-size: 13px; font-weight: 700; }
.assessment-writing, .assessment-ink-review { display: block; width: min(240px, 100%); margin: 12px auto; aspect-ratio: 1; border: 1px solid #adc3a5; background: #fffef7; fill: none; }
.assessment-writing { touch-action: none; user-select: none; cursor: crosshair; }
.assessment-writing polyline, .assessment-ink-review polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.assessment-writing .craft-guide, .assessment-ink-review .craft-guide { stroke: #ced6c4; stroke-width: 5; }
.assessment-writing .craft-current { stroke: #b89b54; }
.assessment-writing .craft-ink, .assessment-ink-review .craft-ink { stroke: #2b765a; }
.assessment-writing .craft-user { stroke: #315e4c; }
.assessment-writing .craft-start { fill: #caa15b; stroke: #fff; stroke-width: 1; }
.assessment-tools { display: flex; gap: 8px; }
.assessment-tools button { flex: 1; min-height: 44px; }
.assessment-dialog .assessment-note { font-size: 12px; color: #617763; }
.assessment-feedback, .assessment-recommend { padding: 12px; background: #eaf2dc; border-left: 3px solid #8fac75; }
.assessment-hint { padding: 12px; background: #f5edd8; }
.assessment-hint-button, .assessment-skip { margin: 12px 5px 0 0; font-size: 13px !important; }
.assessment-helpers { display: flex; flex-wrap: wrap; gap: 6px; }
.assessment-helpers button { flex: 1; margin-right: 0; }
.assessment-dialog .story-choices { display: grid; gap: 8px; }
.assessment-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.assessment-totals section { padding: 12px 8px; background: #edf2e0; }
.assessment-totals span { display: block; font-size: 12px; line-height: 1.5; min-height: 36px; word-break: keep-all; }
.assessment-totals b { display: block; margin-top: 8px; font-size: 28px; }
.assessment-totals b small { font-size: 14px; font-weight: 400; }
.assessment-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 700; }
.assessment-details article { padding: 14px 0; border-top: 1px solid #d6e1cb; }
.assessment-details p { font-size: 13px; }
.assessment-details .assessment-ink-review { width: 150px; margin-left: 0; }
@media (max-width: 600px) {
  .voxel-stage .assessment-dialog { width: calc(100vw - 24px); max-height: 80dvh; padding: 12px; }
  .assessment-writing, .assessment-ink-review { width: min(224px, 30dvh); }
  .assessment-dialog p { font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .assessment-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 20px); padding: 12px; }
  .assessment-dialog .story-dialog-head { padding: 2px 0; margin-bottom: 6px; }
  .assessment-dialog .story-dialog-head h2 { margin: 2px 0; font-size: 17px; }
  .assessment-dialog .story-dialog-head small { font-size: 10px; }
  .assessment-dialog .assessment-progress { margin: 4px 0; font-size: 12px; }
  .assessment-writing, .assessment-ink-review { width: 155px; }
  .assessment-dialog .craft-word b { font-size: 48px; }
  .assessment-write-task { display: grid; grid-template-columns: minmax(220px,.9fr) minmax(0,1.1fr); gap: 14px; align-items: start; margin-top: 8px; }
  .assessment-write-controls { max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
  .assessment-write-main .assessment-prompt { font-size: 13px; margin: 0 0 6px; }
  .assessment-write-main > small { font-size: 11px; }
  .assessment-write-controls .story-primary, .assessment-write-controls .story-secondary, .assessment-write-controls .assessment-helpers button { margin-top: 6px; }
  .assessment-write-controls button { padding: 8px; font-size: 12px; }
  .assessment-write-controls .assessment-note { margin: 6px 0; font-size: 11px; }
  .assessment-answer-body.has-ink { display: grid; grid-template-columns: minmax(0,1fr) 166px; gap: 14px; align-items: start; }
  .assessment-answer-body p { font-size: 13px; line-height: 1.5; margin: 6px 0; }
  .assessment-answer-body .assessment-feedback { padding: 8px; font-size: 13px; margin-top: 8px; }
  .assessment-answer-body .assessment-revealed-word b { font-size: 36px; }
  .assessment-answer-ink .assessment-ink-review { width: 140px; margin: 4px auto; }
  .assessment-answer-ink .assessment-note { font-size: 11px; line-height: 1.35; margin: 4px 0; }
  .assessment-dialog > .story-primary { position: static; margin-top: 8px; }
}
.expedition-sample { margin: 12px 0; padding: 8px; text-align: center; background: #f4eedc; border: 1px solid #c4cbb6; }
.expedition-object { display: block; width: 120px; height: 88px; max-width: 100%; margin: 0 auto; }
.expedition-sample figcaption { font-size: 14px; color: #3e594a; }
.expedition-pair-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.expedition-pair-options button { min-height: 80px; padding: 6px; overflow-wrap: anywhere; }
.expedition-pair-options .expedition-object { width: 90px; height: 66px; }
.expedition-beats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 12px 0; }
.expedition-beats span { display: grid; gap: 6px; padding: 12px 4px; text-align: center; background: #e5edda; border-bottom: 4px solid #a7bb97; }
.expedition-beats small { color: #627c68; }
.expedition-beats b { font-size: 22px; }
.expedition-dialog .expedition-rhythm-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
.expedition-rhythm-options button { min-height: 64px; font-size: 20px; text-align: center; }
@media (max-width: 400px) {
  .expedition-pair-options { gap: 5px; }
  .expedition-pair-options button { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 350px) {
  .assessment-writing, .assessment-ink-review { width: 128px; }
  .assessment-answer-ink .assessment-ink-review { width: 128px; }
  .assessment-answer-body.has-ink { grid-template-columns: minmax(0,1fr) 140px; }
}
.story-choices.expedition-role-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.expedition-span {
  display: block;
  width: 100%;
  height: 115px;
  margin: 8px 0;
  background: #f0f4ed;
  border: 1px solid #c7d5c5;
}
.expedition-span text { font-size: 13px; font-family: inherit; fill: #395d53; }

/* Practice is a focused modal, not the small in-world workshop notebook. */
.voxel-stage .memory-in-workshop.craft-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(800px, calc(100vw - 28px)); max-height: calc(100dvh - 28px);
  padding: clamp(14px, 2vw, 28px); border-radius: 14px;
  background: #fffdf3; box-shadow: 0 24px 100px #102c3166;
}
.voxel-stage .craft-dialog::backdrop { background: #102c3173; backdrop-filter: blur(4px); }
.voxel-stage .craft-dialog .story-dialog-head { position: sticky; top: -14px; z-index: 2; background: #fffdf3; padding: 4px 0 12px; }
.voxel-stage .craft-dialog .story-dialog-head h2 { font-size: clamp(22px, 3vw, 32px); }
.voxel-stage .craft-dialog .story-dialog-head small { font-size: 13px; }
.voxel-stage .craft-dialog .story-dialog-head button { min-width: 60px; min-height: 48px; }
.voxel-stage .craft-dialog > button { min-height: 50px; }
.voxel-stage .craft-dialog .craft-word b { font-size: clamp(90px, 15vh, 150px); }
.voxel-stage .craft-dialog[data-stage="write"] { width: min(1180px, calc(100vw - 28px)); }
.craft-practice { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 28px; }
.craft-canvas-panel { display: grid; place-items: center; min-width: 0; }
.voxel-stage .craft-dialog .craft-writing { width: min(100%, 660px, calc(100dvh - 224px)); height: auto; margin: 0; aspect-ratio: 1; border: 2px solid #b6cbb4; border-radius: 10px; box-shadow: 0 8px 30px #294e420b; }
.craft-coach { display: grid; gap: 16px; padding: 20px; border-radius: 12px; background: #edf3e7; }
.craft-count { font-size: 44px; line-height: 1.1; color: #a36c22; }
.craft-count small { font-size: 20px; color: #65765f; }
.voxel-stage .craft-dialog .craft-instruction { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.5; }
.craft-coach .craft-tools { display: grid; gap: 8px; }
.craft-coach .craft-tools button { min-height: 48px; font-size: 15px; }
.craft-coach > small { font-size: 13px; line-height: 1.65; color: #607359; }
.craft-coach .craft-status { grid-column: 1 / -1; }
.voxel-stage .craft-dialog .craft-status { display: block; min-height: 2.8em; margin: 10px 0 0; font-size: 14px; }
.voxel-stage .craft-dialog .craft-status:empty { display: block; }
@media (max-width: 650px) and (orientation: portrait) {
  .craft-practice { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .craft-coach { grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 12px; align-items: center; }
  .craft-count { font-size: 30px; }
  .craft-count small { font-size: 16px; }
  .voxel-stage .craft-dialog .craft-instruction { font-size: 17px; }
  .craft-coach .craft-tools { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .craft-coach > small { grid-column: 1 / -1; font-size: 12px; }
  .voxel-stage .craft-dialog .story-dialog-head small { font-size: 11px; }
  .voxel-stage .craft-dialog .craft-status { min-height: 2em; margin-top: 6px; font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .memory-in-workshop.craft-dialog { padding: 10px 16px; max-height: calc(100dvh - 16px); width: min(950px, calc(100vw - 24px)); }
  .voxel-stage .craft-dialog .story-dialog-head { top: -10px; padding: 0 0 6px; margin-bottom: 4px; }
  .voxel-stage .craft-dialog .story-dialog-head h2 { font-size: 20px; }
  .voxel-stage .craft-dialog .story-dialog-head small { display: none; }
  .voxel-stage .craft-dialog .craft-steps { display: none; }
  .craft-practice { grid-template-columns: minmax(0, 1fr) minmax(210px, .8fr); gap: 16px; }
  .voxel-stage .craft-dialog .craft-writing { width: min(100%, calc(100dvh - 150px)); }
  .craft-coach { padding: 10px; gap: 8px; }
  .craft-count { font-size: 26px; }
  .craft-count small { font-size: 16px; }
  .voxel-stage .craft-dialog .craft-instruction { font-size: 16px; }
  .craft-coach .craft-tools { grid-template-columns: 1fr 1fr; }
  .craft-coach .craft-tools button { min-height: 44px; font-size: 12px; }
  .craft-coach > small { font-size: 11px; line-height: 1.4; }
  .voxel-stage .craft-dialog .craft-status { min-height: 1.5em; margin-top: 4px; font-size: 12px; }
}


/* source: adventure-lobby.css */
@font-face{font-family:"Mumu Jua";src:url("fonts/Jua-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Outer navigation and lobby only: in-game HUD keeps its own identity. */
#app{--display:"Mumu Jua","Malgun Gothic",sans-serif}
body:has(.adventure-shell){background:linear-gradient(180deg,#f1f7ff 0,#fff 740px,#f5f8ff 100%)}
#app.adventure-shell{--ink:#182b54;--muted:#596a85;--green:#2858df;--line:#dce6f5;width:min(1400px,calc(100% - 64px));color:var(--ink)}
#app .game-site-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;min-height:104px;color:#182b54}
#app .game-brand{display:flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap;color:#2858df;line-height:1}
.game-brand-mark{display:grid;place-items:center;width:49px;height:49px;color:#2858df;background:#e3edff;border-radius:15px 15px 15px 5px;transform:rotate(-5deg)}
.game-brand-mark svg{width:42px;height:42px}
#app .game-wordmark{font:400 37px/1.1 var(--display);letter-spacing:-.04em}
#app .game-site-header .nav{position:static;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:3px;padding:0;margin:0;min-height:48px;width:auto;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
#app .game-site-header .nav>button{display:flex;flex-direction:row;gap:6px;justify-content:center;align-items:center;flex:none;min-width:0;min-height:46px;padding:10px 11px;border:0;border-radius:13px;background:none;color:#53627d;font-size:14px;font-weight:700;white-space:nowrap}
#app .game-site-header .nav>button.selected{color:#2858df;background:#e5edff;border:0}
#app .game-site-header .nav>button:hover{background:#edf2ff}
#app .game-site-header .nav .ui-icon{width:18px;height:18px}
.game-profile{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.collect-pill{display:flex;align-items:center;gap:5px;padding:10px 12px;background:#fff2cd;border:1px solid #ffe4a2;border-radius:13px;font-size:15px;color:#7b5916;white-space:nowrap}
.collect-pill>span{font:700 20px var(--glyph);color:#9b6712;margin-right:4px}
.collect-pill small{font-size:12px}
#app .game-nickname{display:flex;align-items:center;gap:7px;min-height:46px;max-width:175px;min-width:0;padding:3px 4px;background:none;color:#243759;font-size:14px;font-weight:700}
.explorer-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border:3px solid #fff;border-radius:50%;background:#dbe8ff;color:#2858df;font:400 19px var(--display);box-shadow:0 0 0 1px #d5e0f4}
.explorer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-nickname>svg{width:16px;height:16px;flex:none}
.adventure-home{padding-top:9px}
.lobby-world{position:relative;width:100%;min-height:500px;overflow:hidden;border:1px solid #d0e7ff;border-radius:28px;background:#dcefff;isolation:isolate}
.lobby-world>.lobby-keyart{position:absolute;inset:0 0 0 35%;width:65%;height:100%;display:block;object-fit:cover;object-position:center 58%;z-index:-2}
.lobby-world::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#edf6ff 0,#edf6ff 34%,#edf6ff00 44%)}
.lobby-world-copy{position:relative;width:48%;max-width:570px;padding:43px 44px 44px;color:#182b54}
.lobby-greeting{display:block;color:#47618b;font-size:14px;font-weight:650;margin-bottom:15px}
.lobby-world-copy h1{font:400 clamp(43px,4.3vw,63px)/1.1 var(--display);letter-spacing:-.035em;margin:0 0 24px;overflow-wrap:normal}
.lobby-current-story{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lobby-current-story>span{padding:4px 10px;border-radius:7px;color:#fff;background:#2858df;font-size:13px;font-weight:750;white-space:nowrap}
.lobby-current-story h2{font-size:20px;line-height:1.3;font-weight:800}
.lobby-world-copy>p{max-width:350px;color:#425b7c;font-size:15px;line-height:1.65}
.lobby-world-progress{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:12px;color:#3d5a81}
.lobby-world-progress progress{width:145px;height:6px;accent-color:#2858df}
.lobby-world-progress progress::-webkit-progress-bar{background:#d0def6}
.lobby-world-progress progress::-webkit-progress-value{background:#2858df}
.lobby-start{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:62px;margin-top:25px;padding:12px 21px 12px 14px;border:1px solid #ffd266;border-radius:15px;background:#ffcf59;color:#27395b;font:400 23px/1.2 var(--display);box-shadow:0 5px 0 #e4a83b,0 12px 23px #a77c1324}
.lobby-start:hover{background:#ffda7d}
.lobby-start:active{transform:translateY(3px);box-shadow:0 2px 0 #e4a83b}
.lobby-play-icon{display:grid;place-items:center;width:34px;height:34px;padding-left:2px;border-radius:50%;background:#fff7de;color:#745310;font:700 14px sans-serif}
.lobby-start>svg{width:21px;height:21px;margin-left:15px}
.lobby-art-tools{position:absolute;right:20px;bottom:18px;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:9px}
.lobby-art-tools>span{color:#fff;background:#284e668f;padding:5px 9px;border-radius:6px;font-size:11px}
.lobby-preview-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 14px;background:#fffffff5;border:1px solid #ffffffc0;border-radius:12px;color:#233b5e;font-size:13px;font-weight:750;box-shadow:0 2px 12px #15314c24}
.lobby-preview-button .ui-icon{width:17px;height:17px}
.lobby-pass{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;align-items:center;gap:22px;margin:22px 0 0;padding:21px 26px;border:1px solid #dfe7f5;border-radius:18px;background:#fff;box-shadow:0 5px 0 #edf1f9}
.lobby-pass-title{display:flex;align-items:center;gap:13px}
.lobby-pass-title>span{display:grid;place-items:center;width:42px;height:48px;border:1px solid #f4d98e;border-left:5px solid #e8b73b;background:#fff3cf;border-radius:5px 9px 9px 5px;color:#745517;font:700 24px var(--glyph);transform:rotate(-6deg)}
.lobby-pass-title h2{font:400 23px var(--display)}
.lobby-pass-stat{display:flex;align-items:center;gap:13px;border-left:1px solid #e5ebf5;padding-left:24px}
.lobby-pass-stat>span{color:#5e6e87;font-size:13px}
.lobby-pass-stat strong{font-size:25px;color:#2858df;font-weight:800;white-space:nowrap}
.lobby-pass-stat small{color:#697991;font-size:12px;font-weight:500}
.lobby-link{display:flex;align-items:center;justify-content:center;gap:13px;min-height:44px;padding:11px 15px;border:1px solid #dae5f7;border-radius:11px;background:#f1f6ff;color:#2858df;font-size:14px;font-weight:750}
.lobby-section{margin-top:37px}
.lobby-section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}
.lobby-section-head h2{font:400 28px/1.3 var(--display)}
.lobby-section-head>span{color:#60728f;font-size:13px}
.lobby-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lobby-chapter{position:relative;display:flex;flex-direction:column;overflow:hidden;min-width:0;padding:0;border:1px solid #dce5f3;border-left:8px solid var(--book-color);border-radius:11px 19px 19px 11px;background:white;text-align:left;color:#1d3155;box-shadow:0 5px 0 #e9eef7;transition:transform .15s,box-shadow .15s}
.lobby-chapter:not(:disabled):hover{transform:translateY(-4px);box-shadow:0 9px 0 #e5ebf7}
.lobby-chapter:disabled{color:#1d3155;opacity:1}
.lobby-chapter-art{position:relative;display:block;aspect-ratio:2;overflow:hidden;background:#e4effb}
.lobby-chapter-art img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.book-chapter{position:absolute;top:12px;left:12px;min-width:43px;padding:5px 9px;border:1px solid #fff9;border-radius:8px;background:#ffffffed;color:#243b61;text-align:center;font-size:13px;font-weight:800}
.book-lock{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:31px;height:31px;border:1px solid #fff9;border-radius:50%;background:#ffffffe8;color:#516581}
.book-lock svg{width:17px;height:17px}
.lobby-chapter-copy{display:grid;gap:8px;padding:20px 21px 21px}
.lobby-chapter-copy>strong{font:400 25px/1.25 var(--display)}
.lobby-chapter-copy>small{color:#61728b;font-size:13px}
.lobby-chapter-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:9px}
.lobby-chapter-glyphs{display:flex;gap:6px}
.lobby-chapter-glyphs>span{display:grid;place-items:center;width:36px;height:38px;border:1px solid #e1e8f5;border-radius:8px;color:#294a76;background:#f3f7fd;font:700 24px var(--glyph)}
.book-open{color:#41608b;font-size:12px;font-weight:700}
.lobby-more{margin-top:20px;padding:0 19px;border:1px dashed #cbdaf0;border-radius:13px;background:#fff8}
.lobby-more summary{padding:15px 2px;min-height:50px;cursor:pointer;color:#445e85;font-size:14px;font-weight:700}
.lobby-later{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-bottom:18px}
.lobby-later button{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px;border:1px solid #dce5f4;border-radius:10px;background:#fff;color:#263c60;font-size:14px;text-align:left}
.lobby-later button>span{flex:none;font-size:12px;font-weight:750;color:#416494}
.lobby-later button>small{margin-left:auto;color:#65748d;font-size:11px;white-space:nowrap}
.lobby-review{position:relative;display:flex;align-items:center;gap:19px;padding:23px 27px 23px 20px;border:1px solid #e2e7f8;border-radius:20px;background:#eaf0ff;margin-bottom:20px}
.lobby-review>img{width:89px;height:89px;object-fit:contain;flex:none}
.lobby-review h2{font:400 26px/1.3 var(--display)}
.lobby-review p{margin-top:5px;color:#526789;font-size:14px}
.lobby-review-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.lobby-review-actions button{min-height:46px;padding:11px 15px;border:1px solid #cddbf5;border-radius:11px;color:#2b53a2;background:#fff;font-size:14px;font-weight:750}
#app.adventure-shell .footer{color:#64748e;font-size:11px;padding:25px 0 30px}
#app .game-site-header button:focus-visible,#app .adventure-home button:focus-visible,#app .adventure-home summary:focus-visible,#app .game-brand:focus-visible{outline:3px solid #2049b8;outline-offset:4px}
body:has(.adventure-shell) #app-dialog{border-color:#d5e1f6;color:#182b54;border-radius:21px}
body:has(.adventure-shell) #app-dialog .button.primary{background:#2858df;color:#fff}
body:has(.adventure-shell) #app-dialog .button.outline{color:#2858df;border-color:#d3dff3}
#app-dialog[data-kind="world-preview"]{width:min(900px,calc(100% - 32px));max-width:900px;padding:22px}
.lobby-actual-preview img{display:block;width:100%;height:auto;margin-top:17px;border:1px solid #dce5f4;border-radius:12px}
.lobby-actual-preview p{margin-top:12px;font-size:14px;color:#526785}
@media(max-width:1120px){
  #app .game-site-header{column-gap:16px;grid-template-columns:auto auto;padding:17px 0 0}
  #app .game-site-header .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:6px;margin:0 0 15px}
  .game-profile{grid-column:2;grid-row:1}
  .lobby-world-copy{width:54%;padding:39px 32px}
  .lobby-pass{gap:16px;padding:20px;grid-template-columns:1fr 1fr 1fr}
  .lobby-pass-title h2{font-size:21px}
  .lobby-pass .lobby-link{grid-column:1/-1;justify-self:end;margin-top:-4px}
  .lobby-pass-stat{gap:8px;padding-left:15px;flex-wrap:wrap}
  .lobby-chapters{gap:16px}
  .lobby-chapter-copy{padding:17px 15px}
  .lobby-chapter-copy>strong{font-size:23px}
  .lobby-review{flex-wrap:wrap}
  .lobby-review-actions{margin-left:107px}
}
@media(max-width:700px){
  #app.adventure-shell{width:calc(100% - 32px)}
  #app .game-site-header{gap:16px 8px;padding-top:18px}
  #app .game-brand{gap:6px}
  .game-brand-mark{width:38px;height:38px;border-radius:12px 12px 12px 4px}
  .game-brand-mark svg{width:33px;height:33px}
  #app .game-wordmark{font-size:30px}
  .game-profile{gap:8px}
  .collect-pill{padding:7px 9px;gap:3px;border-radius:10px;font-size:13px}
  .collect-pill>span{font-size:17px;margin-right:3px}
  #app .game-nickname{padding:3px 0;min-height:44px}
  .explorer-name,.game-nickname>svg{display:none}
  .explorer-avatar{width:34px;height:34px}
  #app .game-site-header .nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;margin:0 0 13px}
  #app .game-site-header .nav>button{flex-direction:column;min-height:56px;padding:7px 2px;gap:4px;border-radius:12px;font-size:11px}
  #app .game-site-header .nav .ui-icon{width:19px;height:19px}
  .adventure-home{padding-top:0}
  .lobby-world{display:flex;flex-direction:column;min-height:0;border-radius:22px;overflow:hidden;background:#edf6ff}
  .lobby-world>.lobby-keyart{position:relative;inset:auto;width:100%;height:254px;object-fit:cover;object-position:center 62%;z-index:0}
  .lobby-world::after{display:none}
  .lobby-world-copy{width:100%;max-width:none;padding:24px 25px 28px}
  .lobby-greeting{margin-bottom:10px;font-size:12px}
  .lobby-world-copy h1{font-size:43px;line-height:1.08;margin-bottom:19px}
  .lobby-current-story h2{font-size:18px}
  .lobby-current-story>span{font-size:12px}
  .lobby-world-copy>p{font-size:13px}
  .lobby-start{width:100%;min-height:59px;margin-top:21px;padding-right:16px;font-size:22px}
  .lobby-start>svg{margin-left:auto}
  .lobby-art-tools{top:207px;bottom:auto;right:10px;left:10px;justify-content:space-between}
  .lobby-art-tools>span{font-size:10px}
  .lobby-preview-button{min-height:44px;padding:7px 10px;font-size:11px;border-radius:9px}
  .lobby-pass{grid-template-columns:1fr 1fr;gap:16px 15px;margin-top:16px;padding:20px;border-radius:17px}
  .lobby-pass-title{grid-column:1/-1;gap:10px}
  .lobby-pass-title>span{width:29px;height:33px;font-size:20px}
  .lobby-pass-title h2{font-size:22px}
  .lobby-pass-stat{display:grid;gap:4px;padding:0;border:0}
  .lobby-pass-stat>span{font-size:12px}
  .lobby-pass-stat strong{font-size:28px}
  .lobby-pass-stat small{font-size:11px}
  .lobby-pass .lobby-link{grid-column:1/-1;width:100%;justify-self:stretch;margin:0}
  .lobby-section{margin-top:29px}
  .lobby-section-head{margin-bottom:16px}
  .lobby-section-head h2{font-size:25px}
  .lobby-section-head>span{font-size:11px}
  .lobby-chapters{grid-template-columns:1fr;gap:16px}
  .lobby-chapter{display:grid;grid-template-columns:38% 1fr;border-left-width:6px;border-radius:10px 15px 15px 10px}
  .lobby-chapter-art{aspect-ratio:auto;min-height:170px}
  .lobby-chapter-art img{object-position:45% center}
  .book-chapter{top:9px;left:8px;padding:3px 7px;min-width:33px;font-size:11px}
  .book-lock{top:auto;bottom:8px;right:8px;width:26px;height:26px}
  .lobby-chapter-copy{padding:15px 12px;gap:6px}
  .lobby-chapter-copy>strong{font-size:23px}
  .lobby-chapter-copy>small{font-size:11px}
  .lobby-chapter-bottom{margin-top:5px;gap:8px}
  .lobby-chapter-glyphs>span{width:30px;height:32px;font-size:21px;border-radius:6px}
  .book-open{font-size:11px}
  .lobby-later{grid-template-columns:1fr}
  .lobby-later button{font-size:13px;flex-wrap:wrap}
  .lobby-more{margin-top:17px;padding:0 15px}
  .lobby-review{padding:20px 18px;gap:12px;border-radius:17px}
  .lobby-review>img{width:64px;height:74px}
  .lobby-review>div:not(.lobby-review-actions){flex:1;min-width:0}
  .lobby-review h2{font-size:24px}
  .lobby-review p{font-size:12px}
  .lobby-review-actions{margin:4px 0 0;gap:7px;width:100%}
  .lobby-review-actions button{flex:1;min-height:44px;padding:9px 10px;font-size:12px;white-space:nowrap}
  #app.adventure-shell .footer{padding:22px 8px 28px;font-size:10px}
  #app-dialog[data-kind="world-preview"]{padding:17px}
}
@media(max-width:360px){
  #app .game-wordmark{font-size:27px}
  .game-brand-mark{width:32px;height:35px}
  .game-brand-mark svg{width:29px;height:29px}
  .collect-pill>span{display:none}
  .lobby-world-copy{padding:23px 20px 25px}
  .lobby-world-copy h1{font-size:38px}
  .lobby-chapter{grid-template-columns:34% 1fr}
  .lobby-chapter-copy>strong{font-size:22px}
}
@media(max-width:700px) and (max-height:740px){
  .lobby-world>.lobby-keyart{height:200px}
  .lobby-art-tools{top:150px}
  .lobby-world-copy{padding-top:20px;padding-bottom:22px}
  .lobby-world-copy h1{font-size:38px;margin-bottom:15px}
  .lobby-start{margin-top:18px}
}
@media(max-width:700px) and (max-height:620px){
  .lobby-world>.lobby-keyart{height:160px}
  .lobby-art-tools{top:110px}
  .lobby-world-copy h1{font-size:35px}
  .lobby-greeting{display:none}
}
@media(min-width:701px) and (max-height:500px){
  #app .game-site-header{grid-template-columns:auto 1fr auto;gap:12px;min-height:76px;padding:0}
  #app .game-site-header .nav{grid-column:auto;grid-row:auto;margin:0;justify-content:center;gap:0}
  #app .game-site-header .nav>button{padding:8px 7px;font-size:12px;gap:4px}
  #app .game-wordmark{font-size:28px}
  .game-brand-mark{width:34px;height:35px}
  .game-brand-mark svg{width:30px;height:30px}
  .game-profile{grid-column:auto;grid-row:auto;gap:8px}
  .explorer-name,.game-nickname>svg{display:none}
  .collect-pill{padding:7px 8px;font-size:12px}
  .collect-pill>span{display:none}
  .lobby-world{min-height:300px}
  .lobby-world-copy{padding:25px 28px;width:52%}
  .lobby-world-copy h1{font-size:38px;margin-bottom:16px}
  .lobby-greeting{display:none}
  .lobby-start{min-height:50px;margin-top:15px;font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .lobby-chapter{transition:none}
  .lobby-chapter:not(:disabled):hover,.lobby-start:active{transform:none}
}


/* source: storybook-viewport.css */
html.sb-viewport-mounted,
body.sb-viewport-mounted {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
}

#storybook-viewport {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

#storybook-viewport:fullscreen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}

#storybook-stage {
  position: absolute;
  left: calc(var(--sb-viewport-left, 0px) + var(--sb-stage-left, 0px));
  top: calc(var(--sb-viewport-top, 0px) + var(--sb-stage-top, 0px));
  width: 1600px;
  min-width: 1600px;
  max-width: 1600px;
  height: 900px;
  min-height: 900px;
  max-height: 900px;
  overflow: hidden;
  transform: scale(var(--sb-viewport-scale, 1));
  transform-origin: 0 0;
}

/* Native app-dialog geometry and its matching uniform scale belong to the skin. */
.sb-orientation-gate {
  position: fixed;
  inset: auto;
  left: var(--sb-viewport-left, 0px);
  top: var(--sb-viewport-top, 0px);
  width: var(--sb-viewport-width, 100vw);
  height: var(--sb-viewport-height, 100vh);
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  z-index: 2147483647;
}

.sb-orientation-gate::backdrop {
  background: #000;
}

.sb-orientation-gate:not([open]) {
  display: none;
}

.sb-orientation-gate > .sb-orientation-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  box-sizing: border-box;
  width: 720px;
  min-height: 540px;
  padding: 40px;
  text-align: center;
  transform: translate(-50%, -50%) scale(var(--sb-gate-scale, 1));
  transform-origin: center;
}

.sb-orientation-panel h2,
.sb-orientation-panel p {
  margin: 0;
  max-width: 100%;
  word-break: keep-all;
}

.sb-orientation-panel h2 {
  font-size: 40px;
  line-height: 1.3;
}

.sb-orientation-panel p {
  font-size: 32px;
  line-height: 1.5;
}

.sb-orientation-panel > .sb-icon {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
}

.sb-orientation-panel > .sb-button {
  flex: 0 0 auto;
  width: 560px;
  min-height: 104px;
  font-size: 32px;
}


/* source: storybook-fonts.css */
/* Unmodified Pretendard v1.3.9; license and provenance are bundled in fonts/. */
@font-face {
  font-family: "Mumu Pretendard";
  src: url("fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* source: storybook-skin.css */
/* Load after legacy skins. Artwork comes exclusively from bundled PNGs.
   Utilities have low specificity so storybook-home.css owns home/map geometry. */
body:has(#storybook-stage .storybook-app) {
  --sb-home-image: url("assets/storybook/v1/home-background.png");
  --sb-map-image: url("assets/storybook/v1/story-map.png");
  --sb-logo-image: url("assets/storybook/v1/logo.png");
  --sb-panel-image: url("assets/storybook/v2/paper-frame.png");
  --sb-rail-image: url("assets/storybook/v1/rail-wood.png");
  --sb-gold-image: url("assets/storybook/v1/button-gold.png");
  --sb-wood-image: url("assets/storybook/v1/button-wood.png");
  --sb-icons-image: url("assets/storybook/v1/icons.png");
  --sb-text-font: "Mumu Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --sb-heading-font: "Mumu Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --sb-glyph-font: "Noto Serif KR", "Batang", serif;
  --font: var(--sb-text-font);
  --sb-ink: #30291e;
  --sb-muted: #58503e;
  --sb-panel-slice: 10% 8%;
  --sb-button-slice: 18%;
  overflow: hidden;
  background: #111;
  color: var(--sb-ink);
  font-family: var(--sb-text-font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

#storybook-stage #app.storybook-app {
  --ink: var(--sb-ink);
  --muted: var(--sb-muted);
  --green: #245543;
  --line: #c5b797;
  --font: var(--sb-text-font);
  --glyph: var(--sb-glyph-font);
  --display: var(--sb-heading-font);
  width: 1600px;
  height: 900px;
  min-width: 1600px;
  max-width: none;
  min-height: 900px;
  max-height: 900px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff3d6;
  color: var(--sb-ink);
  font-family: var(--sb-text-font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

#storybook-stage #app.storybook-app > #content {
  min-width: 0;
  min-height: 0;
  flex: 1 1 772px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
}

#storybook-stage #app.storybook-app.sb-focused-view > #content {
  flex-basis: 900px;
}

#storybook-stage #app.storybook-app.sb-stories-view > #content {
  overflow: hidden;
  scrollbar-gutter: auto;
}

#storybook-stage #app.storybook-app > .footer {
  display: none;
}

/* These utilities also work in native top-layer dialogs and the rotation gate. */
body:where(:has(#storybook-stage .storybook-app)) .sb-panel {
  border: 24px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
}

body:where(:has(#storybook-stage .storybook-app)) .sb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-width: 104px;
  min-height: 104px;
  padding: 8px 16px;
  border: 16px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: #302612;
  font-family: var(--sb-text-font);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

body:where(:has(#storybook-stage .storybook-app)) :is(.sb-button--gold, .sb-button-gold) {
  border-image-source: var(--sb-gold-image);
  border-image-slice: var(--sb-button-slice) fill;
  color: #302612;
}

body:where(:has(#storybook-stage .storybook-app)) .sb-button--wood {
  border-image-source: var(--sb-wood-image);
  border-image-slice: var(--sb-button-slice) fill;
  color: #fff7df;
}

body:where(:has(#storybook-stage .storybook-app)) .sb-rail {
  border: 18px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-rail-image);
  border-image-slice: 16% fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: #fff7df;
}

body:where(:has(#storybook-stage .storybook-app)) .sb-icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  background-image: var(--sb-icons-image);
  background-size: 400% 200%;
  background-repeat: no-repeat;
  image-rendering: auto;
  pointer-events: none;
  vertical-align: middle;
}

body:where(:has(#storybook-stage .storybook-app)) :is(.sb-icon--home, .sb-icon-home) { background-position: 0% 0%; }
body:where(:has(#storybook-stage .storybook-app)) :is(.sb-icon--map, .sb-icon-map) { background-position: 33.333333% 0%; }
body:where(:has(#storybook-stage .storybook-app)) :is(.sb-icon--book, .sb-icon-book) { background-position: 66.666667% 0%; }
body:where(:has(#storybook-stage .storybook-app)) :is(.sb-icon--records, .sb-icon-records) { background-position: 100% 0%; }
body:where(:has(#storybook-stage .storybook-app)) :is(.sb-icon--avatar, .sb-icon-avatar) { background-position: 0% 100%; }
body:where(:has(#storybook-stage .storybook-app)) :is(.sb-icon--settings, .sb-icon-settings) { background-position: 33.333333% 100%; }
body:where(:has(#storybook-stage .storybook-app)) :is(.sb-icon--rotate, .sb-icon-rotate) { background-position: 66.666667% 100%; }
body:where(:has(#storybook-stage .storybook-app)) :is(.sb-icon--reticle, .sb-icon-reticle) { background-position: 100% 100%; }

#storybook-stage #app.storybook-app .game-site-header.sb-header {
  display: grid;
  grid-template-columns: 300px 720px 500px;
  align-items: center;
  gap: 16px;
  width: 1600px;
  height: 128px;
  min-height: 128px;
  flex-shrink: 0;
  margin: 0;
  padding: 0 12px;
  border: 12px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-rail-image);
  border-image-slice: 16% fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
}

#storybook-stage #app.storybook-app .game-brand {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  width: 300px;
  height: 104px;
  margin: 0;
  padding: 0;
  gap: 0;
  background: transparent;
  text-decoration: none;
}

#storybook-stage #app.storybook-app .sb-logo {
  display: block;
  width: 300px;
  height: 100px;
  max-width: none;
  object-fit: contain;
}

#storybook-stage #app.storybook-app .game-site-header .nav.sb-nav {
  position: static;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex-wrap: nowrap;
  gap: 4px;
  width: 720px;
  height: 104px;
  min-height: 104px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#storybook-stage #app.storybook-app .game-site-header .nav > .sb-nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 104px;
  min-height: 104px;
  margin: 0;
  padding: 4px;
  border: 10px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
  font-family: var(--sb-text-font);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

#storybook-stage #app.storybook-app .sb-nav-item > .sb-icon {
  width: 48px;
  height: 48px;
}

#storybook-stage #app.storybook-app .game-site-header .nav > .sb-nav-item:is(.selected, [aria-current="page"]) {
  border-image-source: var(--sb-gold-image);
  border-image-slice: var(--sb-button-slice) fill;
  background: transparent;
  color: #302612;
}

#storybook-stage #app.storybook-app .game-profile.sb-profile {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 500px;
  min-width: 0;
}

#storybook-stage #app.storybook-app .sb-collect {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  flex: 0 0 88px;
  gap: 2px;
  min-height: 64px;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff7df;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

#storybook-stage #app.storybook-app .sb-collect b {
  font-size: 1.875rem;
}

#storybook-stage #app.storybook-app .sb-profile-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 252px;
  gap: 8px;
  width: 252px;
  max-width: 252px;
  min-width: 0;
  min-height: 104px;
  padding: 8px;
  border: 10px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
  font-family: var(--sb-text-font);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

#storybook-stage #app.storybook-app .sb-nickname {
  display: block;
  min-width: 0;
  max-width: 152px;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

#storybook-stage #app.storybook-app .sb-fullscreen {
  flex: 0 0 136px;
  width: 136px;
  min-width: 104px;
  min-height: 104px;
  padding: 4px;
  border-width: 12px;
  font-size: 1.25rem;
  white-space: nowrap;
}

/* Bounded pages keep their desktop columns at every physical viewport size. */
#storybook-stage #app.storybook-app #content > :is(.page-intro, .filters, .collection-grid, .stats-grid, .section, .map-worlds, .content-note, .book-switch, .voxel-heading, .voxel-view-switch, .voxel-journey, .voxel-facilities, .village-layout, .resume-strip, .storage-warning) {
  margin-left: 32px;
  margin-right: 32px;
}

#storybook-stage #app.storybook-app .page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 24px;
  padding: 24px 0;
}

#storybook-stage #app.storybook-app :is(.page-intro h1, .study-intro h1, .result h1, .match-intro h1) {
  font-family: var(--sb-heading-font);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

#storybook-stage #app.storybook-app :is(.subtitle, .quiet, .muted, .eyebrow, .collection-status, .content-note, .stats-grid span) {
  color: var(--sb-muted);
  font-size: 1rem;
  line-height: 1.5;
}

#storybook-stage #app.storybook-app .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

#storybook-stage #app.storybook-app .collection-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

#storybook-stage #app.storybook-app .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#storybook-stage #app.storybook-app .map-nodes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

#storybook-stage #app.storybook-app .badge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

#storybook-stage #app.storybook-app :is(.learn-cards, .choices, .match-columns) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

#storybook-stage #app.storybook-app .choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#storybook-stage #app.storybook-app :is(.panel, .collection-card, .map-world, .map-node, .learn-card, .stats-grid article, .badge, .timeline, .empty, .writing-panel, .feedback, .word-note) {
  border: 18px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
  padding: 20px;
}

#storybook-stage #app.storybook-app .collection-card {
  min-height: 208px;
  gap: 12px;
}

#storybook-stage #app.storybook-app .collection-card > strong {
  font-size: 1.25rem;
}

#storybook-stage #app.storybook-app :is(.stats-grid strong, .result-stats strong, .count, .progress-number, .week small) {
  font-variant-numeric: tabular-nums;
}

#storybook-stage #app.storybook-app .stats-grid strong {
  font-size: 2.25rem;
}

#storybook-stage #app.storybook-app :is(.button, .text-button, .filters button, .book-switch button, .choice, .glyph-button, .match-card) {
  min-width: 104px;
  min-height: 104px;
  padding: 10px 18px;
  border: 14px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
  font-family: var(--sb-text-font);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: none;
}

#storybook-stage #app.storybook-app :is(.button.primary, .filters button.active, .book-switch button[aria-pressed="true"], .choice.correct) {
  border-image-source: var(--sb-gold-image);
  border-image-slice: var(--sb-button-slice) fill;
  background: transparent;
  color: #302612;
}

#storybook-stage #app.storybook-app .glyph-button {
  font-family: var(--sb-glyph-font);
  font-weight: 400;
}

#storybook-stage #app.storybook-app :is(.study, .result, .match-page) {
  width: 1120px;
  max-width: none;
  margin: 24px auto;
  padding-bottom: 32px;
}

#storybook-stage #app.storybook-app .study-header {
  min-height: 112px;
  font-size: 1.25rem;
}

#storybook-stage #app.storybook-app .study-intro {
  margin: 24px 0;
}

#storybook-stage #app.storybook-app .learn-glyph {
  font-size: 8rem;
  line-height: 1.4;
}

#storybook-stage #app.storybook-app .collection-glyph {
  font-size: 3.75rem;
  line-height: 1.3;
}

#storybook-stage #app.storybook-app .quiz-glyph {
  font-size: 7rem;
  line-height: 1.4;
}

#storybook-stage #app.storybook-app :is(.result-actions, .dialog-actions) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

#storybook-stage #app.storybook-app .timeline li {
  flex-direction: row;
}

#storybook-stage #app.storybook-app .timeline summary > span {
  display: inline;
  float: right;
  font-size: 1rem;
}

/* A transformed stage is a containing block, so legacy fixed play stays local. */
#storybook-stage #app.storybook-app .voxel-stage {
  --game-top: 20px;
  --game-left: 24px;
  --game-right: 24px;
  --game-bottom: 24px;
  position: relative;
  width: 1536px;
  height: 700px !important;
  min-height: 700px !important;
  max-height: 700px !important;
  margin: 16px 32px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#storybook-stage #app.storybook-app :is(.voxel-stage.voxel-entered, .voxel-stage.voxel-expanded, .voxel-stage:fullscreen) {
  position: fixed;
  inset: 0;
  width: 1600px;
  height: 900px !important;
  min-height: 900px !important;
  max-height: 900px !important;
  margin: 0;
  border-radius: 0;
  z-index: 1000;
}

#storybook-stage #app.storybook-app > #content:has(.voxel-stage.voxel-entered, .voxel-stage.voxel-expanded) {
  overflow: hidden;
}

/* Renderer setSize writes physical inline dimensions; the CSS box stays base-sized. */
#storybook-stage #app.storybook-app .voxel-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

#storybook-stage #app.storybook-app .voxel-gate {
  inset: 0;
  padding: 32px;
  background: #102c3140;
  backdrop-filter: none;
}

#storybook-stage #app.storybook-app .voxel-gate-card {
  display: grid;
  grid-template-columns: 400px 400px;
  align-content: center;
  column-gap: 32px;
  width: 960px;
  max-width: none;
  max-height: 800px;
  padding: 24px;
  border: 24px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--sb-ink);
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-settings-open .voxel-gate-card {
  display: block;
  width: 960px;
  padding: 24px;
  background: transparent;
  border: 24px solid transparent;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  border-radius: 0;
  box-shadow: none;
}

/* Explicit areas prevent the summary column from creating oversized implicit rows. */
#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-gate-card {
  width: 1328px;
  height: 696px;
  max-height: none;
  min-height: 0;
  grid-template-columns: minmax(0, 864px) minmax(0, 336px);
  grid-template-rows: 44px 104px minmax(0, 1fr);
  grid-template-areas: "heading world" "resume world" "menu world";
  align-content: start;
  gap: 16px 32px;
  overflow: hidden;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-gate-card > h2 {
  grid-area: heading;
  margin: 0;
  align-self: center;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-play {
  grid-area: resume;
  min-height: 104px;
  margin: 0;
  border-image-source: var(--sb-gold-image);
  border-image-slice: var(--sb-button-slice) fill;
  font-size: 1.625rem !important;
  font-weight: 750;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-game-menu {
  grid-area: menu;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, auto);
  align-content: start;
  min-height: 0;
  margin: 0;
  gap: 12px;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-game-menu > :is(.tree-hud-actions, .voxel-menu-tools) {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  order: 0;
  gap: 12px;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-game-menu button {
  min-width: 0;
  min-height: 104px;
  margin: 0;
  padding: 8px;
  border-width: 12px;
  font-size: 1.375rem !important;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-pause-world {
  grid-area: world;
  min-height: 0;
  padding: 12px;
  gap: 12px;
  justify-content: center;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-pixel-avatar {
  width: 128px;
  height: 128px;
  flex-shrink: 0;
  margin: 8px auto;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-world-label {
  font-size: 1.75rem;
  line-height: 1.25;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-pause-location {
  max-width: 100%;
  font-size: 1.375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .voxel-pause-state {
  font-size: 1rem;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .tree-growth-status {
  flex-shrink: 0;
  width: 100%;
  min-height: 104px;
  margin: 12px 0 0;
  padding: 8px;
  border-width: 10px;
  font-size: 1rem !important;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-entered:not(.voxel-settings-open) .tree-growth-status :is(small, i) {
  font-size: 0.875rem;
}

#storybook-stage #app.storybook-app :is(.voxel-gate button, .voxel-controls-guide summary) {
  min-width: 104px;
  min-height: 104px;
  padding: 8px 12px;
  border: 16px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent !important;
  color: #302612 !important;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--sb-text-font);
  font-size: 1.25rem !important;
  font-weight: 600;
  line-height: 1.4;
  transform: none;
}

#storybook-stage #app.storybook-app :is(.voxel-pause-world, .voxel-game-menu .tree-growth-status, .voxel-stage.voxel-settings-open .chapter-av-settings) {
  background: transparent;
  color: var(--sb-ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#storybook-stage #app.storybook-app .voxel-gate h2 {
  font-family: var(--sb-heading-font);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sb-ink);
  text-shadow: none;
}

#storybook-stage #app.storybook-app .voxel-game-menu .tree-hud-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#storybook-stage #app.storybook-app .voxel-pixel-avatar {
  width: 160px;
  height: 160px;
  margin: 8px auto;
  background-image: var(--sb-icons-image);
  background-size: 400% 200%;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  filter: none;
}

#storybook-stage #app.storybook-app .voxel-pixel-avatar i {
  display: none;
}

#storybook-stage #app.storybook-app :is(.game-site-header, .voxel-gate, .voxel-toolbar) svg {
  display: none;
}

#storybook-stage #app.storybook-app :is(.voxel-pixel-avatar, .voxel-crosshair)::before,
#storybook-stage #app.storybook-app :is(.voxel-pixel-avatar, .voxel-crosshair)::after {
  content: none;
}

/* Small status panes, not giant opaque timber boards over the playable world. */
#storybook-stage #app.storybook-app .tree-objective {
  inset: 20px auto auto 24px;
  width: 440px;
  max-width: 440px;
  min-height: 104px;
  padding: 8px 12px;
  gap: 12px;
  border: 8px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice);
  border-image-repeat: stretch;
  background: #fffdf3ed;
  color: var(--sb-ink);
  box-shadow: none;
  backdrop-filter: none;
}

#storybook-stage #app.storybook-app .tree-objective > strong {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
}

#storybook-stage #app.storybook-app .voxel-top {
  inset: 20px 24px auto auto;
  gap: 12px;
}

#storybook-stage #app.storybook-app :is(.voxel-toolbar button, .voxel-touch-actions button, .voxel-context button, .tree-dash) {
  min-width: 104px;
  min-height: 104px !important;
  padding: 8px 14px;
  border: 12px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: #302612;
  font-family: var(--sb-text-font);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

#storybook-stage #app.storybook-app .voxel-toolbar {
  gap: 12px;
}

#storybook-stage #app.storybook-app .voxel-context {
  bottom: 24px;
  max-width: 400px;
  min-width: 0;
  gap: 8px;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-building .voxel-context {
  bottom: 160px;
}

#storybook-stage #app.storybook-app .voxel-context span {
  font-size: 1.125rem;
  line-height: 1.5;
}

#storybook-stage #app.storybook-app .voxel-stage.voxel-building:not(.tree-in-realm) .voxel-bottom {
  bottom: 24px;
  max-width: 896px;
}

#storybook-stage #app.storybook-app .voxel-hotbar {
  max-width: 896px;
  gap: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#storybook-stage #app.storybook-app .voxel-hotbar button {
  width: 104px;
  min-width: 104px;
  height: 104px;
  flex: 0 0 104px;
  border: 10px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
  font-family: var(--sb-text-font);
  font-weight: 600;
}

#storybook-stage #app.storybook-app .voxel-touch {
  display: block;
}

#storybook-stage #app.storybook-app .voxel-stick {
  left: 24px;
  bottom: 24px;
  width: 208px;
  height: 208px;
  border: 14px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-wood-image);
  border-image-slice: var(--sb-button-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
}

#storybook-stage #app.storybook-app .voxel-stick span {
  width: 104px;
  height: 104px;
  border: 10px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
}

#storybook-stage #app.storybook-app .voxel-stick b {
  display: none;
}

#storybook-stage #app.storybook-app .voxel-touch-actions {
  right: 24px;
  bottom: 24px;
  gap: 12px;
}

#storybook-stage #app.storybook-app .tree-dash {
  bottom: 256px;
  right: 24px;
}

#storybook-stage #app.storybook-app .voxel-crosshair {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background-image: var(--sb-icons-image);
  background-size: 400% 200%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  box-shadow: none;
}

#storybook-stage #app.storybook-app .story-compass-button {
  min-width: 104px;
  min-height: 104px;
  margin: -8px -12px -8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
}

#storybook-stage #app.storybook-app .story-compass-button i {
  width: 48px;
  height: 48px;
  border: 0;
  background-image: var(--sb-icons-image);
  background-size: 400% 200%;
  background-position: 33.333333% 0%;
  background-repeat: no-repeat;
}

#storybook-stage #app.storybook-app .voxel-toast {
  top: 136px;
  max-width: 440px;
  padding: 10px 16px;
  border: 8px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  color: var(--sb-ink);
  font-size: 1.125rem;
  line-height: 1.5;
  box-shadow: none;
}

#storybook-stage #app.storybook-app .voxel-stage.chapter-directing .chapter-shot {
  width: 720px;
  max-width: 720px;
  padding: 12px 18px;
  gap: 16px;
  border: 10px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink);
}

#storybook-stage #app.storybook-app .chapter-shot button {
  min-width: 104px;
  min-height: 104px;
  border: 12px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: #302612;
  font-family: var(--sb-text-font);
  font-weight: 600;
}

#storybook-stage #app.storybook-app .village-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  height: 696px;
}

#storybook-stage #app.storybook-app .village-detail {
  display: block;
  grid-template-columns: none;
  gap: normal;
  padding: 24px;
  height: 696px;
  overflow: auto;
}

#storybook-stage #app.storybook-app .village-buildings {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

#storybook-stage #app.storybook-app .village-building-card {
  height: 128px;
  min-height: 128px;
  padding: 15px 12px;
  gap: 9px;
}

#storybook-stage #app.storybook-app .village-building-icon {
  width: 36px;
  height: 39px;
  font-size: 1.4375rem;
}

#storybook-stage #app.storybook-app .village-building-card > span > strong {
  font-size: 1rem;
}

#storybook-stage #app.storybook-app .village-building-card small {
  font-size: 0.875rem;
  margin-top: 5px;
}

#storybook-stage #app.storybook-app .village-card-label {
  margin-bottom: 0;
}

#storybook-stage #app.storybook-app .village-blueprint {
  height: 127px;
  margin: 17px 0 21px;
}

#storybook-stage #app.storybook-app .village-blueprint-glyph {
  font-size: 2.875rem;
  padding: 6px 12px;
}

#storybook-stage #app.storybook-app .village-detail h2 {
  font-size: 1.375rem;
}

#storybook-stage #app.storybook-app .village-detail > p:not(.village-detail-note) {
  font-size: 1rem;
  margin-top: 8px;
}

#storybook-stage #app.storybook-app .village-recipe-label {
  font-size: 0.875rem;
  margin: 25px 0 10px;
}

#storybook-stage #app.storybook-app .village-recipe {
  gap: 12px;
}

#storybook-stage #app.storybook-app .village-recipe > div {
  padding: 12px 3px;
}

#storybook-stage #app.storybook-app .village-recipe b {
  font-size: 2.25rem;
}

#storybook-stage #app.storybook-app .village-recipe > div > span {
  font-size: 0.875rem;
  margin-top: 6px;
}

#storybook-stage #app.storybook-app .village-word-definition {
  flex-direction: column;
  align-items: stretch;
  margin: 17px 0 24px;
  padding: 13px 0;
  gap: 6px;
}

#storybook-stage #app.storybook-app .village-word-definition > span {
  font-size: 1rem;
}

#storybook-stage #app.storybook-app .village-detail-note {
  font-size: 0.875rem;
  margin-top: 12px;
}

#storybook-stage #app.storybook-app .village-world-svg {
  width: 100%;
  height: 620px;
  min-height: 620px;
  max-height: 620px;
}

/* showModal() promotes dialogs out of transformed containing blocks. Scale each
   native dialog once, including the app dialog mounted outside the stage. */
body:has(#storybook-stage .storybook-app) :is(dialog[id="app-dialog"], dialog.story-dialog, dialog.tree-dialog, dialog.voxel-life-dialog) {
  --storybook-scale: var(--sb-viewport-scale, 1);
  position: fixed;
  inset: auto;
  left: calc(var(--sb-viewport-left, 0px) + var(--sb-viewport-width, 1600px) / 2);
  top: calc(var(--sb-viewport-top, 0px) + var(--sb-viewport-height, 900px) / 2);
  margin: 0;
  width: 760px;
  min-width: 0;
  max-width: none;
  max-height: 780px;
  padding: 28px;
  border: 24px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  color: var(--sb-ink);
  box-shadow: none;
  font-family: var(--sb-text-font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  overflow: auto;
  overscroll-behavior: contain;
  transform: translate(-50%, -50%) scale(var(--storybook-scale, 1));
  transform-origin: center;
  image-rendering: auto;
  user-select: text;
}

body:has(#storybook-stage .storybook-app) :is(dialog[id="app-dialog"], dialog.story-dialog, dialog.tree-dialog, dialog.voxel-life-dialog)::backdrop {
  background: #102c3180;
  backdrop-filter: none;
}

body:has(#storybook-stage .storybook-app) :is(dialog.craft-dialog, dialog.assessment-dialog, dialog.craft-dialog[data-stage="write"]) {
  width: 1000px;
  max-height: 780px;
}

body:has(#storybook-stage .storybook-app) dialog.story-dialog:has(.king-invitation) {
  width: 1160px;
  padding-block: 20px;
  font-size: 2rem;
}
body:has(#storybook-stage .storybook-app) .king-invitation {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  line-height: 1.25;
}
body:has(#storybook-stage .storybook-app) .king-invitation .story-feedback {
  font-size: 2.0625rem;
  line-height: 1.25;
}
body:has(#storybook-stage .storybook-app) dialog.story-dialog:has(.king-invitation) button {
  font-size: 2.0625rem !important;
  padding: 4px 8px;
}
body:has(#storybook-stage .storybook-app) .king-invite-row button[aria-pressed="true"] {
  border-image-source: var(--sb-gold-image);
  border-image-slice: var(--sb-button-slice) fill;
}
body:has(#storybook-stage .storybook-app) dialog.story-dialog:has(.friends-role-plan, .trial-evidence, .ong-ledger, .club-workshop) {
  width: 1240px;
  padding-block: 20px;
  font-size: 2rem;
  line-height: 1.25;
}
body:has(#storybook-stage .storybook-app) dialog.story-dialog:has(.friends-role-plan, .trial-evidence, .ong-ledger, .club-workshop) button {
  font-size: 2.0625rem !important;
  line-height: 1.2;
  padding: 4px 8px;
}
body:has(#storybook-stage .storybook-app) :is(.friends-role-plan, .trial-evidence, .ong-ledger, .club-workshop) .story-feedback {
  font-size: 2.0625rem;
  line-height: 1.25;
}
body:has(#storybook-stage .storybook-app) :is(.friends-role-row, .trial-evidence, .ong-ledger) button[aria-pressed="true"] {
  border-image-source: var(--sb-gold-image);
  border-image-slice: var(--sb-button-slice) fill;
}

body:has(#storybook-stage .storybook-app) :is(dialog.story-map-dialog, #app-dialog[data-kind="world-preview"]) {
  width: 1200px;
}

body:has(#storybook-stage .storybook-app) :is(.dialog-head, .story-dialog-head, .tree-dialog-top) {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 20px;
  padding: 0;
  background: transparent;
  color: var(--sb-ink);
}

body:has(#storybook-stage .storybook-app) :is(dialog[id="app-dialog"], dialog.story-dialog, dialog.tree-dialog, dialog.voxel-life-dialog) h2 {
  margin: 0;
  font-family: var(--sb-heading-font);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

body:has(#storybook-stage .storybook-app) :is(.story-dialog-head small, .craft-steps) {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sb-muted);
}

body:has(#storybook-stage .storybook-app) :is(dialog[id="app-dialog"], dialog.story-dialog, dialog.tree-dialog, dialog.voxel-life-dialog) button {
  min-width: 104px;
  min-height: 104px;
  padding: 10px 16px;
  border: 14px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: #302612;
  font-family: var(--sb-text-font);
  font-size: 1.25rem !important;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: none;
  touch-action: manipulation;
}

body:has(#storybook-stage .storybook-app) :is(dialog[id="app-dialog"], dialog.story-dialog, dialog.tree-dialog, dialog.voxel-life-dialog) .story-primary {
  border-image-source: var(--sb-gold-image);
  border-image-slice: var(--sb-button-slice) fill;
  position: static;
  margin-top: 16px;
}

body:has(#storybook-stage .storybook-app) :is(dialog[id="app-dialog"], dialog.story-dialog, dialog.tree-dialog, dialog.voxel-life-dialog) :is(.button.primary, .sb-button--gold, .sb-button-gold) {
  border-image-source: var(--sb-gold-image);
  border-image-slice: var(--sb-button-slice) fill;
}

body:has(#storybook-stage .storybook-app) .dialog-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

body:has(#storybook-stage .storybook-app) :is(input:not([type="range"]):not([type="checkbox"]), textarea, select) {
  background: #fff;
  color: #202b25;
  border: 2px solid #6a7664;
  border-radius: 0;
  font-family: var(--sb-text-font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

body:has(#storybook-stage .storybook-app) :is(.learn-glyph, .collection-glyph, .quiz-glyph, .dialog-character, .tree-challenge-glyph, .memory-glyph, .craft-word b, .story-field-glyph, .story-success-glyph, .writing-paper > span) {
  font-family: var(--sb-glyph-font);
  font-weight: 400;
  font-variant-ligatures: normal;
  image-rendering: auto;
  filter: none;
  text-shadow: none;
}

body:has(#storybook-stage .storybook-app) :is(.writing-paper, .craft-writing, .assessment-writing, .assessment-ink-review) {
  background: #fff;
  color: #202b25;
  border: 2px solid #7d8a77;
  border-radius: 0;
  box-shadow: none;
  image-rendering: auto;
  filter: none;
}

body:has(#storybook-stage .storybook-app) .craft-practice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 24px;
}

body:has(#storybook-stage .storybook-app) .assessment-write-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 24px;
  margin-top: 16px;
}

body:has(#storybook-stage .storybook-app) :is(.craft-writing, .assessment-writing) {
  display: block;
  width: 480px;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  aspect-ratio: 1;
  margin: 0 auto;
  touch-action: none;
}

body:has(#storybook-stage .storybook-app) :is(.craft-coach, .assessment-write-controls) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 0;
  background: #fff;
  color: var(--sb-ink);
}

body:has(#storybook-stage .storybook-app) .craft-coach .craft-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

body:has(#storybook-stage .storybook-app) :is(.craft-count, .assessment-progress, .assessment-totals, .tree-found-progress, .memory-progress) {
  font-variant-numeric: tabular-nums;
}

body:has(#storybook-stage .storybook-app) .craft-count {
  font-size: 2.5rem;
  line-height: 1.2;
}

body:has(#storybook-stage .storybook-app) :is(.craft-dialog .craft-instruction, .assessment-prompt) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

body:has(#storybook-stage .storybook-app) .craft-word b {
  font-size: 6rem;
  line-height: 1.3;
}

body:has(#storybook-stage .storybook-app) :is(.craft-dialog .craft-status, .craft-coach > small, .assessment-dialog .assessment-note, .memory-note) {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sb-muted);
}

body:has(#storybook-stage .storybook-app) .story-atlas-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
}

body:has(#storybook-stage .storybook-app) .story-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body:has(#storybook-stage .storybook-app) .sb-orientation-panel {
  border: 28px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image);
  border-image-slice: var(--sb-panel-slice) fill;
  border-image-repeat: stretch;
  background: transparent;
  color: var(--sb-ink);
  box-shadow: none;
  font-family: var(--sb-text-font);
}

body:has(#storybook-stage .storybook-app) .sb-orientation-panel > .sb-icon {
  width: 104px;
  height: 104px;
}

body:has(#storybook-stage .storybook-app) :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: revert;
  outline-offset: 4px;
}

body:has(#storybook-stage .storybook-app) :is(button:disabled, [aria-disabled="true"]) {
  opacity: 0.6;
  cursor: not-allowed;
}

#storybook-stage #app.storybook-app [hidden] {
  display: none !important;
}


/* source: storybook-opening.css */
/* Top-layer sibling of the stage: inherit viewport geometry, scale exactly once. */
dialog.sb-opening {
  position: fixed;
  inset: auto;
  left: calc(var(--sb-viewport-left, 0px) + var(--sb-viewport-width, 1600px) / 2);
  top: calc(var(--sb-viewport-top, 0px) + var(--sb-viewport-height, 900px) / 2);
  width: 1600px;
  height: 900px;
  min-width: 1600px;
  min-height: 900px;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--sb-viewport-scale, 1));
  transform-origin: center;
  background: #000;
  color: #fff;
  font-family: var(--sb-text-font, "Malgun Gothic", sans-serif);
  font-size: 32px;
  line-height: 1.5;
}

dialog.sb-opening::backdrop {
  background: #000;
}

dialog.sb-opening:not([open]) {
  display: none;
}

.sb-opening .sb-opening-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.sb-opening .sb-opening-header {
  position: absolute;
  inset: 24px 40px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sb-opening .sb-opening-title {
  margin: 0;
  padding: 8px 16px;
  background: rgb(0 0 0 / 80%);
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.sb-opening .sb-opening-caption {
  position: absolute;
  inset: auto 48px 152px;
  margin: 0;
  padding: 16px 24px;
  background: rgb(0 0 0 / 80%);
  color: #fff;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.sb-opening .sb-opening-status {
  position: absolute;
  inset: 340px 280px auto;
  margin: 0;
  padding: 24px;
  background: rgb(0 0 0 / 90%);
  color: #fff;
  text-align: center;
  word-break: keep-all;
}

.sb-opening .sb-opening-status:empty {
  display: none;
}

.sb-opening .sb-opening-controls {
  position: absolute;
  inset: auto 48px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

/* Use the shared PNG frame, not a drawn replacement or the primary gold CTA. */
.sb-opening .sb-opening-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 104px;
  min-height: 104px;
  padding: 8px 24px;
  border: 16px solid transparent;
  border-radius: 0;
  border-image-source: var(--sb-panel-image, url("assets/storybook/v1/frame-parchment.png"));
  border-image-slice: var(--sb-panel-slice, 16%) fill;
  border-image-repeat: stretch;
  background: transparent;
  box-shadow: none;
  color: var(--sb-ink, #30291e);
  font-family: inherit;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.sb-opening .sb-opening-control[hidden] {
  display: none;
}

.sb-opening .sb-opening-control:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}


/* source: storybook-home.css */
/* Artwork is raster; this file only positions the fixed 1600 x 900 composition. */
#storybook-stage .sb-home{position:relative;width:1600px;height:772px;overflow:hidden;isolation:isolate}
#storybook-stage .sb-world-art{position:absolute;inset:0;width:1600px;height:772px;object-fit:cover;object-position:50% 100%;z-index:-1;pointer-events:none}
#storybook-stage .sb-home-heading{position:absolute;left:48px;top:22px;width:540px;height:116px;padding:10px 16px;border-width:10px;color:#223d21}
#storybook-stage .sb-home-heading>p{font-size:22px;line-height:1.4;margin:0 0 4px;font-weight:500;color:#38523d}
#storybook-stage .sb-home-heading h1{font:700 32px/1.2 var(--sb-heading-font);letter-spacing:-.01em;margin:0}
#storybook-stage .sb-art-note{position:absolute;right:30px;top:20px;display:flex;align-items:center;gap:16px}
#storybook-stage .sb-art-note>span{width:230px;min-height:56px;display:grid;place-items:center;padding:6px 8px;border-width:8px;font-size:16px;font-weight:600;line-height:1.4;color:#334535;text-align:center}
#storybook-stage .sb-art-note .sb-button{width:190px;min-height:104px;padding:8px;border-width:14px;border-image-width:14px;font-size:22px;font-weight:650;white-space:nowrap}
#storybook-stage .sb-art-note .sb-workbook{display:grid;place-items:center;width:210px;font-size:32px;text-decoration:none}
#storybook-stage .sb-current-quest{position:absolute;left:48px;bottom:142px;width:450px;height:320px;padding:16px;border-width:16px;border-image-width:20px;color:#382a1d;display:grid;grid-template-rows:26px 76px 26px 104px;gap:3px;align-content:start}
#storybook-stage .sb-quest-chapter{display:inline-block;font:600 23px var(--sb-heading-font)}
#storybook-stage .sb-current-quest h2{margin:0;font:700 32px/1.18 var(--sb-heading-font);height:76px;overflow:hidden;overflow-wrap:anywhere}
#storybook-stage .sb-current-quest>p{font-size:17px;line-height:1.4;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#554735}
#storybook-stage .sb-quest-progress{position:absolute;right:29px;top:27px;font-size:16px;color:#5c5935}
#storybook-stage .sb-adventure-start{position:static;width:100%;height:104px;padding:14px 18px;font:750 32px var(--sb-heading-font);display:flex;align-items:center;justify-content:center;gap:18px}
#storybook-stage .sb-home-dock{position:absolute;bottom:0;left:0;width:1600px;height:126px;display:flex;align-items:center;padding:10px 32px;gap:22px;box-sizing:border-box;border:22px solid transparent;border-image:url("assets/storybook/v1/rail-wood.png") 14% fill / 22px / 0 stretch;color:#fff3d6}
#storybook-stage .sb-dock-glyphs{width:390px;flex:none;position:relative;padding-top:14px}
#storybook-stage .sb-dock-glyphs>small{position:absolute;top:-8px;left:8px;font-size:14px;color:#fff3d6}
#storybook-stage .sb-dock-glyphs>div{display:flex;gap:12px}
#storybook-stage .sb-glyph-card{width:185px;height:88px;padding:10px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px}
#storybook-stage .sb-glyph-card>b{font:400 47px/1 Batang,serif;color:#202b25}
#storybook-stage .sb-glyph-card>span{font-size:18px;max-width:93px;line-height:1.15;white-space:normal}
#storybook-stage .sb-home-dock>.sb-dock-button{width:240px;height:104px;padding:8px;border-width:16px;border-image-width:16px;display:flex;align-items:center;gap:5px;justify-content:center;font:600 24px var(--sb-heading-font);white-space:nowrap}
#storybook-stage .sb-home-dock>.sb-dock-button>.sb-icon{width:52px;height:52px;flex:none}
#storybook-stage .sb-story-map{position:relative;isolation:isolate;width:1600px;height:772px;overflow:hidden}
#storybook-stage .sb-map-art{position:absolute;inset:0;width:1600px;height:772px;object-fit:cover;z-index:-1;pointer-events:none}
#storybook-stage .sb-map-heading{position:absolute;left:38px;right:38px;top:18px;height:98px;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;border-width:12px;border-image-width:18px;color:#3e3627}
#storybook-stage .sb-map-heading h1{font:700 36px var(--sb-heading-font);margin:0}
#storybook-stage .sb-map-heading small{font-size:15px}
#storybook-stage .sb-map-heading p{font-size:24px;font-weight:700}
#storybook-stage .sb-map-nodes{position:absolute;inset:138px 44px 28px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);gap:16px 22px}
#storybook-stage .sb-story-node{display:grid;grid-template-columns:40px 1fr;grid-template-rows:1fr 24px;align-items:center;column-gap:8px;padding:10px;border-width:12px;border-image-width:16px;min-width:0;min-height:0;text-align:left}
#storybook-stage .sb-story-node>b{grid-row:1 / 3;align-self:center;font:700 35px var(--sb-heading-font)}
#storybook-stage .sb-story-node>span{font:400 23px/1.18 var(--sb-heading-font);word-break:keep-all;overflow-wrap:anywhere}
#storybook-stage .sb-story-node>small{font-size:17px;line-height:1.3}
#storybook-stage .sb-story-node.is-current{border-image-source:url("assets/storybook/v1/button-gold.png")}
#storybook-stage #app.storybook-app .sb-story-node.is-locked{filter:saturate(.5);opacity:1;color:#655b45}
#storybook-stage .sb-story-node.is-complete>small{color:#245d3b;font-weight:800}


/* source: axe-rhythm.css */
/* Stage-local geometry inherits the single 1600 x 900 storybook scale. */
.voxel-stage .axe-rhythm-panel {
  --axe-ink: #30291e;
  --axe-muted: #58503e;
  --axe-focus: #235d49;
  position: absolute;
  z-index: 90;
  inset: auto auto 32px 32px;
  transform: none;
  box-sizing: border-box;
  width: 540px;
  max-width: calc(100% - 64px);
  padding: 28px 32px 24px;
  border: 0;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  color: var(--axe-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  pointer-events: auto;
  touch-action: manipulation;
  isolation: isolate;
}

.voxel-stage .axe-rhythm-panel [hidden],
.voxel-stage .axe-rhythm-panel[hidden] { display: none !important; }

.voxel-stage .axe-rhythm-heading,
.voxel-stage .axe-rhythm-controls,
.voxel-stage .axe-rhythm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.voxel-stage .axe-rhythm-title {
  margin: 0;
  font-family: var(--sb-heading-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: 26px;
  line-height: 1.2;
  word-break: keep-all;
}

.voxel-stage .axe-rhythm-help { margin: 4px 0; font-size: 18px; line-height: 1.25; text-wrap: balance; word-break: keep-all; }
.voxel-stage .axe-rhythm-controls { font-size: 17px; }
.voxel-stage .axe-rhythm-mode-label { display: flex; align-items: center; gap: 12px; }
.voxel-stage .axe-rhythm-progress { margin: 0; font-variant-numeric: tabular-nums; }

.voxel-stage .axe-rhythm-button,
.voxel-stage .axe-rhythm-mode {
  box-sizing: border-box;
  /* At 844 x 390, the fixed stage scales by 390 / 900. */
  min-height: 104px;
  min-width: 104px;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--axe-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
}

.voxel-stage .axe-rhythm-mode { padding-inline: 18px 30px; }
.voxel-stage .axe-rhythm-panel :is(button, select):focus-visible { outline: 4px solid var(--axe-focus); outline-offset: 4px; }
.voxel-stage .axe-rhythm-panel button:disabled { cursor: not-allowed; opacity: .6; }

.voxel-stage .axe-rhythm-strike {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 230px;
  margin: 0;
  padding: 0;
  background: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.voxel-stage .axe-rhythm-rings { position: relative; display: block; width: 340px; max-width: 100%; height: 200px; pointer-events: none; }
.voxel-stage .axe-rhythm-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 110px;
  height: 110px;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}
.voxel-stage .axe-rhythm-ring-target { opacity: .55; }
.voxel-stage .axe-rhythm-strike-label { display: block; font-size: 18px; }
.voxel-stage .axe-rhythm-status { min-height: 42px; margin: 2px 0; font-size: 16px; line-height: 1.3; font-weight: 700; text-wrap: balance; word-break: keep-all; }
.voxel-stage .axe-rhythm-actions { flex-direction: column; align-items: stretch; gap: 6px; }
.voxel-stage .axe-rhythm-actions .axe-rhythm-button { width: 100%; }
.voxel-stage .axe-rhythm-actions [data-axe-rhythm="resume"] { min-height: 104px; font-size: 20px; }
.voxel-stage .axe-rhythm-actions [data-axe-rhythm="skip"] {
  min-height: 104px;
  padding: 8px 16px;
  background-image: url("assets/storybook/v1/button-wood.png");
  font-size: 17px;
}
.voxel-stage .axe-rhythm-note { margin: 4px 0 0; color: var(--axe-muted); font-size: 13px; line-height: 1.35; word-break: keep-all; }
.voxel-stage .axe-rhythm-panel[data-paused="true"] .axe-rhythm-rings { opacity: .55; }

/* No independent viewport breakpoints or animations: parent scaling and the
   elapsed-clock model own geometry and ring motion, including reduced motion. */
.voxel-stage .axe-stack {
  position: absolute;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  touch-action: manipulation;
  background: #426340 url("assets/chapter-one/axe-stack/valley.webp") center / cover no-repeat;
  color: #fff4d3;
  font-family: var(--sb-text-font, "Malgun Gothic", sans-serif);
}
.voxel-stage .axe-stack[hidden], .voxel-stage .axe-stack [hidden] { display: none !important; }
.axe-stack button {
  border: 2px solid #e2aa64;
  border-radius: .45cqw;
  padding: .55cqw .95cqw;
  background: #44281c;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 4cqw;
}
.axe-stack button:focus-visible, .axe-stack input:focus-visible {
  outline: .3cqw solid #fff4a0;
  outline-offset: .26cqw;
}
.axe-stack-hud {
  position: absolute;
  inset: 3% 3% auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 2cqw;
  align-items: start;
  z-index: 3;
}
.axe-stack-score, .axe-stack-clock, .axe-stack-combo, .axe-stack-cue {
  font-weight: 800;
  background: #352017f0;
  border: 2px solid #e2aa64;
  box-shadow: 0 .25cqw #20140f;
  border-radius: .45cqw;
}
.axe-stack-score { justify-self: start; padding: .65cqw 1.15cqw; font-size: 1.55cqw; }
.axe-stack-score strong { font-size: 2.85cqw; margin-left: .45cqw; font-variant-numeric: tabular-nums; }
.axe-stack-clock {
  grid-column: 2;
  text-align: center;
  font-size: 2.1cqw;
  padding: .3cqw 1cqw .7cqw;
  font-variant-numeric: tabular-nums;
}
.axe-stack-track { height: .55cqw; background: #aa8265; }
.axe-stack-track i { display: block; height: 100%; background: #ffdb67; transform-origin: left; }
.axe-stack-clock[data-urgent="true"] { color: #ffab9c; border-color: #ffab9c; }
.axe-stack-clock[data-urgent="true"] i { background: #ff9e82; }
.axe-stack-tools { grid-column: 3; display: flex; gap: .5cqw; justify-content: flex-end; font-size: 1.55cqw; }
.axe-stack-tools button[data-stack="sound"] { white-space: nowrap; }
.axe-stack-tools button[data-stack="sound"][aria-pressed="false"] { color: #e6c2a2; border-color: #ae8b70; }
.axe-stack-actor {
  position: absolute;
  inset: auto auto 23% 17%;
  width: 31%;
  height: 58%;
  pointer-events: none;
}
.axe-stack-actor img { position: absolute; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.axe-stack-actor img:last-child { opacity: 0; }
.axe-stack-pile {
  position: absolute;
  inset: auto auto 23% 47%;
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.axe-stack-pile img { width: 100%; height: 6.1cqw; object-fit: fill; display: block; margin-top: -.32cqw; }
.axe-stack-pile .axe-stack-target {
  z-index: 1;
  outline: .32cqw solid #ffe880;
  outline-offset: -.16cqw;
  border-radius: .55cqw;
  filter: drop-shadow(0 0 .5cqw #4b2e16);
}
.axe-stack-pile .axe-stack-flying { position: absolute; bottom: 0; left: 0; z-index: 2; }
.axe-stack-combo, .axe-stack-cue {
  position: absolute;
  left: 71%;
  max-width: 26%;
  margin: 0;
  padding: .55cqw .9cqw;
  font-size: 1.6cqw;
  z-index: 2;
}
.axe-stack-combo { bottom: 39%; color: #ffdb6f; font-size: 2.4cqw; }
.axe-stack-cue { bottom: 30%; }
.axe-stack-combo:empty, .axe-stack-cue:empty { display: none; }
.axe-stack-keys {
  position: absolute;
  inset: auto 3% 3%;
  display: flex;
  justify-content: center;
  gap: 1.05cqw;
}
.axe-stack .axe-stack-keys button {
  position: relative;
  width: 19cqw;
  height: 8.2cqw;
  background: #382318;
  padding: .3cqw .5cqw .6cqw;
  box-shadow: 0 .4cqw #23140c;
}
.axe-stack-keys button img { width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.axe-stack-keys button span {
  position: absolute;
  top: .6cqw;
  left: .8cqw;
  border-radius: .2cqw;
  padding: .12cqw .45cqw;
  background: #2c1c16e8;
  font-size: 1.45cqw;
  pointer-events: none;
}
.axe-stack-keys button:active { transform: translateY(.3cqw); box-shadow: none; }
.axe-stack-sheet {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 4;
  width: 51cqw;
  transform: translate(-50%, -50%);
  padding: 2.2cqw 2.7cqw;
  border: .28cqw solid #eab575;
  border-radius: .65cqw;
  background: #321e16f7;
  box-shadow: 0 0 0 .55cqw #46261c, 0 .8cqw 2.7cqw #1d130caa;
  text-align: center;
  font-size: 1.7cqw;
}
.axe-stack-sheet p { margin: .6cqw 0; }
.axe-stack-sheet .axe-stack-kicker { color: #f8c768; font-size: 1.4cqw; font-weight: 800; }
.axe-stack-sheet h2 {
  margin: 0;
  color: #fff4d3;
  font-size: 4cqw;
  line-height: 1.12;
}
.axe-stack-modes, .axe-stack-actions { display: flex; gap: .7cqw; justify-content: center; margin-top: 1.3cqw; }
.axe-stack .axe-stack-modes button { flex: 1; }
.axe-stack-modes strong, .axe-stack-modes small { display: block; }
.axe-stack-modes small { font-size: 1.25cqw; }
.axe-stack button[aria-pressed="true"], .axe-stack button[data-stack="start"], .axe-stack[data-status="won"] button[data-stack="continue"] {
  background: #ffcd66;
  color: #302015;
}
.axe-stack[data-status="won"] button[data-stack="start"] { background: #44281c; color: #fff4d3; }
.axe-stack-timed { display: inline-flex; align-items: center; gap: .5cqw; margin-top: 1cqw; }
.axe-stack-timed input { width: 1.85cqw; height: 1.85cqw; accent-color: #ffcd66; }


/* source: chapter-one-honest-axe.css */
.axe-badge-award{display:grid;grid-template-columns:188px 1fr;gap:22px;align-items:center;padding:20px;margin:12px 0 24px;color:#31493b;background-image:url('assets/storybook/v2/paper-frame.png');background-size:100% 100%;font-family:'Pretendard',sans-serif;}
.axe-badge-award img{display:block;width:188px;height:188px;object-fit:contain;}
.axe-badge-award h3{font-size:29px;margin:8px 0;line-height:1.2;}
.axe-badge-award p{font-size:19px;line-height:1.5;margin:8px 0;}
.axe-badge-award small{font-size:14px;line-height:1.6;}
.axe-badge-award[data-earned="false"] img{filter:grayscale(1);opacity:.45;}
.voxel-stage:has(.axe-rhythm-panel:not([hidden])) .voxel-gate{visibility:hidden;pointer-events:none;}


/* source: sky-ascent.css */
/* Geometry lives in the parent's fixed 1600 x 900 landscape stage. All artwork
   is imported by the scene or comes from the existing original PNG controls. */
.voxel-stage .sky-ascent-panel {
  --sky-ink: #30291e;
  --sky-focus: #235d49;
  --sky-target: 104px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--sky-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: 32px;
  line-height: 1.25;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .sky-ascent-panel[hidden],
.voxel-stage .sky-ascent-panel [hidden] { display: none !important; }
.voxel-stage:has(.sky-ascent-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .sky-ascent-scene,
.voxel-stage .sky-ascent-view { position: absolute; inset: 0; }
.voxel-stage .sky-ascent-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .sky-ascent-heading,
.voxel-stage .sky-ascent-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
}
.voxel-stage .sky-ascent-heading { top: 8px; }
.voxel-stage .sky-ascent-summary { flex: 1; min-width: 0; }
.voxel-stage .sky-ascent-title { margin: 0; font-size: 38px; line-height: 1.15; }
.voxel-stage .sky-ascent-objective { margin: 4px 0 0; font-size: 30px; word-break: keep-all; }
.voxel-stage .sky-ascent-status {
  position: absolute;
  top: 138px;
  left: 28px;
  margin: 0;
  padding: 12px 22px;
  max-width: 1160px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .sky-ascent-controls { bottom: 8px; justify-content: space-between; }
.voxel-stage .sky-ascent-movement,
.voxel-stage .sky-ascent-placement { display: flex; gap: 8px; }
.voxel-stage .sky-ascent-button {
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: var(--sky-target);
  min-width: var(--sky-target);
  padding: 12px 22px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--sky-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .sky-ascent-button:focus-visible { outline: 5px solid var(--sky-focus); outline-offset: -8px; }
.voxel-stage .sky-ascent-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .sky-ascent-button[data-sky-ascent="help"],
.voxel-stage .sky-ascent-button[data-sky-ascent="close"] {
  background-image: url("assets/storybook/v1/button-wood.png");
}
.voxel-stage .sky-ascent-gate,
.voxel-stage .sky-ascent-portrait {
  position: absolute;
  inset: 270px 180px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 32px 48px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .sky-ascent-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .sky-ascent-portrait { inset: 0; z-index: 3; padding: 120px; }
/* No UI animation or generated scenery. Reduced-motion is passed to the view. */


/* source: cloud-jump.css */
.voxel-stage .cloud-jump {
  position: absolute;
  inset: 0;
  z-index: 91;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  color: #fff6da;
  background: #2466bc;
  font-family: var(--sb-text-font, "Malgun Gothic", sans-serif);
  touch-action: none;
}
.voxel-stage .cloud-jump[hidden], .cloud-jump [hidden] { display: none !important; }
.cloud-jump-landscape, .cloud-jump-world, .cloud-jump-path { position: absolute; inset: 0; pointer-events: none; }
.cloud-jump-landscape {
  inset: -12% 0 0;
  background: url("assets/chapter-two/cloud-jump/valley.webp") center bottom / cover no-repeat;
}
.cloud-jump-world img { user-select: none; -webkit-user-drag: none; }
.cloud-jump-rope, .cloud-jump-siblings, .cloud-jump-tiger, .cloud-jump-tile { position: absolute; }
.cloud-jump-rope {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2.45cqw;
  transform: translateX(-50%);
  background: url("assets/chapter-two/cloud-jump/rope.webp") center top / 100% 49cqw repeat-y;
  filter: drop-shadow(.18cqw .15cqw #502e21aa);
}
.cloud-jump-tile {
  transform: translateX(-50%);
  width: 10.9cqw;
  height: 2.65cqw;
  background: url("assets/chapter-two/cloud-jump/stair.webp") center / 100% 100% no-repeat;
}
.cloud-jump-tile.is-target {
  filter: drop-shadow(0 .13cqw #faae27) drop-shadow(0 -.13cqw #faae27) drop-shadow(0 0 .6cqw #ffde51);
}
.cloud-jump-tile span {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  padding: .35cqw .55cqw;
  background: #302019;
  color: #ffdf8c;
  font-size: 1.45cqw;
  font-weight: 800;
  line-height: 1;
}
.cloud-jump-siblings, .cloud-jump-tiger {
  width: 12cqw;
  height: auto;
  transform: translate(-50%, -97%) scaleX(var(--facing, 1));
  filter: drop-shadow(.17cqw .2cqw #1b376f66);
}
.cloud-jump-tiger { width: 10.4cqw; }
.cloud-jump-hud {
  position: absolute;
  z-index: 1;
  inset: 2.8% 3% auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 1cqw;
  align-items: start;
}
.cloud-jump-progress, .cloud-jump-hud p, .cloud-jump button {
  border: .2cqw solid #f1b66c;
  border-radius: .45cqw;
  color: inherit;
  background: #3a2418;
  box-shadow: 0 .28cqw #23180f;
}
.cloud-jump-progress {
  display: grid;
  gap: .25cqw;
  justify-self: start;
  padding: .65cqw 1.1cqw;
  font-size: 2.45cqw;
  font-variant-numeric: tabular-nums;
}
.cloud-jump-progress small { font-size: 1.45cqw; font-weight: 800; color: #ffcd75; }
.cloud-jump-hud p {
  margin: 0;
  justify-self: center;
  align-self: center;
  text-align: center;
  padding: .48cqw .8cqw;
  font-size: 1.65cqw;
  font-weight: 800;
}
.cloud-jump-hud p:empty { visibility: hidden; }
.cloud-jump-tools { display: flex; justify-content: flex-end; gap: .6cqw; }
.cloud-jump button {
  min-height: 4.1cqw;
  padding: .4cqw 1cqw;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.cloud-jump button:focus-visible { outline: .28cqw solid #ffed9d; outline-offset: .25cqw; }
.cloud-jump-tools button { min-width: 6.5cqw; min-height: 6.5cqw; font-size: 1.85cqw; }
.cloud-jump-tools button[data-jump="music"] { white-space: nowrap; }
.cloud-jump-tools button[data-jump="music"][aria-pressed="false"] { color: #e6c2a2; border-color: #ae8b70; }
.cloud-jump-controls {
  position: absolute;
  inset: auto 3% 3%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.cloud-jump .cloud-jump-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85cqw;
  width: 20cqw;
  height: 7.8cqw;
  padding: 0;
  background: #1a528e;
  border: .38cqw solid #efc38c;
  font-size: 2.3cqw;
  line-height: 1;
  text-shadow: .05em .06em #122f51;
  pointer-events: auto;
  touch-action: none;
}
.cloud-jump-controls b { font-size: 4.1cqw; }
.cloud-jump-controls small { display: block; margin-top: .5cqw; font-size: 1.23cqw; color: #ffecc4; }
.cloud-jump .cloud-jump-controls button:last-child { background: #9a4e14; text-shadow: .05em .06em #55210c; }
.cloud-jump .cloud-jump-controls button:active {
  color: #fff2a1;
  transform: translateY(.32cqw);
  box-shadow: inset 0 .25cqw #15120c77;
  border-color: #ffe191;
}
.cloud-jump-card {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 50%;
  width: min(52cqw, 80%);
  transform: translate(-50%, -50%);
  padding: 2.5cqw 2.9cqw;
  border: .26cqw solid #f5c78b;
  border-radius: .6cqw;
  background: #302014f5;
  box-shadow: 0 0 0 .55cqw #613719, 0 .8cqw 2cqw #0f244c77;
  text-align: center;
  font-size: 1.8cqw;
}
.cloud-jump-card h2 { color: inherit; font-size: 3.85cqw; line-height: 1.13; margin: .45cqw 0 .9cqw; }
.cloud-jump-card p { margin: .6cqw 0; }
.cloud-jump-card .cloud-jump-kicker { color: #ffcd75; font-size: 1.5cqw; font-weight: 800; }
.cloud-jump-ending {
  display: flex;
  justify-content: center;
  gap: .9cqw;
  margin: 1cqw auto;
}
.cloud-jump-ending img {
  width: auto;
  height: 23cqw;
  max-width: 45%;
  object-fit: contain;
  border: .16cqw solid #c98f55;
}
.cloud-jump[data-status="caught"] .cloud-jump-ending img { max-width: 72%; }
.cloud-jump-actions { margin-top: 1.45cqw; }
.cloud-jump .cloud-jump-actions button { padding-inline: 1.75cqw; background: #ffc963; color: #372113; }


/* source: gourd-coop.css */
/* The parent scales the fixed 1600 x 900 stage; JS preserves 44px hit areas. */
.voxel-stage .gourd-coop-panel {
  --gourd-ink: #30291e;
  --gourd-focus: #235d49;
  --gourd-target: 88px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--gourd-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: 28px;
  line-height: 1.25;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .gourd-coop-panel[hidden],
.voxel-stage .gourd-coop-panel [hidden] { display: none !important; }
.voxel-stage:has(.gourd-coop-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .gourd-coop-scene,
.voxel-stage .gourd-coop-view { position: absolute; inset: 0; }
.voxel-stage .gourd-coop-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .gourd-coop-heading,
.voxel-stage .gourd-coop-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
}
.voxel-stage .gourd-coop-heading { top: 8px; }
.voxel-stage .gourd-coop-summary { flex: 1; min-width: 0; }
.voxel-stage .gourd-coop-title { margin: 0; font-size: 34px; line-height: 1.15; }
.voxel-stage .gourd-coop-objective { margin: 4px 0 0; word-break: keep-all; }
.voxel-stage .gourd-coop-status {
  position: absolute;
  top: calc(var(--gourd-target) + 32px);
  left: 28px;
  margin: 0;
  padding: 10px 20px;
  max-width: 1380px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .gourd-coop-controls { bottom: 8px; justify-content: flex-end; }
.voxel-stage .gourd-coop-movement { display: flex; gap: 12px; margin-right: auto; }
.voxel-stage .gourd-coop-button {
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: var(--gourd-target);
  min-width: var(--gourd-target);
  padding: 12px 22px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--gourd-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .gourd-coop-button:focus-visible { outline: 5px solid var(--gourd-focus); outline-offset: -8px; }
.voxel-stage .gourd-coop-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .gourd-coop-button[data-gourd-coop="help"],
.voxel-stage .gourd-coop-button[data-gourd-coop="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .gourd-coop-gate,
.voxel-stage .gourd-coop-portrait {
  position: absolute;
  inset: 270px 180px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 32px 48px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .gourd-coop-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .gourd-coop-portrait { inset: 0; z-index: 3; padding: 120px; }

.voxel-stage .gourd-coop-rhythm {
  --rhythm-dark: #251b17;
  --rhythm-gold: #ffcb59;
  --rhythm-paper: #fff1ce;
  --gourd-focus: #ffcf6e;
  background: #563823;
}
.voxel-stage .gourd-coop-yard,
.voxel-stage .gourd-coop-yard img { position: absolute; }
.voxel-stage .gourd-coop-yard { inset: 0; overflow: hidden; }
.voxel-stage .gourd-coop-yard img { display: block; pointer-events: none; user-select: none; max-width: none; }
.voxel-stage .gourd-art-yard-back { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voxel-stage .gourd-art-heungbu,
.voxel-stage .gourd-art-partner {
  bottom: 15%;
  width: auto;
  height: 43%;
  transform: translateX(calc(29px * var(--pull, 0))) rotate(calc(3deg * var(--pull, 0)));
  transform-origin: 50% 95%;
}
.voxel-stage .gourd-art-heungbu { left: calc(13% + 17px); }
.voxel-stage .gourd-art-partner { right: 13%; }
.voxel-stage .gourd-art-fruit-left,
.voxel-stage .gourd-art-fruit-right {
  left: 50%;
  bottom: 16%;
  height: 58%;
  width: auto;
  transform-origin: 50% 88%;
}
.voxel-stage .gourd-art-fruit-left {
  clip-path: inset(0 50% 0 0);
  transform: translate(calc(-50% - 20% * var(--split, 0)), calc(13% * var(--split, 0))) rotate(calc(-21deg * var(--split, 0)));
}
.voxel-stage .gourd-art-fruit-right {
  clip-path: inset(0 0 0 50%);
  transform: translate(calc(-50% + 20% * var(--split, 0)), calc(13% * var(--split, 0))) rotate(calc(21deg * var(--split, 0)));
}
.voxel-stage .gourd-art-saw {
  left: 50%;
  top: 61%;
  width: 36%;
  height: auto;
  transform: translate(calc(-50% + 5% * var(--pull, 0)), calc(-50% + 224% * var(--lower, 0))) rotate(calc(-8deg * var(--lower, 0)));
}
.voxel-stage .gourd-coop-rhythm .gourd-coop-heading {
  inset: 24px 32px auto;
  padding: 0;
  background: none;
  pointer-events: none;
}
.voxel-stage .gourd-coop-rhythm .gourd-coop-summary {
  flex: none;
  margin-right: auto;
  padding: 14px 32px 17px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
}
.voxel-stage .gourd-coop-rhythm [data-gourd-coop="close"] { pointer-events: auto; }
.voxel-stage .gourd-coop-rhythm .gourd-coop-title { font-size: 43px; }
.voxel-stage .gourd-coop-rhythm .gourd-coop-objective { font-size: 25px; }
.voxel-stage .gourd-coop-rhythm .gourd-coop-status {
  inset: auto auto 24px 32px;
  max-width: 445px;
  padding: 16px 24px;
  font-size: 25px;
}
.voxel-stage .gourd-coop-rhythm .gourd-coop-controls {
  inset: auto 32px 24px;
  padding: 0;
  background: none;
  pointer-events: none;
}
.voxel-stage .gourd-coop-rhythm .gourd-coop-controls button { pointer-events: auto; }
.voxel-stage .gourd-coop-rhythm .gourd-coop-button[data-gourd-coop="start"],
.voxel-stage .gourd-coop-rhythm .gourd-coop-button[data-gourd-coop="resume"] { margin-inline: auto; }
.voxel-stage .gourd-coop-rhythm .gourd-coop-button[data-gourd-coop="pause"],
.voxel-stage .gourd-coop-rhythm .gourd-coop-button[data-gourd-coop="help"] {
  font-size: 25px;
  background-image: url("assets/storybook/v1/button-wood.png");
}
.voxel-stage .gourd-coop-power {
  position: absolute;
  top: 25px;
  right: calc(var(--gourd-target) + 50px);
  width: 375px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  color: var(--rhythm-dark);
  border: 0;
}
.voxel-stage .gourd-coop-hanja { font-size: 48px; color: #6d3722; }
.voxel-stage .gourd-coop-cells { display: flex; flex: 1; gap: 6px; }
.voxel-stage .gourd-coop-cell {
  flex: 1;
  height: 24px;
  background: #533c31;
  border: 2px solid #896650;
}
.voxel-stage .gourd-coop-cell.is-filled {
  background: #f5a734;
  border-color: #ffdc76;
  box-shadow: inset 0 -5px #c46623;
}
.voxel-stage .gourd-coop-count { font-size: 26px; font-variant-numeric: tabular-nums; }
.voxel-stage .gourd-coop-round {
  position: absolute;
  right: calc(var(--gourd-target) + 50px);
  top: 116px;
  padding: 8px 21px 10px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  color: #6d3722;
  font-size: 27px;
  font-weight: 800;
}
.voxel-stage .gourd-coop-target[data-gourd-coop="strike"] {
  position: absolute;
  inset: auto auto 16px 50%;
  width: 214px;
  height: 184px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  background: #251b17ed;
  color: var(--rhythm-paper);
  border: 5px solid #a77852;
  box-shadow: inset 0 0 0 5px #54372b, 0 9px #251b17ad;
  overflow: hidden;
  isolation: isolate;
}
.voxel-stage .gourd-coop-target:focus-visible { outline-offset: 4px; }
.voxel-stage .gourd-coop-target .gourd-coop-outline,
.voxel-stage .gourd-coop-target .gourd-coop-glyph {
  position: absolute;
  inset: 0 0 34px;
  display: grid;
  place-content: center;
  font-size: 99px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.voxel-stage .gourd-coop-outline { color: transparent; -webkit-text-stroke: 4px #dfae7c; }
.voxel-stage .gourd-coop-glyph { color: #ffe2a1; text-shadow: 0 6px #6a3c23; }
.voxel-stage .gourd-coop-cue {
  position: absolute;
  bottom: 13px;
  font-size: 22px;
  pointer-events: none;
}
.voxel-stage .gourd-coop-target[data-beat="response"],
.voxel-stage .gourd-coop-target[data-beat="hit"] { border-color: var(--rhythm-gold); }
.voxel-stage .gourd-coop-target[data-beat="response"] .gourd-coop-glyph,
.voxel-stage .gourd-coop-target[data-beat="response"] .gourd-coop-cue,
.voxel-stage .gourd-coop-target[data-beat="hit"] .gourd-coop-cue { color: var(--rhythm-gold); }
.voxel-stage .gourd-coop-target[data-beat="hit"] .gourd-coop-glyph { font-size: 69px; }
.voxel-stage .gourd-coop-wide-glyph .gourd-coop-outline,
.voxel-stage .gourd-coop-wide-glyph .gourd-coop-glyph { font-size: 76px; }
.voxel-stage .gourd-coop-wide-glyph[data-beat="hit"] .gourd-coop-glyph { font-size: 63px; }
.voxel-stage .gourd-coop-target[data-beat="hit"] .gourd-coop-outline { visibility: hidden; }
.voxel-stage .gourd-coop-target[data-beat="hit"]:disabled { opacity: 1; }
.voxel-stage .gourd-coop-target[data-beat="spent"] .gourd-coop-glyph { opacity: .44; }
.voxel-stage .gourd-coop-fx {
  position: absolute;
  left: 50%;
  top: 59%;
  width: 340px;
  height: auto;
  transform: translate(-50%, -75%);
  image-rendering: pixelated;
  pointer-events: none;
}
.voxel-stage .gourd-coop-fx-burst { width: 770px; transform: translate(-40%, -73%); }
.voxel-stage .gourd-coop-jewel {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -40%);
  filter: drop-shadow(0 0 18px #ffc457b0);
  image-rendering: pixelated;
  pointer-events: none;
}
.voxel-stage .gourd-coop-treasure {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  padding: 10px 24px;
  color: var(--rhythm-gold);
  background: var(--rhythm-dark);
  border: 4px solid var(--rhythm-gold);
  box-shadow: 0 6px #54372b;
  font-size: 48px;
  white-space: nowrap;
  pointer-events: none;
}


/* source: persimmon-match.css */
/* The parent scales the fixed 1600 x 900 stage; JS preserves 44px hit areas. */
.voxel-stage .persimmon-match-panel {
  --persimmon-ink: #30291e;
  --persimmon-focus: #235d49;
  --persimmon-target: 88px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--persimmon-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: 28px;
  line-height: 1.25;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .persimmon-match-panel[hidden],
.voxel-stage .persimmon-match-panel [hidden] { display: none !important; }
.voxel-stage:has(.persimmon-match-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .persimmon-match-scene,
.voxel-stage .persimmon-match-view { position: absolute; inset: 0; }
.voxel-stage .persimmon-match-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .persimmon-match-heading,
.voxel-stage .persimmon-match-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
}
.voxel-stage .persimmon-match-heading { top: 8px; }
.voxel-stage .persimmon-match-summary { flex: 1; min-width: 0; }
.voxel-stage .persimmon-match-title { margin: 0; font-size: 34px; line-height: 1.15; }
.voxel-stage .persimmon-match-objective { margin: 4px 0 0; word-break: keep-all; }
.voxel-stage .persimmon-match-status {
  position: absolute;
  top: calc(var(--persimmon-target) + 32px);
  left: 28px;
  margin: 0;
  padding: 10px 20px;
  max-width: 1380px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .persimmon-match-controls { bottom: 8px; justify-content: flex-end; gap: 10px; }
.voxel-stage .persimmon-match-tiles {
  display: grid;
  grid-template-columns: repeat(6, var(--persimmon-target));
  gap: 4px;
  margin-right: auto;
}
.voxel-stage .persimmon-match-button {
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: var(--persimmon-target);
  min-width: var(--persimmon-target);
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--persimmon-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .persimmon-match-button:focus-visible { outline: 5px solid var(--persimmon-focus); outline-offset: -8px; }
.voxel-stage .persimmon-match-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .persimmon-match-button[data-persimmon-match="tile"] { position: relative; padding: 6px; font-size: 34px; }
.voxel-stage .persimmon-match-button[data-selected="true"] { outline: 4px dashed var(--persimmon-focus); outline-offset: -8px; }
.voxel-stage .persimmon-match-button[data-paired="true"] { opacity: 1; }
.voxel-stage .persimmon-match-button[data-paired="true"]::after { content: "✓"; position: absolute; right: 12px; bottom: 6px; font-size: 24px; }
.voxel-stage .persimmon-match-button[data-persimmon-match="help"],
.voxel-stage .persimmon-match-button[data-persimmon-match="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .persimmon-match-gate,
.voxel-stage .persimmon-match-portrait {
  position: absolute;
  inset: 270px 180px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 32px 48px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .persimmon-match-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .persimmon-match-portrait { inset: 0; z-index: 3; padding: 120px; }


/* source: toad-jar.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .toad-jar-panel {
  --toad-ink: #36251b;
  --toad-focus: #943a17;
  --toad-target: 88px;
  --toad-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--toad-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--toad-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .toad-jar-panel[hidden],
.voxel-stage .toad-jar-panel [hidden] { display: none !important; }
.voxel-stage:has(.toad-jar-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .toad-jar-scene,
.voxel-stage .toad-jar-view { position: absolute; inset: 0; }
.voxel-stage .toad-jar-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .toad-jar-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: 950px;
  padding: 12px 24px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .toad-jar-title { margin: 0; font-size: 1.15em; line-height: 1.2; }
.voxel-stage .toad-jar-status { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .toad-jar-objective {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.voxel-stage .toad-jar-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.voxel-stage .toad-jar-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--toad-target);
  min-height: var(--toad-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--toad-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .toad-jar-button:focus-visible { outline: 5px solid var(--toad-focus); outline-offset: -8px; }
.voxel-stage .toad-jar-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .toad-jar-button[data-selected="true"] { outline: 4px dashed var(--toad-focus); outline-offset: -8px; }
.voxel-stage .toad-jar-button[data-toad-jar="close"] {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}
.voxel-stage .toad-jar-button[data-toad-jar="help"],
.voxel-stage .toad-jar-button[data-toad-jar="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .toad-jar-gate,
.voxel-stage .toad-jar-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .toad-jar-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .toad-jar-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Below 480 physical pixels, switch tools rather than shrinking hit areas. */
.voxel-stage .toad-jar-panel[data-compact="true"] .toad-jar-controls > button {
  width: var(--toad-target);
  padding: 2px;
}
.voxel-stage .toad-jar-panel[data-compact="true"] .toad-jar-gate {
  inset: 0;
  padding: calc(var(--toad-target) + 16px) 24px 16px;
  align-content: center;
}


/* source: goblin-echo.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .goblin-echo-panel {
  --echo-ink: #36251b;
  --echo-focus: #943a17;
  --echo-target: 88px;
  --echo-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--echo-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--echo-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .goblin-echo-panel[hidden],
.voxel-stage .goblin-echo-panel [hidden] { display: none !important; }
.voxel-stage:has(.goblin-echo-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .goblin-echo-scene,
.voxel-stage .goblin-echo-view { position: absolute; inset: 0; }
.voxel-stage .goblin-echo-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .goblin-echo-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: calc(100% - var(--echo-target) - 80px);
  padding: 16px 28px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .goblin-echo-title { margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .goblin-echo-pattern { margin: 4px 0; font-weight: 700; word-break: keep-all; }
.voxel-stage .goblin-echo-status { margin: 0; word-break: keep-all; }
.voxel-stage .goblin-echo-objective {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.voxel-stage .goblin-echo-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.voxel-stage .goblin-echo-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--echo-target);
  min-height: var(--echo-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--echo-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .goblin-echo-button:focus-visible { outline: 5px solid var(--echo-focus); outline-offset: -8px; }
.voxel-stage .goblin-echo-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .goblin-echo-button[data-goblin-echo="close"] { position: absolute; top: 12px; right: 12px; z-index: 3; }
.voxel-stage .goblin-echo-button[data-goblin-echo="help"],
.voxel-stage .goblin-echo-button[data-goblin-echo="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .goblin-echo-gate,
.voxel-stage .goblin-echo-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .goblin-echo-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .goblin-echo-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
.voxel-stage .goblin-echo-panel[data-compact="true"] .goblin-echo-controls > button { width: var(--echo-target); padding: 2px; }
.voxel-stage .goblin-echo-panel[data-compact="true"] .goblin-echo-title { display: none; }
.voxel-stage .goblin-echo-panel[data-compact="true"] .goblin-echo-gate {
  inset: 0;
  padding: calc(var(--echo-target) + 16px) 24px 16px;
  align-content: center;
}


/* source: winter-guard.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .winter-guard-panel {
  --guard-ink: #36251b;
  --guard-focus: #943a17;
  --guard-target: 88px;
  --guard-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--guard-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--guard-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .winter-guard-panel[hidden],
.voxel-stage .winter-guard-panel [hidden] { display: none !important; }
.voxel-stage:has(.winter-guard-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .winter-guard-scene,
.voxel-stage .winter-guard-view { position: absolute; inset: 0; }
.voxel-stage .winter-guard-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .winter-guard-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(950px, calc(100% - var(--guard-target) - 80px));
  padding: 12px 24px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .winter-guard-title { margin: 0; font-size: 1.15em; line-height: 1.2; }
.voxel-stage .winter-guard-status { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .winter-guard-objective {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.voxel-stage .winter-guard-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.voxel-stage .winter-guard-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--guard-target);
  min-height: var(--guard-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--guard-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .winter-guard-controls > button {
  width: var(--guard-target);
  padding: 2px;
}
.voxel-stage .winter-guard-button:focus-visible { outline: 5px solid var(--guard-focus); outline-offset: -8px; }
.voxel-stage .winter-guard-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .winter-guard-button[data-selected="true"] { outline: 4px dashed var(--guard-focus); outline-offset: -8px; }
.voxel-stage .winter-guard-button[data-winter-guard="close"] {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}
.voxel-stage .winter-guard-button[data-winter-guard="help"],
.voxel-stage .winter-guard-button[data-winter-guard="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .winter-guard-gate,
.voxel-stage .winter-guard-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .winter-guard-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .winter-guard-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Below 480 physical pixels, switch tools rather than shrinking hit areas. */
.voxel-stage .winter-guard-panel[data-compact="true"] .winter-guard-controls > button {
  width: var(--guard-target);
  padding: 2px;
}
.voxel-stage .winter-guard-panel[data-compact="true"] .winter-guard-gate {
  inset: 0;
  padding: calc(var(--guard-target) + 16px) 24px 16px;
  align-content: center;
}
/* Full primary verbs need room inside the PNG frame, including in compact mode. */
.voxel-stage .winter-guard-panel .winter-guard-controls > [data-winter-guard="secure"],
.voxel-stage .winter-guard-panel .winter-guard-controls > [data-winter-guard="finish"] {
  width: auto;
  min-width: max(var(--guard-target), calc(3 * var(--guard-font) + 40px));
  padding: 8px 14px;
}


/* source: ojak-bridge.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .ojak-bridge-panel {
  --ojak-ink: #36251b;
  --ojak-focus: #943a17;
  --ojak-target: 88px;
  --ojak-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--ojak-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--ojak-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .ojak-bridge-panel[hidden],
.voxel-stage .ojak-bridge-panel [hidden] { display: none !important; }
.voxel-stage:has(.ojak-bridge-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .ojak-bridge-scene,
.voxel-stage .ojak-bridge-view { position: absolute; inset: 0; }
.voxel-stage .ojak-bridge-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .ojak-bridge-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(880px, calc(100% - 3 * var(--ojak-target) - 100px));
  padding: .6em .9em;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .ojak-bridge-title { margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .ojak-bridge-status { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .ojak-bridge-objective {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.voxel-stage .ojak-bridge-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.voxel-stage .ojak-bridge-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--ojak-target);
  min-height: var(--ojak-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--ojak-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .ojak-bridge-controls > button {
  width: var(--ojak-target);
  padding: 2px;
}
.voxel-stage .ojak-bridge-button:focus-visible { outline: 5px solid var(--ojak-focus); outline-offset: -8px; }
.voxel-stage .ojak-bridge-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .ojak-bridge-button[data-selected="true"] { outline: 4px dashed var(--ojak-focus); outline-offset: -8px; }
.voxel-stage .ojak-bridge-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.voxel-stage .ojak-bridge-button[data-ojak-bridge="help"],
.voxel-stage .ojak-bridge-button[data-ojak-bridge="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .ojak-bridge-gate,
.voxel-stage .ojak-bridge-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .ojak-bridge-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .ojak-bridge-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Below 480 physical pixels, switch tools rather than shrinking hit areas. */
.voxel-stage .ojak-bridge-panel[data-compact="true"] .ojak-bridge-controls > button {
  width: var(--ojak-target);
  padding: 2px;
}
.voxel-stage .ojak-bridge-panel[data-compact="true"] .ojak-bridge-gate {
  inset: 0;
  padding: calc(var(--ojak-target) + 16px) 24px 16px;
  align-content: center;
}
/* Full verbs stay inside the painted inner face at every uniform stage scale. */
.voxel-stage .ojak-bridge-panel .ojak-bridge-controls > [data-ojak-bridge="rotate"],
.voxel-stage .ojak-bridge-panel .ojak-bridge-controls > [data-ojak-bridge="cross"],
.voxel-stage .ojak-bridge-panel .ojak-bridge-controls > [data-ojak-bridge="finish"] {
  width: auto;
  min-width: max(var(--ojak-target), calc(3 * var(--ojak-font) / .72));
  padding: 8px calc(var(--ojak-font) * .6);
}


/* source: fairy-lantern.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .fairy-lantern-panel {
  --lantern-ink: #36251b;
  --lantern-focus: #943a17;
  --lantern-target: 88px;
  --lantern-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--lantern-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--lantern-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .fairy-lantern-panel[hidden],
.voxel-stage .fairy-lantern-panel [hidden] { display: none !important; }
.voxel-stage:has(.fairy-lantern-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .fairy-lantern-scene,
.voxel-stage .fairy-lantern-view { position: absolute; inset: 0; }
.voxel-stage .fairy-lantern-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .fairy-lantern-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(880px, calc(100% - 3 * var(--lantern-target) - 100px));
  padding: .6em .9em;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .fairy-lantern-title { margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .fairy-lantern-status { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .fairy-lantern-objective {
  position: absolute;
  inset: 280px 280px auto;
  margin: 0;
  padding: .8em 8%;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}
.voxel-stage .fairy-lantern-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
}
.voxel-stage .fairy-lantern-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--lantern-target);
  min-height: var(--lantern-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--lantern-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .fairy-lantern-controls > button {
  width: var(--lantern-target);
  padding: 2px;
}
.voxel-stage .fairy-lantern-button:focus-visible { outline: 5px solid var(--lantern-focus); outline-offset: -8px; }
.voxel-stage .fairy-lantern-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .fairy-lantern-button[data-selected="true"] { outline: 4px dashed var(--lantern-focus); outline-offset: -8px; }
.voxel-stage .fairy-lantern-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.voxel-stage .fairy-lantern-button[data-fairy-lantern="help"],
.voxel-stage .fairy-lantern-button[data-fairy-lantern="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .fairy-lantern-gate,
.voxel-stage .fairy-lantern-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .fairy-lantern-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .fairy-lantern-gate > button {
  min-width: max(var(--lantern-target), calc(4.5 * var(--lantern-font) / .72));
  padding: 8px calc(var(--lantern-font) * .6);
}
.voxel-stage .fairy-lantern-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Below 480 physical pixels, switch tools rather than shrinking hit areas. */
.voxel-stage .fairy-lantern-panel[data-compact="true"] .fairy-lantern-objective {
  inset: 280px 40px auto;
  padding: .5em 8%;
}
.voxel-stage .fairy-lantern-panel[data-compact="true"] .fairy-lantern-controls > button {
  width: var(--lantern-target);
  padding: 2px;
}
.voxel-stage .fairy-lantern-panel[data-compact="true"] .fairy-lantern-gate {
  inset: 0;
  padding: calc(var(--lantern-target) + 16px) 24px 16px;
  align-content: center;
}
/* Full verbs stay inside the painted inner face at every uniform stage scale. */
.voxel-stage .fairy-lantern-panel .fairy-lantern-controls > [data-fairy-lantern="choose"],
.voxel-stage .fairy-lantern-panel .fairy-lantern-controls > [data-fairy-lantern="undo"],
.voxel-stage .fairy-lantern-panel .fairy-lantern-controls > [data-fairy-lantern="finish"] {
  width: auto;
  min-width: max(var(--lantern-target), calc(4 * var(--lantern-font) / .72));
  padding: 8px calc(var(--lantern-font) * .6);
}


/* source: learning-scroll.css */
/* One painted asset is sliced in CSS; text and handwriting are never scaled. */
body:has(#storybook-stage .storybook-app) dialog.craft-dialog {
  --scroll-cap: 64px;
  --scroll-motion: 420ms;
  width: 1000px;
  max-height: 780px;
  padding: 0;
  border: 0;
  border-image: none;
  background: transparent;
  overflow: visible;
  isolation: isolate;
}
body:has(#storybook-stage .storybook-app) dialog.craft-dialog::before,
body:has(#storybook-stage .storybook-app) dialog.craft-dialog::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--scroll-cap);
  background-image: url("assets/storybook/v3/learning-scroll.png");
  background-repeat: no-repeat;
  background-size: 100% 666.667%;
  pointer-events: none;
  z-index: 2;
}
body:has(#storybook-stage .storybook-app) dialog.craft-dialog::before { top: 0; background-position: center top; }
body:has(#storybook-stage .storybook-app) dialog.craft-dialog::after { bottom: 0; background-position: center bottom; }
.craft-scroll-paper {
  position: absolute;
  inset: calc(var(--scroll-cap) * .87) 0;
  background: url("assets/storybook/v3/learning-scroll.png") center / 100% 142.857% no-repeat;
  pointer-events: none;
  z-index: -1;
}
.craft-scroll-content {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: 780px;
  padding: calc(var(--scroll-cap) + 8px) 84px;
}
body:has(#storybook-stage .storybook-app) .craft-scroll-content > .story-dialog-head {
  flex: 0 0 auto;
  margin-bottom: 10px;
  background: transparent;
}
.craft-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #9c713e transparent;
  padding: 0 6px 2px;
}
.craft-scroll-body .craft-steps { margin-bottom: 12px; }
.craft-scroll-body > button { width: 100%; min-height: 50px; margin-top: 8px; }
.craft-scroll-body > small { display: block; font-size: 1rem; color: var(--sb-muted, #586d60); line-height: 1.5; margin: 10px 0; }
body:has(#storybook-stage .storybook-app) dialog.craft-dialog[data-scroll-opening="true"]::before {
  animation: craft-scroll-top var(--scroll-motion) cubic-bezier(.22,.72,.24,1) both;
}
body:has(#storybook-stage .storybook-app) dialog.craft-dialog[data-scroll-opening="true"]::after {
  animation: craft-scroll-bottom var(--scroll-motion) cubic-bezier(.22,.72,.24,1) both;
}
dialog.craft-dialog[data-scroll-opening="true"] .craft-scroll-paper {
  animation: craft-scroll-unfold var(--scroll-motion) cubic-bezier(.22,.72,.24,1) both;
}
dialog.craft-dialog[data-scroll-opening="true"] .craft-scroll-content {
  animation: craft-scroll-ink var(--scroll-motion) ease-out both;
}
@keyframes craft-scroll-top { from { top: calc(50% - var(--scroll-cap)); } to { top: 0; } }
@keyframes craft-scroll-bottom { from { bottom: calc(50% - var(--scroll-cap)); } to { bottom: 0; } }
@keyframes craft-scroll-unfold { from { clip-path: inset(50% 0); } to { clip-path: inset(0); } }
@keyframes craft-scroll-ink { 0%,25% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body:has(#storybook-stage .storybook-app) dialog.craft-dialog[data-scroll-opening="true"]::before,
  body:has(#storybook-stage .storybook-app) dialog.craft-dialog[data-scroll-opening="true"]::after,
  dialog.craft-dialog[data-scroll-opening="true"] .craft-scroll-paper,
  dialog.craft-dialog[data-scroll-opening="true"] .craft-scroll-content { animation: none; }
}


/* source: snail-tidy.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .snail-tidy-panel {
  --tidy-ink: #36251b;
  --tidy-focus: #943a17;
  --tidy-target: 88px;
  --tidy-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--tidy-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--tidy-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .snail-tidy-panel[hidden],
.voxel-stage .snail-tidy-panel [hidden] { display: none !important; }
.voxel-stage:has(.snail-tidy-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .snail-tidy-scene,
.voxel-stage .snail-tidy-view { position: absolute; inset: 0; }
.voxel-stage .snail-tidy-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .snail-tidy-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(880px, calc(100% - 3 * var(--tidy-target) - 100px));
  padding: .6em .9em;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .snail-tidy-title { margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .snail-tidy-status { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .snail-tidy-objective {
  position: absolute;
  inset: 280px 280px auto;
  margin: 0;
  padding: .8em 8%;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}
.voxel-stage .snail-tidy-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
}
.voxel-stage .snail-tidy-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--tidy-target);
  min-height: var(--tidy-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--tidy-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .snail-tidy-controls button {
  width: var(--tidy-target);
  padding: 2px;
}
.voxel-stage .snail-tidy-button:focus-visible { outline: 5px solid var(--tidy-focus); outline-offset: -8px; }
.voxel-stage .snail-tidy-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .snail-tidy-button[data-selected="true"] { outline: 4px dashed var(--tidy-focus); outline-offset: -8px; }
.voxel-stage .snail-tidy-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.voxel-stage .snail-tidy-button[data-snail-tidy="help"],
.voxel-stage .snail-tidy-button[data-snail-tidy="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .snail-tidy-gate,
.voxel-stage .snail-tidy-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .snail-tidy-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .snail-tidy-gate > button {
  min-width: max(var(--tidy-target), calc(4.5 * var(--tidy-font) / .72));
  padding: 8px calc(var(--tidy-font) * .6);
}
.voxel-stage .snail-tidy-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Below 480 physical pixels, switch tools rather than shrinking hit areas. */
.voxel-stage .snail-tidy-panel[data-compact="true"] .snail-tidy-scene {
  bottom: calc(2 * var(--tidy-target) + 18px);
}
.voxel-stage .snail-tidy-panel[data-compact="true"] .snail-tidy-gate {
  inset: 0;
  padding: calc(var(--tidy-target) + 16px) 24px 16px;
  align-content: center;
}

.voxel-stage .snail-tidy-item-row,
.voxel-stage .snail-tidy-zone-row {
  display: flex; justify-content: center; gap: 6px; width: 100%;
}
.voxel-stage .snail-tidy-controls > [data-snail-tidy="finish"] {
  width: auto; min-width: max(var(--tidy-target), calc(4 * var(--tidy-font) / .72));
  padding: 8px calc(var(--tidy-font) * .6);
}
.voxel-stage .snail-tidy-panel[data-compact="true"] .snail-tidy-summary {
  padding: .5em .7em;
}
.voxel-stage .snail-tidy-panel[data-compact="true"] .snail-tidy-status {
  white-space: nowrap;
}
.voxel-stage .snail-tidy-panel[data-compact="true"] .snail-tidy-objective {
  inset: 290px 40px auto; padding: .45em 8%;
}
.voxel-stage .snail-tidy-button[data-placed="true"] {
  color: #704022; text-decoration: underline; text-underline-offset: .18em;
}
.voxel-stage .snail-tidy-button:hover:not(:disabled) { filter: brightness(1.06); }
.voxel-stage .snail-tidy-button:active:not(:disabled) { filter: brightness(.92); }


/* source: mill-measure.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .mill-measure-panel {
  --mill-ink: #36251b;
  --mill-focus: #943a17;
  --mill-target: 88px;
  --mill-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--mill-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--mill-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .mill-measure-panel[hidden],
.voxel-stage .mill-measure-panel [hidden] { display: none !important; }
.voxel-stage:has(.mill-measure-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .mill-measure-scene,
.voxel-stage .mill-measure-view { position: absolute; inset: 0; }
.voxel-stage .mill-measure-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .mill-measure-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(880px, calc(100% - 3 * var(--mill-target) - 100px));
  padding: .6em .9em;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .mill-measure-title { margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .mill-measure-status { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .mill-measure-feedback { margin: 0; white-space: nowrap; }
.voxel-stage .mill-measure-objective {
  position: absolute;
  inset: 280px 280px auto;
  margin: 0;
  padding: .8em 8%;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}
.voxel-stage .mill-measure-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
}
.voxel-stage .mill-measure-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--mill-target);
  min-height: var(--mill-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--mill-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .mill-measure-controls button {
  min-width: max(var(--mill-target), calc(3 * var(--mill-font) / .72));
  padding: 8px calc(var(--mill-font) * .6);
}
.voxel-stage .mill-measure-controls [data-mill-measure="stop"] {
  min-width: max(var(--mill-target), calc(3.5 * var(--mill-font) / .72));
}
.voxel-stage .mill-measure-button:focus-visible { outline: 5px solid var(--mill-focus); outline-offset: -8px; }
.voxel-stage .mill-measure-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .mill-measure-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.voxel-stage .mill-measure-button[data-mill-measure="help"],
.voxel-stage .mill-measure-button[data-mill-measure="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .mill-measure-gate,
.voxel-stage .mill-measure-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .mill-measure-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .mill-measure-gate > button {
  min-width: max(var(--mill-target), calc(4.5 * var(--mill-font) / .72));
  padding: 8px calc(var(--mill-font) * .6);
}
.voxel-stage .mill-measure-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Reserve a full-size control row without covering the imported objects. */
.voxel-stage .mill-measure-panel[data-compact="true"] .mill-measure-scene {
  bottom: calc(var(--mill-target) + 18px);
}
.voxel-stage .mill-measure-panel[data-compact="true"] .mill-measure-gate {
  inset: 0;
  padding: calc(var(--mill-target) + 16px) 24px 16px;
  align-content: center;
}

.voxel-stage .mill-measure-action-row {
  display: flex; justify-content: center; gap: 6px; width: 100%;
}
.voxel-stage .mill-measure-controls > [data-mill-measure="finish"] {
  width: auto; min-width: max(var(--mill-target), calc(4 * var(--mill-font) / .72));
  padding: 8px calc(var(--mill-font) * .6);
}
.voxel-stage .mill-measure-panel[data-compact="true"] .mill-measure-summary {
  padding: .5em .7em;
}
.voxel-stage .mill-measure-panel[data-compact="true"] .mill-measure-status {
  white-space: nowrap;
}
.voxel-stage .mill-measure-panel[data-compact="true"] .mill-measure-objective {
  inset: 290px 40px auto; padding: .45em 8%;
}
.voxel-stage .mill-measure-button:hover:not(:disabled) { filter: brightness(1.06); }
.voxel-stage .mill-measure-button:active:not(:disabled) { filter: brightness(.92); }


/* source: breeze-harvest.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .breeze-harvest-panel {
  --breeze-ink: #36251b;
  --breeze-focus: #943a17;
  --breeze-target: 88px;
  --breeze-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--breeze-ink);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--breeze-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .breeze-harvest-panel[hidden],
.voxel-stage .breeze-harvest-panel [hidden] { display: none !important; }
.voxel-stage:has(.breeze-harvest-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .breeze-harvest-scene,
.voxel-stage .breeze-harvest-view { position: absolute; inset: 0; }
.voxel-stage .breeze-harvest-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .breeze-harvest-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(880px, calc(100% - 3 * var(--breeze-target) - 100px));
  padding: .6em .9em;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .breeze-harvest-title { margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .breeze-harvest-status { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .breeze-harvest-feedback { margin: 0; white-space: nowrap; }
.voxel-stage .breeze-harvest-status span { display: block; white-space: nowrap; }
.voxel-stage .breeze-harvest-controls [data-breeze-harvest="send"] {
  min-width: max(var(--breeze-target), calc(6 * var(--breeze-font) / .72));
}
.voxel-stage .breeze-harvest-objective {
  position: absolute;
  inset: 280px 240px auto;
  margin: 0;
  padding: .8em 8%;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}
.voxel-stage .breeze-harvest-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
}
.voxel-stage .breeze-harvest-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--breeze-target);
  min-height: var(--breeze-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--breeze-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .breeze-harvest-controls button {
  min-width: max(var(--breeze-target), calc(3 * var(--breeze-font) / .72));
  padding: 8px calc(var(--breeze-font) * .6);
}

.voxel-stage .breeze-harvest-button:focus-visible { outline: 5px solid var(--breeze-focus); outline-offset: -8px; }
.voxel-stage .breeze-harvest-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .breeze-harvest-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.voxel-stage .breeze-harvest-button[data-breeze-harvest="help"],
.voxel-stage .breeze-harvest-button[data-breeze-harvest="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .breeze-harvest-gate,
.voxel-stage .breeze-harvest-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .breeze-harvest-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .breeze-harvest-gate > button {
  min-width: max(var(--breeze-target), calc(4.5 * var(--breeze-font) / .72));
  padding: 8px calc(var(--breeze-font) * .6);
}
.voxel-stage .breeze-harvest-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Reserve a full-size control row without covering the imported objects. */
.voxel-stage .breeze-harvest-panel[data-compact="true"] .breeze-harvest-scene {
  bottom: calc(var(--breeze-target) + 18px);
}
.voxel-stage .breeze-harvest-panel[data-compact="true"] .breeze-harvest-gate {
  inset: 0;
  padding: calc(var(--breeze-target) + 16px) 24px 16px;
  align-content: center;
}

.voxel-stage .breeze-harvest-action-row {
  display: flex; justify-content: center; gap: 6px; width: 100%;
}
.voxel-stage .breeze-harvest-controls > [data-breeze-harvest="finish"] {
  width: auto; min-width: max(var(--breeze-target), calc(4 * var(--breeze-font) / .72));
  padding: 8px calc(var(--breeze-font) * .6);
}
.voxel-stage .breeze-harvest-panel[data-compact="true"] .breeze-harvest-summary {
  padding: .5em .7em;
}
.voxel-stage .breeze-harvest-panel[data-compact="true"] .breeze-harvest-status {
  white-space: nowrap;
}
.voxel-stage .breeze-harvest-panel[data-compact="true"] .breeze-harvest-objective {
  inset: 360px 40px auto; padding: .45em 8%;
}
.voxel-stage .breeze-harvest-button:hover:not(:disabled) { filter: brightness(1.06); }
.voxel-stage .breeze-harvest-button:active:not(:disabled) { filter: brightness(.92); }


/* source: frog-shelter.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .frog-shelter-panel {
  --frog-ink: #36251b;
  --frog-focus: #943a17;
  --frog-sky: #b9dfe9;
  --frog-target: 88px;
  --frog-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--frog-ink);
  background: var(--frog-sky);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--frog-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .frog-shelter-panel[hidden],
.voxel-stage .frog-shelter-panel [hidden] { display: none !important; }
.voxel-stage:has(.frog-shelter-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .frog-shelter-scene,
.voxel-stage .frog-shelter-view { position: absolute; inset: 0; }
.voxel-stage .frog-shelter-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .frog-shelter-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(880px, calc(100% - 3 * var(--frog-target) - 100px));
  padding: .6em 1.4em;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .frog-shelter-title { display: inline-block; margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .frog-shelter-clue { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .frog-shelter-feedback { display: inline-block; margin: 0 0 0 .5em; white-space: nowrap; }
.voxel-stage .frog-shelter-clue { display: block; white-space: normal; }
.voxel-stage .frog-shelter-controls [data-frog-shelter="hear"] {
  min-width: max(var(--frog-target), calc(4 * var(--frog-font) / .72));
}
.voxel-stage .frog-shelter-objective {
  position: absolute;
  inset: 280px 240px auto;
  margin: 0;
  padding: .8em 8%;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}
.voxel-stage .frog-shelter-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
}
.voxel-stage .frog-shelter-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--frog-target);
  min-height: var(--frog-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--frog-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .frog-shelter-controls button {
  min-width: max(var(--frog-target), calc(3 * var(--frog-font) / .72));
  padding: 8px calc(var(--frog-font) * .6);
}

.voxel-stage .frog-shelter-button:focus-visible { outline: 5px solid var(--frog-focus); outline-offset: -8px; }
.voxel-stage .frog-shelter-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .frog-shelter-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.voxel-stage .frog-shelter-button[data-frog-shelter="help"],
.voxel-stage .frog-shelter-button[data-frog-shelter="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .frog-shelter-gate,
.voxel-stage .frog-shelter-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .frog-shelter-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .frog-shelter-gate > button {
  min-width: max(var(--frog-target), calc(4.5 * var(--frog-font) / .72));
  padding: 8px calc(var(--frog-font) * .6);
}
.voxel-stage .frog-shelter-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Reserve a full-size control row without covering the imported objects. */
.voxel-stage .frog-shelter-panel[data-compact="true"] .frog-shelter-scene {
  top: calc(var(--frog-top, var(--frog-target)) * .8);
  bottom: calc(var(--frog-target) + 18px);
}
.voxel-stage .frog-shelter-panel[data-compact="true"] .frog-shelter-gate {
  inset: 0;
  padding: calc(var(--frog-target) + 16px) 24px 16px;
  align-content: center;
}

.voxel-stage .frog-shelter-action-row {
  display: flex; justify-content: center; gap: 6px; width: 100%;
}
.voxel-stage .frog-shelter-controls > [data-frog-shelter="finish"] {
  width: auto; min-width: max(var(--frog-target), calc(4 * var(--frog-font) / .72));
  padding: 8px calc(var(--frog-font) * .6);
}
.voxel-stage .frog-shelter-panel[data-compact="true"] .frog-shelter-summary {
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  padding: .5em 6%;
}
.voxel-stage .frog-shelter-panel[data-compact="true"] .frog-shelter-clue {
  margin-top: calc(var(--frog-target) - 1.4em);
  white-space: normal;
}
.voxel-stage .frog-shelter-panel[data-compact="true"] .frog-shelter-objective {
  inset: 280px 40px auto; padding: .45em 8%;
}
.voxel-stage .frog-shelter-button:hover:not(:disabled) { filter: brightness(1.06); }
.voxel-stage .frog-shelter-button:active:not(:disabled) { filter: brightness(.92); }


/* source: magpie-signal.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .magpie-signal-panel {
  --magpie-ink: #36251b;
  --magpie-focus: #943a17;
  --magpie-sky: #b9dfe9;
  --magpie-target: 88px;
  --magpie-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--magpie-ink);
  background: var(--magpie-sky);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--magpie-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .magpie-signal-panel[hidden],
.voxel-stage .magpie-signal-panel [hidden] { display: none !important; }
.voxel-stage:has(.magpie-signal-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .magpie-signal-scene,
.voxel-stage .magpie-signal-view { position: absolute; inset: 0; }
.voxel-stage .magpie-signal-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .magpie-signal-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(880px, calc(100% - 3 * var(--magpie-target) - 100px));
  padding: .6em 1.4em;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .magpie-signal-title { display: inline-block; margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .magpie-signal-clue { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .magpie-signal-feedback { display: inline-block; margin: 0 0 0 .5em; white-space: nowrap; }
.voxel-stage .magpie-signal-clue { display: block; white-space: normal; }
.voxel-stage .magpie-signal-controls [data-magpie-signal="read"] {
  min-width: max(var(--magpie-target), calc(4 * var(--magpie-font) / .72));
}
.voxel-stage .magpie-signal-objective {
  position: absolute;
  inset: 280px 240px auto;
  margin: 0;
  padding: .8em 8%;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}
.voxel-stage .magpie-signal-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
}
.voxel-stage .magpie-signal-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--magpie-target);
  min-height: var(--magpie-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--magpie-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .magpie-signal-controls button {
  min-width: max(var(--magpie-target), calc(3 * var(--magpie-font) / .72));
  padding: 8px calc(var(--magpie-font) * .6);
}

.voxel-stage .magpie-signal-button:focus-visible { outline: 5px solid var(--magpie-focus); outline-offset: -8px; }
.voxel-stage .magpie-signal-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .magpie-signal-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.voxel-stage .magpie-signal-button[data-magpie-signal="help"],
.voxel-stage .magpie-signal-button[data-magpie-signal="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .magpie-signal-gate,
.voxel-stage .magpie-signal-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .magpie-signal-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .magpie-signal-gate > button {
  min-width: max(var(--magpie-target), calc(4.5 * var(--magpie-font) / .72));
  padding: 8px calc(var(--magpie-font) * .6);
}
.voxel-stage .magpie-signal-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Reserve a full-size control row without covering the imported objects. */
.voxel-stage .magpie-signal-panel[data-compact="true"] .magpie-signal-scene {
  top: calc(var(--magpie-top, var(--magpie-target)) * .8);
  bottom: calc(var(--magpie-target) + 18px);
}
.voxel-stage .magpie-signal-panel[data-compact="true"] .magpie-signal-gate {
  inset: 0;
  padding: calc(var(--magpie-target) + 16px) 24px 16px;
  align-content: center;
}

.voxel-stage .magpie-signal-action-row {
  display: flex; justify-content: center; gap: 6px; width: 100%;
}
.voxel-stage .magpie-signal-controls > [data-magpie-signal="finish"] {
  width: auto; min-width: max(var(--magpie-target), calc(4 * var(--magpie-font) / .72));
  padding: 8px calc(var(--magpie-font) * .6);
}
.voxel-stage .magpie-signal-panel[data-compact="true"] .magpie-signal-summary {
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  padding: .5em 6%;
}
.voxel-stage .magpie-signal-panel[data-compact="true"] .magpie-signal-clue {
  margin-top: calc(var(--magpie-target) - 1.4em);
  white-space: normal;
}
.voxel-stage .magpie-signal-panel[data-compact="true"] .magpie-signal-objective {
  inset: 280px 40px auto; padding: .45em 8%;
}
.voxel-stage .magpie-signal-button:hover:not(:disabled) { filter: brightness(1.06); }
.voxel-stage .magpie-signal-button:active:not(:disabled) { filter: brightness(.92); }


/* source: grain-share.css */
/* The parent uniformly scales its 1600 x 900 landscape stage. */
.voxel-stage .grain-share-panel {
  --grain-ink: #36251b;
  --grain-focus: #943a17;
  --grain-sky: #efcf88;
  --grain-target: 88px;
  --grain-font: 28px;
  position: absolute;
  inset: 0;
  z-index: 95;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--grain-ink);
  background: var(--grain-sky);
  font-family: var(--sb-text-font, "Mumu Pretendard", "Malgun Gothic", sans-serif);
  font-size: var(--grain-font);
  line-height: 1.3;
  pointer-events: auto;
  touch-action: none;
}
.voxel-stage .grain-share-panel[hidden],
.voxel-stage .grain-share-panel [hidden] { display: none !important; }
.voxel-stage:has(.grain-share-panel:not([hidden])) .voxel-gate { visibility: hidden; pointer-events: none; }
.voxel-stage .grain-share-scene,
.voxel-stage .grain-share-view { position: absolute; inset: 0; }
.voxel-stage .grain-share-view canvas { display: block; width: 100%; height: 100%; }
.voxel-stage .grain-share-summary {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(880px, calc(100% - 3 * var(--grain-target) - 100px));
  padding: .6em 1.4em;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.voxel-stage .grain-share-title { display: inline-block; margin: 0; font-size: 1em; line-height: 1.2; }
.voxel-stage .grain-share-clue { margin: 5px 0 0; font-variant-numeric: tabular-nums; word-break: keep-all; }
.voxel-stage .grain-share-feedback { display: block; margin: 5px 0 0; white-space: nowrap; }
.voxel-stage .grain-share-clue { display: block; white-space: normal; }
.voxel-stage .grain-share-controls [data-grain-share="read"] {
  min-width: max(var(--grain-target), calc(4 * var(--grain-font) / .72));
}
.voxel-stage .grain-share-objective {
  position: absolute;
  inset: 280px 240px auto;
  margin: 0;
  padding: .8em 8%;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}
.voxel-stage .grain-share-controls {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
}
.voxel-stage .grain-share-button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--grain-target);
  min-height: var(--grain-target);
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: url("assets/storybook/v1/button-gold.png") center / 100% 100% no-repeat;
  color: var(--grain-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: none;
  text-shadow: none;
}
.voxel-stage .grain-share-controls button {
  min-width: max(var(--grain-target), calc(3 * var(--grain-font) / .72));
  padding: 8px calc(var(--grain-font) * .6);
}

.voxel-stage .grain-share-button:focus-visible { outline: 5px solid var(--grain-focus); outline-offset: -8px; }
.voxel-stage .grain-share-button:disabled { opacity: .6; cursor: not-allowed; }
.voxel-stage .grain-share-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.voxel-stage .grain-share-button[data-grain-share="help"],
.voxel-stage .grain-share-button[data-grain-share="close"] { background-image: url("assets/storybook/v1/button-wood.png"); }
.voxel-stage .grain-share-gate,
.voxel-stage .grain-share-portrait {
  position: absolute;
  inset: 260px 200px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
  background: url("assets/storybook/v2/paper-frame.png") center / 100% 100% no-repeat;
  text-align: center;
}
.voxel-stage .grain-share-gate-text { flex-basis: 100%; margin: 0; word-break: keep-all; }
.voxel-stage .grain-share-gate > button {
  min-width: max(var(--grain-target), calc(4.5 * var(--grain-font) / .72));
  padding: 8px calc(var(--grain-font) * .6);
}
.voxel-stage .grain-share-portrait { inset: 0; z-index: 4; padding: 120px; pointer-events: auto; }
/* Reserve a full-size control row without covering the imported objects. */
.voxel-stage .grain-share-panel[data-compact="true"] .grain-share-scene {
  top: var(--grain-top, var(--grain-target));
  bottom: calc(var(--grain-target) + 18px);
}
.voxel-stage .grain-share-panel[data-compact="true"] .grain-share-gate {
  inset: 0;
  padding: calc(var(--grain-target) + 16px) 24px 16px;
  align-content: center;
}

.voxel-stage .grain-share-action-row {
  display: flex; justify-content: center; gap: 6px; width: 100%;
}
.voxel-stage .grain-share-controls > [data-grain-share="finish"] {
  width: auto; min-width: max(var(--grain-target), calc(4 * var(--grain-font) / .72));
  padding: 8px calc(var(--grain-font) * .6);
}
.voxel-stage .grain-share-panel[data-compact="true"] .grain-share-summary {
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  padding: .5em 6%;
}
.voxel-stage .grain-share-panel[data-compact="true"] .grain-share-clue,
.voxel-stage .grain-share-panel[data-compact="true"] .grain-share-feedback {
  margin-top: .7em;
  max-width: calc(100% - 3 * var(--grain-target) + 40px);
  white-space: normal;
}
.voxel-stage .grain-share-panel[data-compact="true"] .grain-share-tools {
  top: calc(1.2 * var(--grain-font) + 60px);
}
.voxel-stage .grain-share-panel[data-compact="true"] .grain-share-objective {
  inset: 420px 40px auto; padding: .45em 8%;
}
.voxel-stage .grain-share-button:hover:not(:disabled) { filter: brightness(1.06); }
.voxel-stage .grain-share-button:active:not(:disabled) { filter: brightness(.92); }