@font-face{font-family:Goyorim;src:local('Noto Sans CJK KR'),local('Apple SD Gothic Neo')}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#253c35;color:#f3efe3;font-family:Goyorim,'Noto Sans',system-ui,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;touch-action:manipulation}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #c6e1b2;outline-offset:3px}button:active{transform:scale(.96)}button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}[hidden]{display:none!important}#world,#world canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}.glass{background:rgba(35,54,46,.62);border:1px solid #f2e8c12b;box-shadow:0 8px 32px #0f221326;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.veil{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#253c35}#loading h1{font-family:serif;font-weight:400;font-size:64px;letter-spacing:16px;margin:20px 0 8px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#bdc8b7}.subtitle{letter-spacing:5px;font-size:14px;margin:10px 0 48px}#loading-note{font-size:12px;color:#c3cbbb}.loading-line{width:120px;height:1px;background:#ffffff22;overflow:hidden}.loading-line i{display:block;width:40%;height:1px;background:#deca96;animation:loading 2s ease-in-out infinite}@keyframes loading{from{transform:translateX(-110%)}to{transform:translateX(350%)}}#welcome{background:linear-gradient(90deg,#18382be8 0%,#18382b75 60%,#18382b18);align-items:flex-start;padding:8vw}.welcome-copy{max-width:480px}#welcome h1{font:400 clamp(38px,7vw,68px)/1.35 serif;letter-spacing:-1.5px;margin:30px 0 24px}#welcome p:not(.eyebrow){color:#e0e5d8;font-size:15px;line-height:1.95}.primary{background:#e1d7b8;color:#253c35;min-height:54px;border-radius:12px;padding:14px 22px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:25px;width:100%;margin-top:28px}.primary span{font-size:24px;font-weight:300}.welcome-copy small{display:block;text-align:center;font-size:11px;color:#bccaba;margin-top:14px}.welcome-foot{position:absolute;bottom:calc(35px + var(--safe-bottom,env(safe-area-inset-bottom)));font-size:11px;letter-spacing:2px;color:#cad5c3}#hud{position:absolute;top:calc(16px + var(--safe-top,env(safe-area-inset-top)));left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;z-index:5;gap:10px}.brand-pill,.tools-pill{display:flex;align-items:center;border-radius:30px;padding:3px 5px}.brand-pill button,.tools-pill button{min-height:46px;min-width:46px;display:flex;align-items:center;justify-content:center}.wordmark{font-family:serif;font-size:21px;letter-spacing:1.5px;padding:0 12px 0 6px;gap:8px}.wordmark small{font:11px system-ui;opacity:.65;letter-spacing:.5px}#place-label{position:absolute;top:calc(94px + var(--safe-top,env(safe-area-inset-top)));left:26px;display:flex;flex-direction:column;pointer-events:none;text-shadow:0 2px 12px #142d28}#zone-label{font-size:10px;letter-spacing:2px;color:#edf1d7b5}#place-name{font:400 25px serif;letter-spacing:1px;margin:7px 0}#connection{font-size:10px;color:#e7eddfbb}#chant{position:absolute;right:18px;top:calc(85px + var(--safe-top,env(safe-area-inset-top)))}.chip{border-radius:24px;padding:11px 16px;font-size:11px;min-height:44px}#journal{position:absolute;right:18px;top:calc(140px + var(--safe-top,env(safe-area-inset-top)));width:46px;height:46px;border-radius:50%}#dock{position:absolute;bottom:calc(22px + var(--safe-bottom,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);display:flex;border-radius:34px;padding:6px 9px;gap:4px;z-index:5;max-width:calc(100% - 24px)}#dock button{min-width:58px;min-height:62px;padding:7px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:28px;font-size:10px;color:#e5eadd}#dock button.active{background:#dbd8b82b;color:#f0d998}#dock .icon{height:26px}#context{position:absolute;bottom:calc(111px + var(--safe-bottom,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);display:flex;gap:7px;justify-content:center;flex-wrap:wrap;width:90%;z-index:4}#context button{border-radius:24px;padding:11px 18px;min-height:46px;background:#e6dfc7ed;color:#293e33;font-size:12px;box-shadow:0 8px 24px #12281f33}#travel{position:absolute;bottom:calc(120px + var(--safe-bottom,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);border-radius:24px;background:#243e36dc;padding:5px 6px 5px 17px;display:flex;gap:15px;align-items:center;font-size:12px;z-index:6}#travel button{background:#ffffff1c;padding:10px 15px;border-radius:20px;min-height:44px}#ritual{position:absolute;bottom:calc(160px + var(--safe-bottom,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);text-align:center;background:#1c3428a8;backdrop-filter:blur(10px);padding:20px 25px;border-radius:20px;min-width:220px}#ritual p{font-size:12px;color:#d4decb;margin:0 0 10px}#ritual strong{font:34px serif;display:block;margin:8px}progress{accent-color:#ddcc9a;width:100%;height:3px;display:block;margin:12px 0;background:#ffffff22}#ritual button{font-size:12px;padding:12px;min-height:44px}#toast{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(200px + var(--safe-bottom,env(safe-area-inset-bottom)));z-index:50;max-width:85%;min-width:200px;background:#23392ff0;border:1px solid #d5e0c72b;border-radius:14px;padding:14px 18px;font-size:12px;line-height:1.6;text-align:center;box-shadow:0 10px 40px #0004}dialog{border:1px solid #ded8bf38;background:#eae6d7;color:#304338;border-radius:25px;padding:24px;width:min(560px,calc(100% - 28px));max-height:calc(100% - 70px - var(--safe-top,env(safe-area-inset-top)) - var(--safe-bottom,env(safe-area-inset-bottom)));box-shadow:0 24px 100px #10291c70;overscroll-behavior:contain}dialog::backdrop{background:#152c2c60;backdrop-filter:blur(8px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px}.panel-heading .eyebrow{color:#6b7a68;font-size:9px;margin:0 0 8px}.panel-heading h2{font:400 27px serif;margin:0;letter-spacing:-.5px}.panel-heading button{width:46px;height:46px;color:#51614c;flex-shrink:0}#panel-body{font-size:13px;line-height:1.75}.intro{color:#78816e;font-size:12px}.section-title{font-size:11px;letter-spacing:1px;color:#77816e;margin:26px 0 12px}.row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid #45523b19}.row small{display:block;font-size:11px;color:#818673}.row button,.pill{border:1px solid #69765d40;border-radius:20px;padding:10px 15px;min-height:44px;font-size:12px}.row input[type=range]{width:42%;accent-color:#55745f}.row select{background:#f2eedf;color:#3c5142;border:1px solid #69765d40;border-radius:10px;padding:10px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.card{background:#f7f3e8;border:1px solid #8c967b24;border-radius:15px;text-align:left;padding:15px;color:#344a3b;min-height:88px}.card strong{display:block;font-weight:500;font-size:14px;margin:5px 0}.card small{color:#8c917e;font-size:10px}.card .number{color:#9c936f;font-size:9px;letter-spacing:2px}.card:hover{border-color:#75866c}.tabs{display:flex;gap:7px;overflow:auto;padding:0 0 15px;scrollbar-width:none}.tabs button{white-space:nowrap;padding:9px 13px;border:1px solid #74826930;border-radius:20px;font-size:11px;min-height:44px}.tabs button.active{background:#405d48;color:#eeeada}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{padding:18px 10px;background:#f6f2e6;border-radius:15px;text-align:center}.stat strong{display:block;font:27px serif;color:#526e52}.stat span{font-size:10px;color:#8b8c76}textarea,input[type=text]{width:100%;border:1px solid #75826644;border-radius:13px;background:#f6f2e7;color:#364936;padding:14px;resize:vertical;min-height:100px;font-size:14px;line-height:1.8}textarea:focus{outline-color:#6b8a69}.muted{color:#828a77;font-size:11px}.button-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.button-row button{min-height:46px;border:1px solid #75826644;border-radius:24px;padding:10px 16px;font-size:12px}.button-row .chosen{background:#4f6d55;color:#fff8e7}.wish-colors{display:flex;justify-content:center;gap:14px;margin:22px 0}.wish-colors button{width:44px;height:44px;border-radius:50%;border:4px solid transparent;box-shadow:inset 0 0 0 1px #ffffff60}.wish-colors button[aria-checked=true]{outline:2px solid #4b6550;outline-offset:3px}.wish-text{font:24px/1.9 serif;text-align:center;padding:35px 12px;white-space:pre-wrap;word-break:break-word}.scroll-text{font:20px/2.1 serif;padding:15px 8px;color:#58644c}.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.room-grid button{border:1px solid #8a947a40;border-radius:12px;padding:13px 5px;min-height:64px}.room-grid button small{display:block;font-size:9px;color:#808b75}#practice{position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(0deg,#14332b80,transparent 50%,#14332b45)}#practice-close{position:absolute;top:calc(26px + var(--safe-top,env(safe-area-inset-top)));left:24px;pointer-events:auto;border-radius:24px;padding:12px 20px;min-height:46px;font-size:12px}#practice-info{position:absolute;left:28px;bottom:calc(145px + var(--safe-bottom,env(safe-area-inset-bottom)))}#practice-title{font:22px serif;margin:0 0 12px}#practice-count{font:48px serif;letter-spacing:1px;font-weight:400}#practice-caption{font-size:12px;color:#dbe1d3}#practice-controls{position:absolute;bottom:calc(30px + var(--safe-bottom,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);display:flex;gap:10px;pointer-events:auto}#practice-controls button{padding:12px 20px;border:1px solid #ffffff40;background:#29483cb3;border-radius:28px;min-height:48px;font-size:12px}.breathing-orb{width:170px;height:170px;border-radius:50%;margin:36px auto;background:radial-gradient(circle at 35% 30%,#d9dbc1,#97b29d 65%,#6f8d74);box-shadow:0 0 55px #6f8d7430;transition:transform 4s ease-in-out}.breathing-orb.inhale{transform:scale(1.25)}.breath-label{text-align:center;font:22px serif;color:#526b50}.map-overview{height:180px;border-radius:16px;background:#d3d9c7;position:relative;overflow:hidden;margin-bottom:20px}.map-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#627c66;transform:translate(-50%,-50%);border:2px solid #f8f3df}.map-dot.self{width:12px;height:12px;background:#d19b5f;z-index:2}.map-zone{position:absolute;font-size:9px;color:#50674d;opacity:.7;pointer-events:none}.note{border-left:2px solid #b5b992;padding:4px 0 4px 14px;margin:20px 0}.note p{white-space:pre-wrap;word-break:break-word}.terms{font-size:11px;line-height:1.7;color:#7e8571}.error{color:#995c4a}.focus-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:380px){#hud{left:10px;right:10px}.brand-pill button,.tools-pill button{min-width:40px}.wordmark{font-size:19px;padding-right:6px}#dock{gap:0;padding:4px}#dock button{min-width:54px;padding:6px;font-size:9px}dialog{padding:20px}}@media(min-width:800px){#hud{left:30px;right:30px;top:28px}#place-label{left:40px;top:115px}#dock{bottom:32px}#dock button{min-width:75px}.welcome-copy{margin-left:5vw}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body.reduce *{animation:none!important;transition:none!important}

