/* stage: framing the little film */
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
:root{
  color-scheme:dark;
  --night:#050f1b;
  --panel:#091c2a;
  --cream:#f7e8cc;
  --text:#d9e7e1;
  --muted:#afc7c3;
  --mint:#a6e6cf;
  --mint-bright:#c7f5df;
  --line:rgba(161,214,195,.2);
  --line-hover:rgba(181,236,213,.55);
  --ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --edge:clamp(12px,3vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
body{
  background:var(--night);
  color:var(--cream);
  font-family:Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
}
.film{
  position:relative;
  width:100%;
  height:100%;
  isolation:isolate;
  background:#081526;
}
#filmSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  touch-action:manipulation;
}
::selection{background:#a6e6cf;color:#102e2c}

/* stage: refining the title hierarchy */
.header{
  position:absolute;
  top:calc(var(--camlin-create-toolbar-inset,48px) + 14px);
  left:calc(var(--edge) + 6px);
  max-width:calc(100% - var(--edge) * 2 - 12px);
  pointer-events:none;
  text-shadow:0 2px 12px #040e1b,0 0 28px #040e1b;
}
.eyebrow{
  color:var(--mint);
  font:600 9px/1.5 var(--ui);
  letter-spacing:.2em;
}
h1{
  margin:7px 0 8px;
  color:var(--cream);
  font-size:clamp(22px,2.65vw,34px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
}
#chapter{
  color:var(--text);
  font:450 12px/1.5 var(--ui);
  letter-spacing:.015em;
  font-variant-numeric:tabular-nums;
}
.view-badge{
  display:inline-block;
  margin-top:11px;
  padding:6px 11px;
  border:1px solid rgba(166,230,207,.22);
  border-radius:999px;
  background:rgba(6,20,33,.82);
  color:#b8dece;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  font:500 10px/1.35 var(--ui);
  letter-spacing:.035em;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* stage: making room for words */
.caption{
  position:absolute;
  left:4%;
  width:92%;
  max-height:25vh;
  overflow:auto;
  overscroll-behavior:contain;
  padding:17px clamp(14px,3vw,36px);
  border:1px solid rgba(163,209,190,.1);
  border-top-color:transparent;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(4,14,27,0),rgba(4,14,27,.84) 28%,rgba(4,14,27,.96));
  color:#fff0d5;
  text-align:center;
  font-size:clamp(15px,1.85vw,22px);
  line-height:1.55;
  letter-spacing:.003em;
  text-shadow:0 2px 8px #000;
  text-wrap:pretty;
  scrollbar-width:thin;
  scrollbar-color:#688e80 transparent;
}
.caption:empty{visibility:hidden}
.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 8vw rgba(2,9,22,.36);
}

/* stage: polishing the playback console */
.controls{
  position:absolute;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  left:var(--edge);
  right:var(--edge);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px 10px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(150deg,rgba(14,36,48,.97),rgba(5,19,32,.97));
  box-shadow:0 14px 36px rgba(0,5,12,.35),inset 0 1px 0 rgba(237,255,246,.045);
  color:var(--text);
  font:500 12px/1.3 var(--ui);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
button,select{
  min-height:38px;
  margin:0;
  padding:9px 13px;
  border:1px solid rgba(163,216,197,.25);
  border-radius:10px;
  background-color:#14303e;
  color:var(--cream);
  font:inherit;
  line-height:1.3;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
button{
  flex-shrink:0;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:31px;
  background-image:
    linear-gradient(45deg,transparent 50%,#b7d7ca 50%),
    linear-gradient(135deg,#b7d7ca 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 12px) 50%;
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat;
  text-overflow:ellipsis;
}
select option{
  background:#102735;
  color:#f7e8cc;
  font-weight:400;
}
#sceneSelect{
  flex:0 1 240px;
  min-width:165px;
  max-width:100%;
  border-color:rgba(166,230,207,.38);
  background-color:#173540;
  font-weight:550;
}
#play{
  min-width:110px;
  border-color:var(--mint);
  background:var(--mint);
  color:#123a30;
  font-weight:700;
  box-shadow:0 3px 12px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.28);
}
#next,#restart{background-color:rgba(18,42,55,.72)}
#zoomIn,#zoomOut{
  width:38px;
  padding:0;
  color:var(--mint-bright);
  font-size:19px;
  font-weight:400;
  line-height:1;
}
.controls label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  margin:0;
  color:#bdd0c9;
  font-weight:450;
  white-space:nowrap;
}
.controls label:has(#cameraMode){padding-left:5px}
#cameraMode{font-weight:500;max-width:170px}
.controls label:has(#voice),
.controls label:has(#volume){
  padding:0 7px;
  border-radius:9px;
  transition:background-color .16s ease,color .16s ease;
}
.controls label:has(#voice){cursor:pointer}
input{accent-color:var(--mint);font:inherit}
#voice{
  width:16px;
  height:16px;
  margin:0 1px 0 0;
  flex-shrink:0;
  cursor:pointer;
}
#volume{
  appearance:none;
  -webkit-appearance:none;
  width:72px;
  height:30px;
  margin:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  touch-action:pan-x;
}
#volume::-webkit-slider-runnable-track{
  height:4px;
  border:1px solid rgba(173,215,198,.14);
  border-radius:999px;
  background:#3c605e;
}
#volume::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:14px;
  height:14px;
  margin-top:-6px;
  border:2px solid #d9f5e6;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 1px 5px #051b23;
  transition:box-shadow .16s ease,background-color .16s ease;
}
#volume::-moz-range-track{
  height:3px;
  border:1px solid rgba(173,215,198,.14);
  border-radius:999px;
  background:#3c605e;
}
#volume::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background:#a6e6cf;
}
#volume::-moz-range-thumb{
  width:10px;
  height:10px;
  border:2px solid #d9f5e6;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 1px 5px #051b23;
}
#status{
  flex:0 0 100%;
  min-width:0;
  margin-top:1px;
  padding:8px 3px 0;
  border-top:1px solid rgba(163,209,190,.11);
  color:var(--muted);
  text-align:center;
  font-size:10px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:.015em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.track{
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#73b99f,#b4edce,#f0d7a2);
  box-shadow:0 0 12px rgba(166,230,207,.35);
  pointer-events:none;
}

