:root{--safe-start:env(safe-area-inset-left);--safe-end:env(safe-area-inset-right)}html[dir=rtl]{--safe-start:env(safe-area-inset-right);--safe-end:env(safe-area-inset-left)}
[hidden]{display:none!important}button,select,input,summary{touch-action:manipulation}button,select{font:inherit}button{cursor:pointer;min-width:48px;min-height:48px;border:2px solid var(--ink);border-radius:16px;background:var(--cream);padding:10px 16px;box-shadow:2px 3px 0 #2a211c25}button:not(.hud-btn):hover{background:#fff8e5}button:not(.hud-btn):active{transform:translateY(2px);box-shadow:none}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,.map-canvas:focus-visible{outline:4px solid #133d70!important;outline-offset:4px}.map-canvas:focus-visible{outline-offset:-5px}.close{position:absolute;inset-inline-end:8px;top:8px;font-size:28px;line-height:1;padding:0;width:44px;height:44px;min-width:44px;min-height:44px;background:transparent;border:0;box-shadow:none}#sound-status{position:absolute;top:calc(82px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:10px 18px;background:var(--cream);border:2px solid var(--ink);border-radius:15px;max-width:90%;text-align:center;font-size:15px}dialog{box-sizing:border-box;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:24px;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:24px;box-shadow:6px 8px 0 #2a211c40;overscroll-behavior:contain}dialog::backdrop{background:#172c45a3}dialog h1{font-size:24px;margin:4px 0 24px;padding-inline-end:24px}dialog label:not(.check){display:block;font-size:17px;margin:18px 0 8px}dialog select,dialog input[type=search]{box-sizing:border-box;width:100%;height:50px;font:inherit;color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:8px 12px;background:white}dialog input[type=range]{width:100%;height:44px;accent-color:#246aa2}.check{display:flex;align-items:center;gap:14px;margin:12px 0 24px}.check input{width:26px;height:26px;accent-color:#246aa2}summary{cursor:pointer;min-height:44px;line-height:44px}#credits{padding-inline-start:22px;font-size:13px;line-height:1.6}#credits li{margin-block:14px}#credits a{color:#164b78}#credits small{display:block}#loader{display:grid;place-items:center;text-align:center;padding:24px}#loader{direction:inherit}#loader .ld-text{font-size:clamp(22px,3.4vmin,30px)}noscript{position:fixed;inset:30% 20px;z-index:100;background:var(--cream);padding:24px}.reduce-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reduce-motion button:not(.hud-btn):active{transform:none}@media(max-height:480px){dialog{padding:16px 24px}dialog h1{margin-bottom:12px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}



/* Original illustrated map controls, kept at the same physical corners in both languages. */
.public-hud { position:absolute; inset:0; pointer-events:none; z-index:10; }
.public-hud .hud-corner { position:absolute; display:flex; gap:14px; pointer-events:none; }
.public-hud .hud-corner > * { pointer-events:auto; }
.public-hud .hud-tl { top:calc(var(--gap) + var(--sat)); left:calc(var(--gap) + var(--sal)); }
.public-hud .hud-tr { top:calc(var(--gap) + var(--sat)); right:calc(var(--gap) + var(--sar)); }
.public-hud .hud-bl { bottom:calc(var(--gap) + var(--sab)); left:calc(var(--gap) + var(--sal)); }
.public-hud .hud-br { bottom:calc(var(--gap) + var(--sab)); right:calc(var(--gap) + var(--sar)); }
.public-hud .hud-btn { width:var(--hud); height:var(--hud); }
.public-hud .hud-zoom { display:flex; flex-direction:column; gap:14px; }
.public-hud .hud-zoom .hud-btn > svg { width:70%; height:70%; }
.public-hud .hud-home { margin-bottom:6px; }
.public-hud .hud-sound, .public-hud .hud-zoom .hud-btn { width:calc(var(--hud) * .85); height:calc(var(--hud) * .85); }
.public-hud .hud-sound.is-muted { background-color:var(--stone); }
.public-hud .hud-parents { width:56px; height:56px; background-color:var(--paper); opacity:.92; }
.public-hud .hud-parents > svg.ico { width:64%; height:64%; }
.reduce-motion .hud-btn.is-pressed { transform:none; }
@media(max-width:600px) { :root { --hud:58px; } }

/* Compact parent library. Row dimensions never depend on recording state. */
#settings-dialog{width:90vw;height:90dvh;max-width:none;max-height:90dvh;padding:0;border:1px solid #ded7ca;border-radius:18px;background:#fffdf8;box-shadow:0 16px 60px #2a211c30;overflow:hidden;font-family:Arial,sans-serif;font-size:14px;line-height:1.5}
#settings-dialog *{box-sizing:border-box}
#settings-dialog button,#settings-dialog select,#settings-dialog input[type=search]{font:inherit;box-shadow:none;border:1px solid #ded7ca;border-radius:8px;background:#fffdf8;color:#2a211c;height:36px;min-height:36px;padding:6px}
#settings-dialog button:hover{background:#f2ede2}
#settings-dialog button:active{transform:none}
#settings-dialog button:disabled{opacity:.35;cursor:default}
#settings-dialog h1,#settings-dialog h2,#settings-dialog h3{font-family:Arial,sans-serif;font-weight:700;letter-spacing:-.025em}
#settings-dialog h1{font-size:21px;line-height:1.3;padding:0;margin:0}
#settings-dialog h2{font-size:23px;margin:0}
#settings-dialog h3{font-size:16px;margin:0 0 12px}
.parent-header{height:66px;border-bottom:1px solid #e9e3d8;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.parent-header-actions{display:flex;align-items:center;gap:6px}
#settings-dialog .parent-close{display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;padding:6px}
.parent-shell{display:flex;height:calc(100% - 66px);min-height:0}
.parent-sidebar{width:200px;flex-shrink:0;background:#f8f5ee;border-inline-end:1px solid #e9e3d8;padding:22px 12px;display:flex;flex-direction:column}
#parent-nav-title{color:#897d6d;font-size:11px;letter-spacing:.06em;padding-inline:12px;margin:0 0 12px}
#parent-nav{display:flex;flex-direction:column;gap:4px}
#settings-dialog #parent-nav button{text-align:start;padding:6px;font-weight:600;color:#6c6256}
#settings-dialog #parent-nav button[aria-current=page]{background:#e5eddc;color:#354e2e}
#settings-dialog #parent-nav button:last-child{margin-top:16px;}
.parent-content{position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
#parent-notice{position:absolute;bottom:14px;inset-inline:16px;z-index:4;background:#f2eddd;border:1px solid #ded7ca;border-radius:10px;padding:10px 16px;margin:0;color:#564c39;font-size:13px;pointer-events:none}
#parent-library{display:flex;flex:1;min-height:0;min-width:0}
.parent-browser{flex:1;min-width:0;display:flex;flex-direction:column;padding:22px 24px 0}
.parent-library-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
#parent-count{color:#8b7e6e;font-size:12px;white-space:nowrap}
.parent-toolbar{display:flex;align-items:center;gap:8px;padding:6px 6px 14px;scroll-padding-inline:6px;flex-wrap:nowrap;overflow-x:auto;flex-shrink:0;border-bottom:1px solid #e9e3d8}
#settings-dialog #parent-search{height:36px;background:#fff;width:300px;min-width:300px;flex:0 0 300px}
.parent-filters{display:flex;gap:6px;flex-shrink:0}
#settings-dialog .parent-filters select{width:auto;max-width:180px;height:36px;font-size:12px}
#parent-list{overflow:auto;flex:1;min-height:0;overscroll-behavior:contain;padding:2px 0 64px;scrollbar-width:thin}
.parent-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border-bottom:1px solid #eee8de;padding:8px 4px;height:66px;min-height:66px}
.parent-row.selected{background:#f0f4e9;border-radius:8px}
.parent-item{display:flex;align-items:center;gap:12px;min-width:0}
.parent-art{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border-radius:9px;background:#f6f1e6}
.parent-art img{object-fit:contain;padding:3px;width:100%;height:100%}
.parent-art svg{width:70%;height:70%}
.parent-item-text{min-width:0;display:grid;gap:2px}
.parent-item-text strong{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parent-badge{font-size:11px;color:#857768;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.parent-badge.personal{color:#48723d}.parent-badge.recording{color:#a64636}
.parent-row-controls{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
#settings-dialog .parent-row-controls select{width:82px;min-width:82px;height:36px;min-height:36px;font-size:12px;padding:6px;margin-inline-end:4px}
#settings-dialog .parent-icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;min-height:36px;padding:6px;flex-shrink:0}
#settings-dialog .parent-icon-button:hover{background:#ede8dc;border-color:#ded7ca}
#settings-dialog button svg{width:22px;height:22px;display:block;flex-shrink:0}
#settings-dialog .parent-row-controls .parent-icon-button[data-action=primary]{border-color:#ded7ca;background:#fffdf8}
#settings-dialog .parent-row-controls .primary{background:#405b38!important;border-color:#405b38!important;color:#fffdf8}
#settings-dialog .parent-row-controls button.recording{background:#a64636!important;border-color:#a64636!important;color:#fffdf8}
#settings-dialog .parent-icon-button[aria-pressed=true]{color:#405b38;background:#e5eddc}
#settings-dialog .parent-info-button{color:#958875}
#settings-dialog .parent-more{display:block;margin:16px auto}
.parent-empty{text-align:center;padding:48px 12px;color:#857768}
.parent-info-popup{position:absolute;z-index:10;background:#fffdf8;border:1px solid #d9d0be;border-radius:12px;box-shadow:0 8px 32px #2a211c25;padding:20px;overflow:auto;font-size:13px;line-height:1.7}
.parent-info-popup h3{padding-inline-end:28px}
.parent-info-popup p{margin:10px 0;color:#766b5c}
.parent-info-popup .parent-reading{white-space:pre-wrap;color:#2a211c}
#settings-dialog .parent-popup-close{position:absolute;top:8px;inset-inline-end:8px}
#parent-general{padding:24px;overflow:auto;flex:1}
#parent-general>select,#parent-general>input,#parent-general>label,#parent-general>details{max-width:560px}
.parent-mobile{display:none}
@media(min-width:768px) and (max-width:1100px){.parent-sidebar{width:168px}.parent-browser{padding:18px 16px 0}.parent-art{width:36px;height:36px}.parent-item{gap:6px}}
@media(max-width:767px){
 #settings-dialog{width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;border:0;border-radius:0;margin:0;padding-top:env(safe-area-inset-top)}
 .parent-header{height:60px;padding:10px 16px}.parent-shell{height:calc(100% - 60px);padding-bottom:env(safe-area-inset-bottom)}
 .parent-sidebar{display:none}#settings-dialog .parent-mobile{display:block;width:calc(100% - 32px);margin:10px 16px;flex-shrink:0;height:36px}
 .parent-browser{padding:8px 16px 0}.parent-library-heading{margin-bottom:12px}#settings-dialog h2{font-size:21px}
 .parent-toolbar{gap:6px;padding-bottom:10px}
 .parent-row{height:96px;min-height:96px;padding:7px 2px;grid-template-columns:minmax(0,1fr) 36px;grid-template-rows:36px 40px;gap:5px 6px}
 .parent-item{grid-row:1;gap:8px}.parent-art{width:34px;height:34px}.parent-info-button{grid-column:2;grid-row:1}
 .parent-row-controls{grid-row:2;grid-column:1 / -1;justify-content:flex-end;gap:6px}
 #settings-dialog .parent-row-controls .parent-icon-button{width:36px;height:36px;min-width:36px;min-height:36px}
 #settings-dialog .parent-row-controls select{margin-inline-end:auto;height:36px;min-height:36px}
 #parent-general{padding:16px}#parent-notice{font-size:12px;inset-inline:10px}
}

#settings-dialog :focus-visible{outline:2px solid #133d70!important;outline-offset:2px}

#settings-dialog .parent-row-controls .parent-edit-button{width:auto;min-width:58px;padding-inline:10px;font-size:12px}

/* Native select arrows ignore padding on some browsers; keep native semantics with a positioned glyph. */
#settings-dialog select,#settings-dialog .parent-row-controls select{
 appearance:none;-webkit-appearance:none;padding-inline-end:34px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='m5 8 6 6 6-6' fill='none' stroke='%232a211c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-size:22px 22px;background-position:right 6px center;
}
html[dir=rtl] #settings-dialog select{background-position:left 6px center}

#settings-dialog .parent-row-controls .parent-text-button{width:auto;min-width:0;padding-inline:10px;font-size:12px;white-space:nowrap}

.parent-row-controls{min-width:0;max-width:100%}
.parent-control-status{max-width:170px;flex-shrink:0;margin-inline:6px}
@media(max-width:767px){.parent-row-controls{overflow-x:auto;justify-content:safe flex-end}.parent-control-status{max-width:150px}}

#settings-dialog .parent-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:110px;height:36px;padding:6px;font-size:12px;text-align:start}
.parent-dropdown-chevron{display:flex;width:22px;height:22px;flex-shrink:0}
#settings-dialog .parent-dropdown-trigger[aria-expanded=true]{border-color:#8b9e79;background:#f0f4e9}
.parent-dropdown-menu{position:absolute;z-index:12;padding:6px;background:#fffdf8;border:1px solid #ded7ca;border-radius:10px;box-shadow:0 8px 24px #2a211c20;overflow:auto}
#settings-dialog .parent-dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:36px;padding:6px;border:0;border-radius:6px;text-align:start;font-size:12px}
#settings-dialog .parent-dropdown-option[aria-selected=true]{background:#e5eddc;color:#354e2e}
#settings-dialog .parent-dropdown-option:hover,#settings-dialog .parent-dropdown-option:focus{background:#f2ede2}
.parent-dropdown-check{width:22px;text-align:center;font-size:16px}

.parent-setting-label{font-size:14px;margin:22px 0 8px}
.parent-language-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid #ded7ca;border-radius:10px;background:#f8f5ee;margin-bottom:24px}
#settings-dialog .parent-language-tabs button{min-width:100px;border-color:transparent;background:transparent}
#settings-dialog .parent-language-tabs button[aria-pressed=true]{background:#e5eddc;border-color:#cbd6be;color:#354e2e;font-weight:600}

.public-hud .hud-tl{align-items:center;direction:ltr;gap:12px}
.map-volume-panel{display:flex;align-items:center;gap:10px;width:min(210px,calc(100vw - 150px));padding:10px 14px;border:3px solid var(--ink);border-radius:24px;background:var(--cream);color:var(--ink);box-shadow:3px 4px 0 #2a211c40;pointer-events:auto}
#map-volume{width:100%;min-width:0;height:26px;margin:0;accent-color:#8a9a3c;cursor:pointer}
#map-volume-value{font-size:12px;font-weight:700;min-width:30px;font-variant-numeric:tabular-nums}
.public-hud .hud-parents{position:relative;touch-action:none;-webkit-touch-callout:none}
.public-hud .hud-parents>.hold-ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);pointer-events:none;overflow:visible;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke:#cf4936;stroke-width:5.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;visibility:hidden}
.is-holding .hold-ring circle{visibility:visible;animation:parent-hold 3s linear forwards}
.reduce-motion .is-holding .hold-ring circle{animation:parent-hold 3s linear forwards!important}
@keyframes parent-hold{to{stroke-dashoffset:0}}

.public-hud .hud-corner>.settings-hold-hint{display:none;position:absolute;top:calc(100% + 12px);right:0;white-space:nowrap;padding:6px 10px;border:2px solid var(--ink);border-radius:12px;background:var(--cream);color:var(--ink);box-shadow:2px 3px 0 #2a211c25;font-size:13px;line-height:1.4;pointer-events:none}
.public-hud #settings.is-holding+.settings-hold-hint{display:block}

/* Optional family edition, using the parent area's paper and sage controls. */
.family-setting { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px; }
#settings-dialog .family-toggle { position:relative;width:60px;height:36px;min-height:36px;flex:0 0 60px;box-shadow:none;padding:3px;border:2px solid #6c6256;border-radius:999px;background:#b8afa0;cursor:pointer; }
#settings-dialog .family-toggle:hover {background:#a99f8e;border-color:#51483e;}
.family-toggle span {position:absolute;inset-block-start:3px;inset-inline-start:3px;display:block;box-sizing:border-box;width:26px;height:26px;border:1px solid #6c6256;border-radius:50%;background:#fffdf6;box-shadow:0 1px 2px #2a211c33;transition:transform .15s;}
#settings-dialog .family-toggle[aria-checked=true] {background:#415f35;border-color:#354e2e;}
#settings-dialog .family-toggle[aria-checked=true]:hover {background:#354e2e;}
.family-toggle[aria-checked=true] span {transform:translateX(24px);}
[dir=rtl] .family-toggle[aria-checked=true] span {transform:translateX(-24px);}
#settings-dialog .family-toggle:disabled {opacity:.65;cursor:default;}
.family-note {font-size:13px;color:#827361;}
.family-launch {position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:4;background:#fff4d5;border:3px solid #2a211c;border-radius:24px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;}
.family-dialog {width:min(900px,90vw);max-height:90dvh;background:#fffdf6;color:#2a211c;border:1px solid #d9cfbe;border-radius:20px;padding:20px;overflow:auto;}
.family-dialog::backdrop {background:#15233399;}
.family-dialog header,.family-dialog footer {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.family-dialog header {justify-content:space-between;}.family-dialog h2 {font-size:22px;margin:0 0 16px;}
.family-dialog button {min-height:36px;border:1px solid #d9cfbe;border-radius:8px;background:#fffdf6;color:inherit;padding:6px 12px;font:inherit;cursor:pointer;}
.family-dialog button:disabled {opacity:.4;}.family-dialog button:focus-visible,.family-toggle:focus-visible {outline:2px solid #2a211c;outline-offset:3px;}
.family-stories {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}.family-stories img {display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;margin-bottom:8px;}
.family-scene {display:block;width:100%;max-height:48dvh;object-fit:contain;margin:12px auto;}.family-story-text {font-size:18px;line-height:1.7;}
@media(max-width:767px){.family-launch{top:92px;max-width:70vw;font-size:14px;}.family-dialog{padding:14px;}.family-story-text{font-size:16px;}}

/* Move the caption only; preserve the porthole position. */
#load-progress{transform:translateY(24px)}