/* Native host already applies system-bar and IME insets to the WebView. */
body.native-host{--safe-top:0px;--safe-bottom:0px}
#ritual{bottom:calc(110px + var(--safe-bottom,env(safe-area-inset-bottom)));width:calc(100% - 48px);max-width:400px;min-width:0;padding:12px 18px;border:1px solid #e9dfb52b;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;text-align:left;z-index:4}
#ritual p{margin:0;grid-column:1}
#ritual strong{font:26px serif;margin:0;grid-column:1}
#ritual button{grid-column:2;grid-row:1/4;border-left:1px solid #efe3bf33;border-radius:0;padding:8px 0 8px 16px}
#ritual progress{grid-column:1;width:100%;height:3px;appearance:none;border:0;background:#f1e8c51a;accent-color:#d3c49a}
#ritual progress::-webkit-progress-bar{background:#f1e8c51a;border-radius:2px}
#ritual progress::-webkit-progress-value{background:#d3c49a;border-radius:2px}
#ritual[data-activity="pagoda"]{background:#1c3428e8}
#ritual[data-activity="pagoda"] strong{font-size:1.3125rem}
#ritual[data-activity="pagoda"] button{grid-row:1/5}
#pagoda-stage{line-height:1.45}
@media(max-height:680px){
  #ritual[data-activity="pagoda"]{padding:8px 12px;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  #ritual[data-activity="pagoda"] #ritual-title{grid-column:1;grid-row:1}
  #ritual[data-activity="pagoda"] #ritual-count{grid-column:2;grid-row:1;font-size:1rem;text-align:right}
  #ritual[data-activity="pagoda"] #pagoda-stage{grid-column:1/3;grid-row:2}
  #ritual[data-activity="pagoda"] progress{grid-column:1;grid-row:3;margin:0}
  #ritual[data-activity="pagoda"] button{grid-column:2;grid-row:3;padding:4px 0 4px 10px;line-height:1.2}
}