/* stage: sliding sound settings away */
.sound-panel{
  display:grid;
  grid-template-rows:1fr;
  flex:1 1 100%;
  min-width:0;
  opacity:1;
  transform:translateY(0);
  transition:grid-template-rows .42s ease,opacity .3s ease,transform .42s ease,margin .42s ease;
}
.sound-panel-content{
  min-height:0;
  overflow:hidden;
}
.sound-panel-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:5px 4px 3px;
}
.sound-panel.is-collapsed{
  grid-template-rows:0fr;
  opacity:0;
  transform:translateY(12px);
  margin-top:-8px;
  pointer-events:none;
}
@media(max-width:760px){
  .sound-panel.is-collapsed{margin-top:-7px}
}
@media(max-width:520px){
  .sound-panel.is-collapsed{margin-top:-6px}
}
@media(max-height:480px){
  .sound-panel.is-collapsed{margin-top:-5px}
}

/* stage: clarifying every interaction */
@media(hover:hover){
  button:not(:disabled):hover,select:not(:disabled):hover{
    border-color:var(--line-hover);
    background-color:#214553;
    color:#fff2d9;
    box-shadow:0 2px 9px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.055);
  }
  #play:not(:disabled):hover{
    border-color:var(--mint-bright);
    background:var(--mint-bright);
    color:#103b2d;
    box-shadow:0 2px 16px rgba(166,230,207,.16);
  }
  #next:not(:disabled):hover,#restart:not(:disabled):hover{background-color:#1b3c4b}
  .controls label:has(#voice:not(:disabled)):hover,
  .controls label:has(#volume):hover{
    color:#edf5e6;
    background-color:rgba(166,230,207,.055);
  }
  #volume:hover::-webkit-slider-thumb{
    background:#dbf8e8;
    box-shadow:0 0 0 4px rgba(166,230,207,.1);
  }
  #volume:hover::-moz-range-thumb{box-shadow:0 0 0 4px rgba(166,230,207,.1)}
}
button:not(:disabled):active{
  border-color:#b4e6cf;
  background-color:#102a36;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.22);
}
#play:not(:disabled):active{background:#8ed0b6;color:#10372d}
button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid #f3d9a6;
  outline-offset:3px;
}
#volume:focus-visible{border-radius:5px}
button:disabled,select:disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
}
input:disabled{opacity:.45;cursor:not-allowed}
.controls label:has(input:disabled){color:#8fa6a1;cursor:default}

/* stage: preserving the miniature world */
.name{
  font:7px var(--ui);
  fill:#eaffea;
  text-anchor:middle;
  paint-order:stroke;
  stroke:#15333b;
  stroke-width:1.7;
  opacity:var(--name-opacity,0);
}
.detail{stroke-linecap:round;stroke-linejoin:round}
#dawn,#flowers,#lanterns,#rain,#clouds{opacity:0;transition:opacity 1.5s}

@media(max-width:760px){
  .controls{gap:7px;padding:10px 11px 9px;font-size:11px;border-radius:15px}
  button,select{padding:8px 11px;min-height:36px}
  select{padding-right:29px}
  #sceneSelect{flex-basis:220px}
  #play{min-width:102px}
  #zoomIn,#zoomOut{width:36px}
  .controls label{min-height:36px;gap:6px}
  #volume{width:64px}
  .caption{padding:13px 18px}
}
@media(max-width:520px){
  :root{--edge:10px}
  .header{
    top:calc(var(--camlin-create-toolbar-inset,48px) + 10px);
    left:16px;
    max-width:calc(100% - 32px);
  }
  .eyebrow{font-size:8px;letter-spacing:.14em}
  h1{font-size:23px;margin:6px 0 7px}
  #chapter{font-size:11px}
  .view-badge{margin-top:8px;padding:5px 9px;font-size:9px}
  .caption{
    left:3%;
    width:94%;
    padding:11px 13px;
    border-radius:12px;
    font-size:15px;
    line-height:1.5;
  }
  .controls{
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    gap:6px;
    padding:9px 9px 8px;
  }
  #sceneSelect{
    flex:1 1 calc(100% - 110px);
    min-width:0;
  }
  #play{min-width:100px}
  .controls label:has(#cameraMode){padding-left:0}
  .controls label:has(#voice),
  .controls label:has(#volume){padding:0 5px}
  #cameraMode{max-width:145px}
  #status{font-size:10px;line-height:1.45;padding-top:7px}
}
@media(pointer:coarse) and (min-height:600px){
  button,select,.controls label{min-height:40px}
  #zoomIn,#zoomOut{width:40px}
  #volume{height:36px}
  #voice{width:18px;height:18px}
}
@media(max-height:480px){
  :root{--edge:12px}
  .eyebrow,.view-badge{display:none}
  .header{top:calc(var(--camlin-create-toolbar-inset,48px) + 3px);left:18px}
  h1{font-size:20px;margin:3px 0 4px}
  #chapter{font-size:10px;line-height:1.3}
  .caption{font-size:13px;line-height:1.4;padding:7px 12px;border-radius:10px}
  .controls{
    bottom:calc(7px + env(safe-area-inset-bottom,0px));
    gap:5px;
    padding:7px 9px 6px;
    border-radius:12px;
    font-size:10px;
  }
  button,select{min-height:30px;padding:6px 9px;border-radius:8px}
  select{padding-right:27px}
  #sceneSelect{flex:0 1 195px;min-width:140px}
  #play{min-width:94px}
  #zoomIn,#zoomOut{width:30px;font-size:17px}
  .controls label{min-height:30px;gap:5px}
  #volume{height:25px;width:52px}
  #status{margin-top:0;padding-top:5px;font-size:9px;line-height:1.35}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}

/* stage: freeing the animation space */
#controls.compact-controls{
  left:10px;right:10px;
  bottom:calc(7px + env(safe-area-inset-bottom,0px));
  flex-wrap:nowrap;justify-content:center;
  gap:5px;padding:5px 7px;
  border-radius:13px;
  background:rgba(6,22,33,.88);
  font-size:11px;
}
#controls.compact-controls>#sceneSelect{
  flex:1 1 190px;min-width:60px;max-width:270px;
  min-height:36px;height:36px;padding:6px 26px 6px 9px;
}
#controls.compact-controls>button.compact-icon{
  flex:0 0 36px;width:36px;min-width:36px;
  min-height:36px;height:36px;padding:0;
  font-size:0;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
}
#controls.compact-controls>button.compact-icon::before{
  content:attr(data-icon);
  font:500 18px/1 var(--ui);
}
#controls.compact-controls>button[aria-expanded="true"]{
  border-color:var(--mint);background-color:#285044;color:#e6ffe9;
}

