:root {
  color-scheme: dark;
  font-family: Georgia, "Noto Serif KR", serif;
}

* { box-sizing: border-box; }

.vn-standalone-body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #f6e9cb;
  background: radial-gradient(circle at 20% 5%, #47354d, transparent 38%), #16121f;
}

.vn-layout-toolbar { display:flex;min-height:54px;align-items:center;justify-content:space-between;gap:1rem;padding:.48rem clamp(.65rem,2vw,1.25rem);border-bottom:1px solid rgba(235,207,153,.16);background:rgba(17,14,23,.96);font-family:Inter,"Noto Sans KR",sans-serif; }
.vn-layout-toolbar>div { display:grid;gap:.05rem; }.vn-layout-toolbar small{color:#a7854f;font-size:.54rem;letter-spacing:.12em}.vn-layout-toolbar strong{font-size:.76rem;font-weight:600}.vn-layout-toolbar nav{display:flex;gap:.35rem}.vn-layout-toolbar button{min-height:34px;padding:.38rem .72rem;border:1px solid #514658;border-radius:.55rem;color:#cfc2d1;background:#24202b;font:inherit;font-size:.65rem;cursor:pointer}.vn-layout-toolbar button.is-active{border-color:#d2aa65;color:#281e29;background:#d2aa65}
.vn-standalone-body #player-root { display:grid;min-height:calc(100dvh - 54px);place-items:center;padding:.55rem; }
.vn-standalone-body #player-root .vn-player-shell { width:auto;max-width:100%;margin:0; }
.vn-standalone-body #player-root.is-landscape .vn-player-shell { width:min(calc((100dvh - 65px) * 16 / 9),calc(100vw - 1.1rem));aspect-ratio:16/9; }
.vn-standalone-body #player-root.is-shortform .vn-player-shell { width:min(calc((100dvh - 65px) * 9 / 16),calc(100vw - 1.1rem));aspect-ratio:9/16; }
.vn-standalone-body #player-root .vn-stage { width:100%;height:100%;min-height:0; }

.vn-player-shell {
  --vn-gutter: clamp(.6rem, 2vw, 1.25rem);
  position: relative;
  width: min(calc(100% - var(--vn-gutter) - var(--vn-gutter)), 72rem);
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  color: #fff1cb;
  background: #12121d;
  box-shadow: 0 0 80px rgba(0, 0, 0, .46);
}

.vn-stage {
  position: relative;
  min-height: max(620px, calc(100dvh - 1.4rem));
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 68% 32%, rgba(229,193,118,.18), transparent 22%), linear-gradient(145deg,#17182a,#272034 52%,#10111b);
  transition: background 700ms ease;
}

.vn-base-background,
.vn-camera-background {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.vn-base-background {
  z-index:-3;
  overflow:hidden;
  transform-origin:50% 50%;
  will-change:transform;
}

.vn-camera-background {
  z-index:-2;
  overflow:visible;
  transform-origin:50% 50%;
  will-change:transform;
}

.vn-background-media {
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(circle at 68% 32%,rgba(229,193,118,.18),transparent 22%),linear-gradient(145deg,#17182a,#272034 52%,#10111b);
  transition:transform .2s ease,background-position .2s ease;
  pointer-events:none;
}

.vn-stage-background-media {
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
}

.vn-stage-background-image {
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  transform-origin:center;
  user-select:none;
  pointer-events:none;
}

.vn-stage::before {
  position: absolute;
  z-index: -1;
  inset: -20%;
  content: "";
  opacity: 0;
  background-image:
    radial-gradient(circle, #fff2ba 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(185,166,233,.85) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.5px);
  background-position: 20px 30px, 120px 80px, 70px 155px;
  background-size: 190px 170px, 280px 230px, 230px 260px;
  animation: none;
}

.vn-stage[data-decoration="stars"]::before,
.vn-stage[data-decoration="stars-constellation"]::before { opacity: .7;animation:vn-star-drift 40s linear infinite; }

.vn-stage::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(4,5,11,.04), rgba(4,5,11,.16) 48%, rgba(4,5,11,.78));
  pointer-events: none;
}

.vn-stage[data-background="light-tunnel"],.vn-background-media[data-background="light-tunnel"] { background: radial-gradient(ellipse at 50% 48%, rgba(255,223,147,.5), transparent 18%), repeating-radial-gradient(ellipse at 50% 48%, #252340 0 8%, #40345a 9% 13%, #121522 14% 21%); }
.vn-stage[data-background="nebula"],.vn-background-media[data-background="nebula"] { background: radial-gradient(ellipse at 66% 40%, rgba(204,129,183,.54), transparent 28%), radial-gradient(ellipse at 38% 52%, rgba(101,118,184,.62), transparent 34%), linear-gradient(145deg,#17152c,#342942,#10111c); }
.vn-stage[data-background="protostar"],.vn-background-media[data-background="protostar"] { background: radial-gradient(circle at 63% 44%, #ffe6a6 0 2%, #bd7153 4%, rgba(109,53,75,.58) 15%, transparent 36%), linear-gradient(150deg,#151525,#3c253d,#0d1018); }
.vn-stage[data-background="ignition"],.vn-background-media[data-background="ignition"] { background: radial-gradient(circle at 62% 43%, #fff9d6 0 3%, #ffc468 6%, rgba(220,87,64,.68) 17%, transparent 39%), linear-gradient(145deg,#22152a,#543041,#10121c); }
.vn-stage[data-background="star-field"],.vn-background-media[data-background="star-field"] { background: radial-gradient(circle at 72% 33%, rgba(255,225,154,.25), transparent 18%), linear-gradient(145deg,#111424,#212949,#0c0d17); }
.vn-stage[data-background="red-giant"],.vn-background-media[data-background="red-giant"] { background: radial-gradient(circle at 65% 45%, #ffd08c 0 4%, #d8654c 12%, rgba(116,42,55,.5) 34%, transparent 52%), linear-gradient(145deg,#24131f,#4b2632,#100d17); }
.vn-stage[data-background="white-dwarf"],.vn-background-media[data-background="white-dwarf"] { background: radial-gradient(circle at 66% 42%, white 0 2%, #cae5ff 4%, rgba(109,123,189,.45) 14%, transparent 28%), linear-gradient(145deg,#141728,#28324c,#0b0c15); }
.vn-stage[data-background="supernova"],.vn-background-media[data-background="supernova"] { background: radial-gradient(circle at 64% 44%, white 0 3%, #fff3b0 5%, #ef9367 11%, rgba(178,66,95,.62) 25%, transparent 44%), repeating-radial-gradient(circle at 64% 44%, transparent 0 8%, rgba(242,189,116,.16) 9% 10%, transparent 11% 17%), #1a101e; }
.vn-stage[data-background="stardust"],.vn-background-media[data-background="stardust"] { background: radial-gradient(ellipse at 60% 43%, rgba(231,169,205,.42), transparent 28%), radial-gradient(ellipse at 44% 56%, rgba(125,164,220,.42), transparent 36%), linear-gradient(145deg,#151628,#312841,#10111b); }
.vn-stage[data-background="dark"],.vn-background-media[data-background="dark"] { background: #070812; }

.vn-topbar {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, rgba(8,9,17,.9), transparent);
  pointer-events: none;
}

.vn-title small { display: block; color: #d2a959; font-size: .7rem; letter-spacing: .16em; }
.vn-title strong { display: block; margin-top: .2rem; font-size: 1rem; font-weight: 500; }
.vn-controls { display:flex;align-items:center;pointer-events:auto; }
.vn-more summary {
  min-height: 32px;
  padding: .35rem .62rem;
  border: 1px solid rgba(235,207,153,.24);
  border-radius: 999px;
  color: #e9dbc3;
  background: rgba(22,21,35,.78);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}

.vn-more { position:relative; }
.vn-more summary { display: grid; min-width: 36px; place-items: center; list-style: none; }
.vn-more summary::-webkit-details-marker { display: none; }
.vn-more[open] summary { border-color:rgba(231,190,110,.65);color:#f8e4b9;background:rgba(39,31,48,.96); }
.vn-more-panel { position:absolute;z-index:40;top:calc(100% + .45rem);right:0;width:min(290px,calc(100vw - 1.5rem));max-height:min(430px,calc(100dvh - 5.5rem));overflow-x:hidden;overflow-y:auto;padding:.45rem;border:1px solid rgba(235,207,153,.28);border-radius:.85rem;color:#eadfc9;background:rgba(20,18,30,.98);box-shadow:0 20px 55px rgba(0,0,0,.52);overscroll-behavior:contain; }
.vn-more-panel section { display:grid;gap:.35rem;padding:.6rem; }.vn-more-panel section+section{border-top:1px solid rgba(235,207,153,.12)}
.vn-more-panel section>small { color:#c8a35f;font-size:.61rem;letter-spacing:.12em; }
.vn-setting-row,.vn-volume-control { display:grid;gap:.45rem;color:#d8c9b0;font-size:.7rem; }
.vn-setting-row { grid-template-columns:minmax(0,1fr) minmax(112px,auto);align-items:center; }
.vn-setting-row select { min-height:34px;max-width:145px;padding:.35rem 1.8rem .35rem .55rem;border:1px solid rgba(235,207,153,.22);border-radius:.55rem;color:#eee1c8;background:#272231;font:inherit; }
.vn-setting-action { display:flex;min-height:38px;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .6rem;border:1px solid rgba(235,207,153,.16);border-radius:.6rem;color:#e9ddc8;background:#25212f;font:inherit;font-size:.7rem;cursor:pointer; }.vn-setting-action strong{color:#c9ad78;font-size:.64rem;font-weight:500}.vn-setting-action.is-muted strong,.vn-setting-action.is-danger strong{color:#c99fa8}.vn-setting-action.is-danger{border-color:rgba(184,111,126,.18)}
.vn-volume-control { padding:.55rem .6rem;border:1px solid rgba(235,207,153,.14);border-radius:.6rem;background:#1b1826; }
.vn-volume-control>span { display:flex;justify-content:space-between;gap:1rem; }.vn-volume-control output{color:#d6b66f;font-variant-numeric:tabular-nums}
.vn-volume-control input { display:block;width:100%;min-width:0;margin:0;accent-color:#d4ad65; }

.vn-progress { position: absolute; z-index: 20; top: 72px; right: 1.2rem; left: 1.2rem; height: 2px; overflow: hidden; background: rgba(255,255,255,.12); }
.vn-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#9975ad,#e7be6e); transition: width 250ms ease; }
.vn-chapter { position: absolute; z-index: 10; top: 88px; left: 1.25rem; color: rgba(239,220,184,.63); font-size: .74rem; letter-spacing: .1em; }

.vn-constellation { display:none;position: absolute; z-index: 2; top: 20%; right: 8%; width: 360px; aspect-ratio: 1.25; opacity: .72; }
.vn-stage[data-decoration="stars-constellation"] .vn-constellation { display:block; }
.vn-constellation i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffe9ad; box-shadow: 0 0 15px #efd38f; }
.vn-constellation i:nth-child(1){top:12%;left:18%}.vn-constellation i:nth-child(2){top:28%;left:58%}.vn-constellation i:nth-child(3){top:52%;left:31%}.vn-constellation i:nth-child(4){top:70%;left:73%}.vn-constellation i:nth-child(5){top:87%;left:44%}
.vn-constellation span { position: absolute; height: 1px; background: rgba(255,235,187,.5); transform-origin: left; }
.vn-constellation span:nth-of-type(1){top:15%;left:20%;width:44%;transform:rotate(20deg)}.vn-constellation span:nth-of-type(2){top:31%;left:59%;width:35%;transform:rotate(137deg)}.vn-constellation span:nth-of-type(3){top:55%;left:33%;width:49%;transform:rotate(24deg)}.vn-constellation span:nth-of-type(4){top:72%;left:73%;width:38%;transform:rotate(142deg)}

.vn-stage-layers { position:absolute;z-index:4;inset:0;transform-origin:50% 50%;pointer-events:none;will-change:transform; }
.vn-stage-content { position:absolute;inset:0;pointer-events:none; }
.vn-stage-element { position:absolute;width:24%;height:44%;margin:0;padding:0;overflow:visible;border:0;color:inherit;background:transparent;transform:translate(-50%,-50%) rotate(var(--vn-element-rotation,0deg)) scale(var(--vn-element-scale,1));transform-origin:center;filter:drop-shadow(0 18px 26px rgba(0,0,0,.38));transition:filter .22s ease,opacity .22s ease;pointer-events:none; }
.vn-stage-element[hidden] { display:none; }
.vn-stage-element.is-object { width:30%;height:34%; }
.vn-stage-element.is-text { width:var(--vn-text-width,56%);height:auto;min-height:12%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.32)); }
.vn-stage-element.is-object.is-light-effect { width:36%;height:44%;mix-blend-mode:screen; }
.vn-stage-exit,.vn-stage-entrance,.vn-stage-emphasis,.vn-stage-ambient,.vn-stage-visual { width:100%;height:100%; }
.vn-stage-visual { display:grid;place-items:center;transform:scale(var(--vn-element-flip-x,1),var(--vn-element-flip-y,1)); }
.vn-stage-visual img { display:block;width:100%;height:100%;object-fit:contain;user-select:none; }
.vn-stage-text { width:100%;padding:.25em .45em;box-sizing:border-box;line-height:1.35;white-space:pre-wrap;overflow-wrap:break-word;word-break:keep-all;text-wrap:pretty; }
.vn-stage-text.is-serif { font-family:"Noto Serif KR",Georgia,serif; }
.vn-stage-text.is-sans-serif { font-family:Inter,"Noto Sans KR",sans-serif; }
.vn-stage-text.is-handwriting { font-family:"Nanum Pen Script","Noto Serif KR",cursive; }
.vn-stage-text.has-soft-background { border:1px solid rgba(255,244,214,.2);border-radius:.45em;background:rgba(255,248,231,.16);backdrop-filter:blur(5px); }
.vn-stage-text.has-dark-background { border:1px solid rgba(255,244,214,.18);border-radius:.45em;background:rgba(15,13,23,.74);backdrop-filter:blur(6px); }
.vn-stage-text.has-outline { text-shadow:-1px -1px 0 rgba(20,16,27,.92),1px -1px 0 rgba(20,16,27,.92),-1px 1px 0 rgba(20,16,27,.92),1px 1px 0 rgba(20,16,27,.92),0 3px 10px rgba(0,0,0,.7); }
.vn-stage-element.is-missing-asset { border:1px dashed rgba(225,185,111,.7);background:rgba(46,36,53,.24); }
.vn-stage-missing { display:grid;place-items:center;padding:.42rem .65rem;border:1px solid rgba(239,211,157,.42);border-radius:999px;color:#f3d799;background:rgba(20,17,27,.9);font-family:Inter,"Noto Sans KR",sans-serif;font-size:.68rem;white-space:nowrap; }
.is-stage-editing .vn-stage-element.is-missing-asset { width:150px;height:86px;transform:translate(-50%,-50%) rotate(var(--vn-element-rotation,0deg)); }
.vn-stage-element.is-listening { opacity:.62!important;filter:brightness(.62) saturate(.75) drop-shadow(0 14px 20px rgba(0,0,0,.34)); }
.vn-stage-element.is-speaking { filter:brightness(1.08) drop-shadow(0 0 28px rgba(241,207,137,.28)) drop-shadow(0 18px 26px rgba(0,0,0,.38)); }
.vn-scene-transition { position:absolute;z-index:55;inset:0;opacity:0;pointer-events:none; }
.vn-scene-transition.is-fade-dark { background:#080710;animation:vn-scene-entry-fade var(--vn-scene-transition-duration,.7s) ease-out both; }
.vn-scene-transition.is-fade-light { background:#fff4d7;animation:vn-scene-entry-fade var(--vn-scene-transition-duration,.7s) ease-out both; }
.vn-scene-transition.is-exit-fade-dark { background:#080710;animation:vn-scene-exit-fade var(--vn-scene-transition-duration,.7s) ease-in both; }
.vn-scene-transition.is-exit-fade-light { background:#fff4d7;animation:vn-scene-exit-fade var(--vn-scene-transition-duration,.7s) ease-in both; }
.is-preview-locked .vn-dialogue,.is-preview-locked .vn-options { pointer-events:none; }
.is-preview-locked .vn-hint { color:rgba(238,206,147,.72); }
.is-stage-editing .vn-stage-layers { z-index:45; }
.is-stage-editing .vn-dialogue { opacity:.38;pointer-events:none;transition:opacity .2s ease; }
.is-stage-editing .vn-stage-element { border:1px dashed transparent;border-radius:.6rem;pointer-events:auto;cursor:grab;touch-action:none; }
.is-stage-camera-preview .vn-stage-element { pointer-events:none!important; }
.is-stage-editing .vn-stage-element:hover { border-color:rgba(225,188,119,.48);background:rgba(22,18,30,.12); }
.is-stage-editing .vn-stage-element.is-selected { z-index:10000!important;border-color:#e1b96f;box-shadow:0 0 0 3px rgba(207,162,90,.2); }
.is-stage-editing .vn-stage-element.is-motion-pose { border-style:dashed; }
.is-stage-editing .vn-stage-element.is-motion-from { border-color:#68c9ff;box-shadow:0 0 0 3px rgba(104,201,255,.16); }
.is-stage-editing .vn-stage-element.is-motion-to { border-color:#f0b862;box-shadow:0 0 0 3px rgba(240,184,98,.16); }
.is-stage-editing .vn-stage-element.is-motion-ghost { z-index:9999!important;opacity:.28!important;filter:saturate(.7) drop-shadow(0 0 16px rgba(0,0,0,.38));cursor:default;pointer-events:none; }
.vn-stage-motion-pose-label { position:absolute;z-index:8;top:-1.7rem;left:50%;padding:.24rem .48rem;border:1px solid currentColor;border-radius:999px;font-family:Inter,"Noto Sans KR",sans-serif;font-size:.58rem;font-weight:700;white-space:nowrap;transform:translateX(-50%);pointer-events:none; }
.is-motion-from>.vn-stage-motion-pose-label { color:#a6e1ff;background:rgba(14,42,58,.9); }
.is-motion-to>.vn-stage-motion-pose-label { color:#ffd394;background:rgba(57,38,15,.9); }
.vn-stage-element-label { position:absolute;top:calc(100% + .25rem);left:50%;max-width:90%;overflow:hidden;padding:.22rem .48rem;border:1px solid rgba(232,198,132,.28);border-radius:999px;color:#f2dfb8;background:rgba(22,18,30,.86);font-family:Inter,"Noto Sans KR",sans-serif;font-size:.6rem;text-overflow:ellipsis;white-space:nowrap;transform:translateX(-50%); }
.vn-stage-resize { position:absolute;width:16px;height:16px;border:2px solid #2a2130;border-radius:50%;background:#e1b96f;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:nwse-resize; }
.vn-stage-resize.is-top-left { top:3px;left:3px; }
.vn-stage-resize.is-bottom-right { right:3px;bottom:3px; }
.vn-stage-rotate,.vn-stage-flip { position:absolute;z-index:3;display:grid;width:24px;height:24px;place-items:center;border:1px solid #2a2130;border-radius:50%;color:#2a2130;background:#e1b96f;box-shadow:0 2px 8px rgba(0,0,0,.4);font-family:Arial,sans-serif;font-size:.8rem;font-style:normal;pointer-events:auto; }
.vn-stage-rotate { top:3px;right:3px;cursor:crosshair; }
.vn-stage-flip.is-horizontal { top:3px;left:50%;cursor:pointer;transform:translateX(-50%); }
.vn-stage-flip.is-vertical { top:50%;left:3px;cursor:pointer;transform:translateY(-50%); }
.vn-stage-text-width { position:absolute;z-index:4;top:50%;width:11px;height:44px;border:1px solid #2a2130;border-radius:999px;background:#e1b96f;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:ew-resize;transform:translateY(-50%); }
.vn-stage-text-width.is-left { left:-6px; }
.vn-stage-text-width.is-right { right:-6px; }

.vn-entrance-fade { animation:vn-element-fade var(--vn-effect-duration,.6s) ease both; }
.vn-entrance-slide-left { animation:vn-element-slide-left var(--vn-effect-duration,.6s) ease both; }
.vn-entrance-slide-right { animation:vn-element-slide-right var(--vn-effect-duration,.6s) ease both; }
.vn-entrance-slide-up { animation:vn-element-slide-up var(--vn-effect-duration,.6s) ease both; }
.vn-entrance-slide-down { animation:vn-element-slide-down var(--vn-effect-duration,.6s) ease both; }
.vn-emphasis-shake { animation:vn-element-shake var(--vn-effect-duration,.45s) ease both; }
.vn-emphasis-zoom { animation:vn-element-zoom var(--vn-effect-duration,.45s) ease both; }
.vn-emphasis-brighten { animation:vn-element-brighten var(--vn-effect-duration,.45s) ease both; }
.vn-ambient-float { animation:vn-element-float var(--vn-effect-duration,2.8s) ease-in-out infinite; }
.vn-ambient-blink { animation:vn-element-blink var(--vn-effect-duration,2.8s) ease-in-out infinite; }
.vn-ambient-rotate { animation:vn-element-rotate var(--vn-effect-duration,2.8s) linear infinite; }
.vn-exit-fade { animation:vn-element-exit-fade var(--vn-effect-duration,.6s) ease both; }
.vn-exit-slide-left { animation:vn-element-exit-slide-left var(--vn-effect-duration,.6s) ease both; }
.vn-exit-slide-right { animation:vn-element-exit-slide-right var(--vn-effect-duration,.6s) ease both; }
.vn-exit-slide-up { animation:vn-element-exit-slide-up var(--vn-effect-duration,.6s) ease both; }
.vn-exit-slide-down { animation:vn-element-exit-slide-down var(--vn-effect-duration,.6s) ease both; }
.vn-exit-zoom { animation:vn-element-exit-zoom var(--vn-effect-duration,.6s) ease both; }

@keyframes vn-element-fade { from{opacity:0}to{opacity:1} }
@keyframes vn-scene-entry-fade { from{opacity:1}to{opacity:0} }
@keyframes vn-scene-exit-fade { from{opacity:0}to{opacity:1} }
@keyframes vn-element-slide-left { from{opacity:0;transform:translateX(-45%)}to{opacity:1;transform:translateX(0)} }
@keyframes vn-element-slide-right { from{opacity:0;transform:translateX(45%)}to{opacity:1;transform:translateX(0)} }
@keyframes vn-element-slide-up { from{opacity:0;transform:translateY(35%)}to{opacity:1;transform:translateY(0)} }
@keyframes vn-element-slide-down { from{opacity:0;transform:translateY(-35%)}to{opacity:1;transform:translateY(0)} }
@keyframes vn-element-shake { 0%,100%{transform:translateX(0)}20%{transform:translateX(var(--vn-shake-negative,-7px))}40%{transform:translateX(var(--vn-shake-positive,7px))}60%{transform:translateX(var(--vn-shake-soft-negative,-4px))}80%{transform:translateX(var(--vn-shake-soft-positive,4px))} }
@keyframes vn-element-zoom { 0%,100%{transform:scale(1)}50%{transform:scale(var(--vn-zoom-scale,1.08))} }
@keyframes vn-element-brighten { 0%,100%{filter:brightness(1)}50%{filter:brightness(var(--vn-brightness,1.55)) drop-shadow(0 0 24px rgba(255,229,164,.62))} }
@keyframes vn-element-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }
@keyframes vn-element-blink { 0%,100%{opacity:1}50%{opacity:.38} }
@keyframes vn-element-rotate { to{transform:rotate(360deg)} }
@keyframes vn-element-exit-fade { from{opacity:1}to{opacity:0} }
@keyframes vn-element-exit-slide-left { from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-45%)} }
@keyframes vn-element-exit-slide-right { from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(45%)} }
@keyframes vn-element-exit-slide-up { from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-35%)} }
@keyframes vn-element-exit-slide-down { from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(35%)} }
@keyframes vn-element-exit-zoom { from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.65)} }

.vn-dialogue { position: absolute; z-index: 20; right: 2.2rem; bottom: 1.7rem; left: 2.2rem; min-height: 126px; padding: 1.65rem 1.65rem 1.4rem; border: 1px solid rgba(236,207,150,.28); border-radius: 1.1rem .2rem 1.1rem .2rem; background: linear-gradient(145deg,rgba(40,31,49,.93),rgba(16,17,29,.96)); box-shadow: 0 18px 48px rgba(0,0,0,.38); cursor: pointer; }
.vn-speaker { position: absolute; top: -16px; left: 1.2rem; min-width: 105px; padding: .38rem .9rem; border: 1px solid rgba(236,207,150,.28); border-radius: 999px; color: #fff0c8; background: #5d4566; text-align: center; }
.vn-speaker.is-narrator { background: #292737; }
.vn-text { margin: 0; color: #f7ecd4; white-space: pre-line; font-size: 1rem; line-height: 1.75; }
.vn-text-visible { display:block; }
.vn-type-token { display:inline-block; }
.vn-type-char { visibility:hidden; }
.vn-type-char.is-visible { visibility:visible; }
.vn-hint { position: absolute; right: 1rem; bottom: .65rem; color: rgba(233,214,177,.5); font-size: .68rem; }

.is-cinematic-narration .vn-title { visibility: hidden; }
.is-cinematic-narration .vn-progress,
.is-cinematic-narration .vn-chapter { display: none; }
.is-cinematic-narration .vn-speaker { display: none; }
.is-cinematic-narration .vn-dialogue {
  top: 50%;
  right: 9%;
  bottom: auto;
  left: 9%;
  min-height: 0;
  padding: 2.5rem 3rem 3rem;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at center,rgba(8,9,18,.58),rgba(8,9,18,0) 74%);
  box-shadow: none;
  transform: translateY(-50%);
}
.is-cinematic-narration .vn-text {
  margin: auto;
  width: min(100%,34ic);
  max-width: 34ic;
  color: #fff4dc;
  font-size: clamp(1.15rem,2vw,1.75rem);
  line-height: 1.9;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.95),0 0 26px rgba(0,0,0,.82);
  overflow-wrap:break-word;
  word-break:keep-all;
  text-wrap: balance;
}
.is-cinematic-narration .vn-hint { right: 50%; bottom: .45rem; transform: translateX(50%); white-space: nowrap; }
.is-cinematic-narration.is-stage-editing .vn-dialogue { opacity: .78; }

.vn-options { position: absolute; z-index: 25; right: 5%; bottom: 176px; display: grid; width: min(620px,90%); gap: .55rem; }
.vn-options[hidden] { display: none; }
.vn-options button { display: grid; min-height: 50px; grid-template-columns: 30px 1fr; gap: .7rem; align-items: center; padding: .55rem .75rem; border: 1px solid rgba(235,207,153,.28); border-radius: .85rem; color: #f5e8cc; background: rgba(28,27,42,.94); text-align: left; cursor: pointer; }
.vn-options button:hover { border-color:#e7be6e; background:rgba(78,58,82,.96); transform:translateY(-1px); }
.vn-options button > span { display:grid; width:26px; height:26px; place-items:center; border:1px solid rgba(235,207,153,.35); border-radius:50%; color:#e7be6e; }
.vn-options button.is-wrong { border-color:rgba(218,92,92,.72); color:#e7a5a5; background:rgba(94,35,48,.82); opacity:.82; cursor:default; transform:none; }

.vn-complete,
.vn-log-layer { position: absolute; z-index: 80; inset: 0; }
.vn-complete[hidden],.vn-log-layer[hidden]{display:none}
.vn-complete { display:grid; place-items:center; padding:1rem; background:rgba(6,7,13,.82); backdrop-filter:blur(10px); }
.vn-complete > div { width:min(480px,100%); padding:2.4rem 2rem; border:1px solid rgba(235,207,153,.28); border-radius:1.5rem; background:linear-gradient(145deg,#46334e,#171824); text-align:center; }
.vn-complete span { font-size:2rem; color:#e7be6e; }.vn-complete small{display:block;margin-top:.6rem;color:#d3b36e;letter-spacing:.14em}.vn-complete h2{font-weight:500}.vn-complete button{padding:.65rem 1rem;border:0;border-radius:999px;background:#e7be6e;color:#271d27;cursor:pointer}
.vn-log-layer { display:flex; justify-content:flex-end; background:rgba(5,5,12,.6); }
.vn-log-panel { width:min(430px,92%); height:100%; padding:1.25rem; overflow-y:auto; border-left:1px solid rgba(235,207,153,.25); background:#151320; box-shadow:-24px 0 60px rgba(0,0,0,.44); }
.vn-log-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.vn-log-panel header strong{color:#f3d89e}.vn-log-panel header button{border:0;color:#ded1bd;background:transparent;cursor:pointer}
.vn-log-list article{padding:.8rem 0;border-bottom:1px solid rgba(235,207,153,.12)}.vn-log-list small{display:block;margin-bottom:.25rem;color:#cba960}.vn-log-list p{margin:0;color:#e9dfd2;white-space:pre-line;line-height:1.65}

.vn-shortform-safe-guides { display:none;position:absolute;z-index:19;inset:0;overflow:hidden;border:1px solid rgba(235,190,103,.45);pointer-events:none; }
.vn-shortform-safe-guides span { position:absolute;display:grid;place-items:center;border:1px dashed rgba(235,190,103,.5);color:rgba(255,229,179,.8);background:rgba(49,35,25,.16);font-family:Inter,"Noto Sans KR",sans-serif;font-size:.55rem;letter-spacing:.05em; }
.vn-shortform-safe-guides .is-title { top:0;right:0;left:0;height:12%;align-items:end;padding-bottom:.3rem; }
.vn-shortform-safe-guides .is-actions { top:12%;right:0;bottom:20%;width:14%;writing-mode:vertical-rl; }
.vn-shortform-safe-guides .is-caption { right:0;bottom:0;left:0;height:20%;align-items:start;padding-top:.3rem; }
.is-shortform.is-stage-editing .vn-shortform-safe-guides { display:block; }

.is-shortform .vn-topbar { grid-template-columns:minmax(0,1fr) auto;gap:.45rem;padding:.75rem; }
.is-shortform .vn-title { padding-right:3rem; }
.is-shortform .vn-title strong { font-size:.88rem; }
.is-shortform .vn-more { position:absolute;z-index:60;top:.7rem;right:.7rem; }
.is-shortform .vn-more summary { min-width:34px;min-height:30px;padding:.25rem .48rem;font-size:.67rem; }
.is-shortform .vn-more-panel { position:absolute;z-index:59;top:calc(100% + .45rem);right:0;width:min(290px,calc(100vw - 1.4rem));max-height:min(600px,calc(100dvh - 4rem)); }
.is-shortform .vn-progress { top:58px;right:.75rem;left:.75rem; }
.is-shortform .vn-chapter { top:70px;left:.8rem;font-size:.66rem; }
.is-shortform .vn-stage-element.is-character { width:58%;height:58%; }
.is-shortform .vn-stage-element.is-object.is-illustration { width:72%;height:48%; }
.is-shortform .vn-stage-element.is-text { width:var(--vn-text-mobile-width,var(--vn-text-width,56%)); }
.is-shortform .vn-constellation { top:25%;right:2%;width:62%; }
.is-shortform .vn-dialogue { right:.6rem;bottom:.6rem;left:.6rem;min-height:176px;padding:1.4rem 1rem 1.7rem; }
.is-shortform .vn-text { font-size:.9rem;line-height:1.7; }
.is-shortform .vn-hint { font-size:.61rem; }
.is-shortform.is-cinematic-narration .vn-dialogue { top:54%;right:4%;bottom:auto;left:4%;min-height:0;padding:1.5rem .8rem 2.5rem; }
.is-shortform.is-cinematic-narration .vn-text { width:min(100%,22ic);max-width:22ic;font-size:clamp(1rem,5.2vw,1.3rem);line-height:1.75; }
.is-shortform .vn-options { right:.6rem;bottom:197px;width:calc(100% - 1.2rem);gap:.4rem; }
.is-shortform .vn-options button { min-height:45px;padding:.45rem .6rem;font-size:.84rem; }

@keyframes vn-star-drift { to { transform: translate3d(-7%,6%,0) rotate(.001deg); } }

@media (max-width: 900px) {
  .vn-title { padding-right: 3rem; }
  .vn-more {
    position: fixed;
    z-index: 60;
    top: max(.65rem, env(safe-area-inset-top));
    right: max(.65rem, env(safe-area-inset-right));
  }
  .vn-more-panel {
    position: fixed;
    z-index: 59;
    top: max(3.35rem, calc(env(safe-area-inset-top) + 3.15rem));
    right: max(.65rem, env(safe-area-inset-right));
    width: min(290px, calc(100vw - 1.3rem));
    max-height: calc(100dvh - 4.15rem - env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .vn-layout-toolbar { display:grid;gap:.35rem; }
  .vn-layout-toolbar>div { display:none; }
  .vn-layout-toolbar nav { display:grid;grid-template-columns:1fr 1fr; }
  .vn-layout-toolbar button { min-width:0;padding:.38rem .35rem;font-size:.58rem; }
  .vn-standalone-body #player-root { min-height:calc(100dvh - 54px);padding:0; }
  .vn-log-panel { width:100%; border-left:0; }
}

@media (prefers-reduced-motion: reduce) {
  .vn-stage::before { animation: none; }
  .vn-progress span,.vn-stage { transition: none; }
  .vn-stage-exit,.vn-stage-entrance,.vn-stage-emphasis,.vn-stage-ambient { animation:none!important; }
}