.publishing-consent{display:flex;align-items:center;gap:12px;min-height:48px;margin:18px 0;font-size:13px;line-height:1.7;cursor:pointer}.publishing-consent input{flex:0 0 24px;width:24px;height:24px;accent-color:#315946}.terms-link{display:inline-flex;align-items:center;min-height:48px;color:#315946;font-size:13px;text-underline-offset:4px}a.primary{display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:48px;margin-top:14px}button:disabled{cursor:default;opacity:.45}

.policy-content{font-size:14px;line-height:1.85;color:#42553e}.policy-content .lead{font:20px/1.7 serif;color:#40593f}.policy-content h2{font-size:18px;line-height:1.6;margin:30px 0 12px}.policy-content p{margin:12px 0}.policy-content .meta{font-size:11px;color:#66775e}.policy-content .table-wrap{overflow-x:auto}.policy-content table{border-collapse:collapse;width:100%;min-width:420px;font-size:13px}.policy-content th,.policy-content td{border-bottom:1px solid #8b9c8340;padding:12px 10px;text-align:left;vertical-align:top}.policy-content .card{display:block;padding:20px;margin:20px 0;background:#fffdf580;border:1px solid #8b9c8330;border-radius:16px}.policy-content .card h2{margin-top:0}.policy-content a{color:#315946;text-underline-offset:4px}.policy-content .action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:24px;background:#315946;color:#fff9e8;text-decoration:none}.policy-content li{margin:8px 0}
.row>div:first-child{flex:1;min-width:0}.row>button{flex:0 0 auto;min-width:64px;min-height:48px;white-space:nowrap}.row input[type=range]{height:48px;flex:0 0 42%;max-width:45%;min-width:96px}.row select{min-height:48px;max-width:55%;flex-shrink:0}.pill{min-height:48px}.wish-colors{gap:8px;flex-wrap:wrap}.wish-colors button{width:48px;height:48px;flex-shrink:0}
@media(max-width:380px){.brand-pill button,.tools-pill button{min-width:48px;min-height:48px}.wordmark{font-size:16px;padding:0 4px}.wordmark small{font-size:10px}#hud{gap:4px}.brand-pill,.tools-pill{padding:2px}}
/* Keep Korean words together in titles and balance longer completion messages. */
dialog[open]{display:flex;flex-direction:column;overflow:hidden}dialog .panel-heading{flex:0 0 auto}#panel-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 2px 2px;scroll-padding-block:12px}.reading-actions button{min-height:48px}.library-cards .card[data-read=true]{background:#e2ebdc;border-color:#8fa384}.library-cards .card[data-read=true] .reading-status{color:#2e5139;font-weight:600}.library-cards .card[data-read=false] .reading-status{color:#5c624e}.row .journey-next{color:#34513d;font-weight:600}
.panel-heading h2{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;line-height:1.45}.panel-heading>div{min-width:0}.panel-heading button{min-width:48px;min-height:48px}.library-filters{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin:12px -2px 4px}.library-filters button{flex-shrink:0;min-height:48px;white-space:nowrap}.library-filters button[aria-pressed=true]{background:#3c604b;color:#fff9e8;border-color:#3c604b}.library-cards .card{min-width:0;min-height:132px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left}.library-cards strong{word-break:keep-all;line-height:1.55}.reading-status{font-size:11px;color:#66775e}.reading-practice,.reading-question{border-top:1px solid #8b9c8340;margin-top:24px;padding-top:8px;line-height:1.85;word-break:keep-all}.reading-practice .section-title,.reading-question .section-title{margin-top:16px}.reading-question{background:#f7f2e366;padding:4px 18px 10px;border-radius:14px}.scroll-text{word-break:keep-all;overflow-wrap:anywhere}.row small+small{margin-top:6px;line-height:1.7}

/* Local scrim follows the noninteractive place text, including bright walls/sky. */
#place-label{padding:10px 14px;border-radius:14px;background:linear-gradient(110deg,#172e26cf,#172e2699 75%,#172e2600);max-width:calc(100% - 110px);text-shadow:0 1px 3px #071a12,0 0 8px #071a1280}#zone-label{color:#edf1d7}#connection{color:#e7eddf}

@font-face {
  font-family: "Nanum Myeongjo";
  src: url("./fonts/NanumMyeongjo-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
#loading h1, #welcome h1, .wordmark, #place-name, #ritual strong, .panel-heading h2 {
  font-family: "Nanum Myeongjo", serif;
  word-break: keep-all;
}
#welcome {
  justify-content: flex-start;
  padding-block: max(20px, var(--safe-top, env(safe-area-inset-top)))
    max(24px, var(--safe-bottom, env(safe-area-inset-bottom)));
  overflow-y: auto;
}
.welcome-copy { flex: none; margin-block: auto; }
.welcome-copy p, .welcome-copy small { word-break: keep-all; }
.welcome-foot { position: static; flex: none; margin-block-start: 24px; }

#hud { display: grid; justify-content: stretch; gap: 14px; pointer-events: none; }
.hud-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.hud-controls > div { flex: none; }
.tools-pill, .hud-actions { margin-inline-start: auto; }
.brand-pill button, .tools-pill button { min-width: 48px; min-height: 48px; }
.wordmark { white-space: nowrap; }
.hud-details { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hud-actions { display: grid; justify-items: end; gap: 8px; max-width: 50%; }
#hud button { pointer-events: auto; }
#place-label { position: static; min-width: 0; max-width: none; }
#chant, #journal { position: static; min-height: 48px; }
#journal { width: 48px; height: 48px; }
#chant, #dock button, #context button { word-break: keep-all; }
#context button { max-width: 100%; }

@media (max-width: 380px) {
  #welcome h1 { margin-block: 20px 16px; }
  #welcome p:not(.eyebrow) { line-height: 1.65; }
  #welcome .primary { margin-top: 20px; gap: 16px; }
  .welcome-foot { margin-block-start: 18px; }
  .hud-controls { gap: 4px; }
  .brand-pill .wordmark { display: grid; justify-items: center; align-content: center; gap: 0; }
  #dock button { justify-content: flex-start; min-height: 70px; }
  #dock .icon { flex: 0 0 26px; }
  #context, #ritual { bottom: calc(132px + var(--safe-bottom, env(safe-area-inset-bottom))); }
  #travel { bottom: calc(140px + var(--safe-bottom, env(safe-area-inset-bottom))); }
}
@media (min-width: 800px) {
  #hud { gap: 24px; }
}
#toast[data-kind="bell"] {
  bottom: calc(105px + var(--safe-bottom, env(safe-area-inset-bottom)));
  min-width: 0;
  padding: 6px 14px;
  line-height: 1.3;
  pointer-events: none;
}

.scene-photo-preview {
  display: block;
  width: 100%;
  max-height: min(50vh, 440px);
  max-height: min(50dvh, 440px);
  object-fit: contain;
  border-radius: 18px;
  background: #263c34;
}
.scene-photo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.scene-photo-actions button {
  min-height: 48px;
  margin: 0;
  border-radius: 16px;
  padding-inline: 10px;
  word-break: keep-all;
  text-align: center;
}
.scene-photo-status {
  min-height: 1.5em;
  margin: 10px 0 0;
  color: #38564a;
}
@media (max-height: 700px) {
  .scene-photo-preview {
    max-height: 34vh;
    max-height: 34dvh;
  }
}

.mural-work {
  margin: 0;
}
.mural-frame {
  margin-top: 12px;
  overflow: auto;
  max-height: 58vh;
  max-height: 58dvh;
  border-radius: 16px;
}
.mural-frame img {
  display: block;
  width: 100%;
  max-height: 58vh;
  max-height: 58dvh;
  object-fit: contain;
}
.mural-frame.enlarged img {
  width: max(160%, 720px);
  max-width: none;
  max-height: none;
}
.mural-work figcaption {
  margin-top: 18px;
  color: #4c5a45;
  word-break: keep-all;
}

.invite-status {
  color: #4c5a45;
  line-height: 1.5;
}
.invite-status:empty {
  margin: 0;
}

.construction-progress {
  width: 100%;
  height: .7rem;
  display: block;
  appearance: none;
  border: 0;
  border-radius: .35rem;
  overflow: hidden;
  background: #c8c9b4;
}
.construction-progress::-webkit-progress-bar {
  background: #c8c9b4;
}
.construction-progress::-webkit-progress-value {
  border-radius: .35rem;
  background: #496653;
}
.construction-progress::-moz-progress-bar {
  border-radius: .35rem;
  background: #496653;
}
.construction-total {
  color: #304338;
  font-size: 1rem;
  font-weight: 650;
  word-break: keep-all;
}
.construction-detail {
  color: #4c5a45;
  line-height: 1.5;
  word-break: keep-all;
}
.construction-secondary {
  margin-top: .55rem;
}
#toast[data-kind="construction"] {
  word-break: keep-all;
}
@media (max-height: 680px) {
  #toast[data-kind="construction"] {
    top: calc(244px + var(--safe-top, env(safe-area-inset-top)));
    bottom: auto;
    padding: 8px 14px;
  }
}

.row small {
  color: #55604e;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.row input.sound-level {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.sound-level::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(to right, #55745f var(--sound-level, 0%), #cbd0bf var(--sound-level, 0%));
}
.sound-level::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 2px solid #e7eadb;
  border-radius: 50%;
  background: #385b46;
  box-shadow: 0 0 0 1px #385b46;
}
#practice-controls {
  width: max-content;
  max-width: calc(100% - 32px);
  flex-wrap: wrap;
  justify-content: center;
}
#practice-controls button {
  flex: 0 0 auto;
  min-width: 48px;
  padding-inline: clamp(12px, 4vw, 20px);
  white-space: nowrap;
}
#practice button {
  -webkit-user-select: none;
  user-select: none;
}

#toast {
  pointer-events: none;
}

@media (orientation: portrait) and (max-height: 680px) {
  #practice {
    display: grid;
    align-content: end;
    gap: 24px;
    padding: 0 24px calc(30px + var(--safe-bottom, env(safe-area-inset-bottom)));
  }
  #practice-info,
  #practice-controls {
    position: static;
  }
  #practice-title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  #practice-count {
    font-size: 40px;
  }
  #practice-caption {
    margin: 8px 0 0;
  }
  #practice-controls {
    justify-self: center;
    max-width: 100%;
    transform: none;
  }
}