/* stage: keeping settings within reach */
#controls .compact-settings{
  position:absolute;bottom:calc(100% + 8px);right:0;
  width:min(540px,100%);
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:8px;
  padding:12px;
  max-height: min(56vh,380px);
  overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--line-hover);border-radius:14px;
  background:rgba(7,25,37,.98);
  box-shadow:0 8px 32px #0008;
}
#controls .compact-settings[hidden]{display:none}
#controls .compact-settings label{min-height:36px}
#controls .compact-settings #status{
  margin:0;padding:7px 0 0;font-size:10px;
}
#controls .compact-settings .voice-cast{
  flex:1 1 100%;
}
#controls .compact-settings .voice-cast summary{
  padding:8px 10px;text-align:center;
}
#controls .compact-settings .sound-panel-inner{padding:0}
#controls .compact-settings .sound-panel.is-collapsed{margin-top:-8px}
#controls .compact-settings .voice-cast-panel{
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
}
@media(pointer:coarse){
  #controls.compact-controls>button.compact-icon{
    width:40px;min-width:40px;flex-basis:40px;height:40px;min-height:40px;
  }
  #controls.compact-controls>#sceneSelect{height:40px;min-height:40px}
}
@media(max-width:370px){
  #controls.compact-controls{left:5px;right:5px;gap:3px;padding:4px}
  #controls.compact-controls>button.compact-icon{
    width:34px;min-width:34px;flex-basis:34px;
  }
}