@import url('./shared/app-room.css');
.flow-rank-open[hidden]{display:none!important}
.flow-standalone-app #intro:not([hidden]){display:block!important;overflow-y:auto}
.flow-standalone-app #flowPanel{margin:12px auto 78px!important}
.flow-standalone-app:not(.run-active):not(.time-intro) .hud,.flow-standalone-app:not(.run-active):not(.time-intro) #hint{display:none!important}
.flow-standalone-app #flowPanel .flow-download-badge{right:64px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow-prepare-header>span{visibility:hidden}
.flow-standalone-app #intro{padding:max(72px,calc(env(safe-area-inset-top) + 62px)) 12px calc(22px + env(safe-area-inset-bottom))}
.flow-standalone-app #flowPanel{width:min(560px,100%)}
.flow-standalone-app #flowPanel .flow-wordmark,.flow-standalone-app #flowPanel>h1,.flow-standalone-app #flowPanel>.lead{display:none}
.flow-standalone-app #flowPanel .flow-season-head{justify-content:space-between;width:min(430px,calc(100vw - 38px));margin-bottom:8px}
.flow-standalone-app #flowPanel .flow-season-head span{display:block}
.flow-standalone-app #flowPanel .flow-season-switcher{margin-bottom:10px}
.flow-standalone-app #flowPanel .flow-carousel{width:min(620px,100vw);height:clamp(290px,39vh,356px);margin-inline:calc((min(620px,100vw) - min(560px,100vw - 24px)) / -2)}
.flow-standalone-app #flowPanel .flow-track-rail{overflow:hidden;touch-action:none;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.flow-standalone-app #flowPanel .flow-track-card{width:min(82vw,390px);height:calc(100% - 10px);max-height:346px;padding:19px 20px 17px;border-radius:28px;background:linear-gradient(145deg,rgba(34,42,73,.84),rgba(11,15,30,.9) 55%,rgba(15,18,35,.94));box-shadow:0 28px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.06)}
.flow-standalone-app #flowPanel .flow-track-card{transition:transform 260ms cubic-bezier(.2,.75,.15,1),opacity 220ms ease,border-color 220ms ease;contain:layout paint style;backface-visibility:hidden;will-change:transform,opacity}
.flow-standalone-app #flowPanel .flow-track-rail.dragging .flow-track-card{transition:none}
.flow-standalone-app #flowPanel .flow-track-rail.season-handoff .flow-track-card{animation:flowSeasonHandoff .34s cubic-bezier(.18,.78,.2,1) both}
.flow-standalone-app #flowPanel .flow-track-card.active{border-color:rgba(242,239,230,.36)}
.flow-standalone-app #flowPanel .flow-track-cover{top:47px;width:132px;height:132px;border-radius:22px}
.flow-standalone-app #flowPanel .flow-track-copy{left:20px;right:20px;bottom:22px}
.flow-standalone-app #flowPanel .flow-track-copy h2{font-size:23px}
.flow-standalone-app #flowPanel .flow-track-copy small,.flow-standalone-app #flowPanel .flow-track-copy p,.flow-standalone-app #flowPanel .flow-track-meta{font-size:8px}
.flow-standalone-app #flowPanel .flow-track-hint{display:none}
.flow-download-badge{position:absolute;z-index:4;top:18px;right:18px;padding:5px 8px;border:1px solid rgba(217,188,122,.34);border-radius:999px;background:rgba(5,9,20,.72);color:#e7cc8f;font:600 8px/1 system-ui;letter-spacing:.08em}.flow-download-badge[data-status="downloaded"]{border-color:rgba(135,206,201,.34);color:#a8ded7}.flow-download-badge[data-status="download"]{color:rgba(242,239,230,.68)}
.flow-standalone-app #flowPanel .auto-journey{display:none}
.flow-selection-dock{position:relative;z-index:4;width:min(390px,calc(100% - 24px));margin:8px auto 0}.flow-settings-summary{display:flex;width:100%;min-height:43px;padding:0 16px;align-items:center;justify-content:space-between;border:1px solid rgba(242,239,230,.13);border-radius:14px;background:rgba(11,15,29,.78);color:#f2efe6;font-size:10px;letter-spacing:.1em}.flow-settings-summary span{color:rgba(242,239,230,.55)}.flow-settings-summary strong{font-weight:550}.flow-settings-summary i{color:rgba(242,239,230,.4);font:normal 18px/1 system-ui}.flow-standalone-app #flowPanel .enter{display:grid;width:100%;height:54px;margin-top:9px!important;border-radius:16px;transition:border-color .2s,box-shadow .2s,transform .2s}.flow-standalone-app #flowPanel .enter::before,.flow-standalone-app #flowPanel .enter::after{display:none}.flow-standalone-app #flowPanel .enter span{font-size:15px}.flow-standalone-app #flowPanel .enter small{font-size:8px}
.flow-standalone-app #flowPanel .enter:active{transform:scale(.96)}
.flow-standalone-app:not(.tae-playing):not(.tae-paused) .corner{display:none!important}

.flow-launch-stage[hidden]{display:none!important}
.flow-launch-stage{position:fixed;z-index:80;inset:0;overflow:auto;padding:0 20px max(28px,calc(env(safe-area-inset-bottom) + 18px));background:radial-gradient(circle at 50% 24%,rgba(67,101,133,.34),transparent 30%),radial-gradient(circle at 50% 42%,#101a31 0,#080d1e 48%,#030611 100%);color:#f2efe6}
.flow-launch-stage::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.42;background-image:radial-gradient(circle at 18% 20%,#e7faff 0 1px,transparent 1.5px),radial-gradient(circle at 78% 17%,#e8b44a 0 1px,transparent 1.7px),radial-gradient(circle at 65% 63%,#e7faff 0 1px,transparent 1.5px),radial-gradient(circle at 26% 72%,#d9d5ff 0 1px,transparent 1.6px);background-size:173px 211px,237px 197px,191px 229px,251px 181px}
.flow-prepare-header{position:relative;z-index:2;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;width:min(460px,100%);height:72px;margin:0 auto;padding-top:max(8px,env(safe-area-inset-top));text-align:center}
.flow-launch-back{display:grid;width:42px;height:42px;padding:0;place-items:center;border:1px solid rgba(242,239,230,.13);border-radius:50%;background:rgba(8,13,29,.6);color:rgba(242,239,230,.72);font-size:27px}
.flow-prepare-header small,.flow-prepare-header strong{display:block}.flow-prepare-header small{color:#d9bc7a;font-size:8px;letter-spacing:.24em}.flow-prepare-header strong{margin-top:4px;font:400 16px Georgia,'Noto Serif KR',serif;letter-spacing:.1em}.flow-prepare-header>span{color:rgba(242,239,230,.35)}
.flow-prepare-track{position:relative;z-index:2;width:min(390px,100%);height:300px;margin:18px auto 0;overflow:hidden;border:1px solid rgba(242,239,230,.25);border-radius:30px;background:#0d1325;box-shadow:0 28px 80px rgba(0,0,0,.36)}
.flow-prepare-track>img:first-child{position:absolute;inset:-14%;width:128%;height:128%;object-fit:cover;opacity:.32;filter:blur(20px) saturate(.8)}
.flow-prepare-track>div{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,24,.08),rgba(7,11,24,.8) 70%,#070b18)}
.flow-prepare-track>img:nth-of-type(2){position:absolute;top:38px;left:50%;width:132px;height:132px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.18);border-radius:22px;object-fit:cover;box-shadow:0 14px 44px rgba(0,0,0,.42)}
.flow-prepare-track section{position:absolute;left:22px;right:22px;bottom:20px;text-align:center}.flow-prepare-track small{color:#d9bc7a;font-size:8px;letter-spacing:.2em}.flow-prepare-track h2{margin:7px 0 2px;font:400 24px Georgia,'Noto Serif KR',serif}.flow-prepare-track p{margin:0;color:rgba(242,239,230,.62);font-size:9px;letter-spacing:.14em}.flow-prepare-track em{display:block;margin-top:7px;color:rgba(174,193,210,.64);font:normal 9px system-ui}
.flow-prepare-description{position:relative;z-index:2;width:min(390px,100%);margin:14px auto 12px;color:rgba(191,204,218,.68);font-size:11px;line-height:1.7;text-align:center}
.flow-launch-options{position:relative;z-index:2;width:min(390px,100%);margin:0 auto}.flow-launch-options .mode-select{display:grid!important;margin:0 0 10px!important}.flow-launch-options .speed-select{display:flex!important;margin:0!important}
.flow-prepare-play{position:relative;z-index:2;display:grid;width:120px;height:120px;margin:18px auto 0;padding:17px;place-items:center;border:1px solid rgba(217,188,122,.7);border-radius:50%;background:rgba(8,13,29,.78);color:#f2efe6;font:400 15px/1.45 Georgia,'Noto Serif KR',serif;letter-spacing:.04em;text-align:center;box-shadow:0 0 44px rgba(217,188,122,.1);transition:transform .18s,box-shadow .18s}.flow-prepare-play i{position:absolute;inset:10px;border:1px solid rgba(160,215,225,.16);border-radius:50%}.flow-prepare-play:active,.flow-prepare-play.is-launching{transform:scale(.94);box-shadow:0 0 64px rgba(217,188,122,.34)}.flow-prepare-play:disabled{cursor:progress;opacity:.78}
.flow-setup-open .tae-app-chrome{display:none}

@media(max-height:760px){.flow-standalone-app #flowPanel>h1,.flow-standalone-app #flowPanel>.lead{display:none}.flow-standalone-app #flowPanel .flow-carousel{height:288px}.flow-standalone-app #flowPanel .flow-track-cover{top:40px;width:118px;height:118px}.flow-selection-dock{margin-top:4px}.flow-standalone-app #flowPanel .enter{height:48px}.flow-prepare-track{height:248px;margin-top:7px}.flow-prepare-track>img:nth-of-type(2){top:25px;width:105px;height:105px}.flow-prepare-description{margin:9px auto 7px}.flow-prepare-play{width:96px;height:96px;margin-top:10px}}
@keyframes flowSeasonHandoff{from{opacity:0;filter:blur(4px)}to{filter:blur(0)}}
@media(max-width:420px){.flow-standalone-app #flowPanel .flow-carousel{width:calc(100% + 24px);margin-inline:-12px}.flow-standalone-app #flowPanel .flow-track-card{width:min(82vw,350px)}}
.flow-card-favorite{position:absolute;z-index:6;top:14px;right:14px;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#070b18a3;color:#f2efe68a;font-size:23px;line-height:1;pointer-events:auto;transition:color .2s,transform .2s,text-shadow .2s}.flow-card-favorite:active{transform:scale(.86)}.flow-card-favorite[aria-pressed="true"]{color:#e8c878;text-shadow:0 0 16px #e8b44a99}.tae-app-library-song{grid-template-columns:48px minmax(0,1fr) 28px 36px 52px!important;gap:7px!important}.tae-app-library-song .tae-app-library-favorite{color:#d9bc7a!important;font-size:18px!important}.tae-app-library-song .tae-app-library-favorite[aria-pressed="true"]{text-shadow:0 0 14px #d9bc7a88}.tae-app-library-seasons.is-muted{opacity:.34;pointer-events:none}.tae-app-language{margin:18px 0 4px;padding:14px;border:1px solid #f2efe617;border-radius:15px;background:#ffffff03}.tae-app-language>small{color:#d9bc7a;font-size:8px;letter-spacing:.16em}.tae-app-language>p{margin:7px 0 10px;font-size:8px}.tae-app-language>div{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.tae-app-language button{min-height:36px;border:1px solid #f2efe61c;border-radius:10px;background:transparent;color:#8e98aa;font-size:8px}.tae-app-language button.is-selected{border-color:#d9bc7a66;background:#d9bc7a0d;color:#e6cb91}
.flow-launch-options .mode-select{grid-template-columns:repeat(3,minmax(0,1fr))!important}.flow-launch-options .mode-option{font-size:10px;line-height:1.5}.flow-launch-options .mode-option b{font-size:11px;letter-spacing:0;white-space:nowrap}
.flow-prepare-header{box-sizing:border-box;height:auto;min-height:76px;padding: max(16px,env(safe-area-inset-top)) 0 16px;width:min(390px,100%)}
.flow-prepare-header small{display:none}
.flow-prepare-header strong{margin:0;line-height:1.4}
.flow-prepare-track{margin-top:12px}
.flow-prepare-track h2{word-break:keep-all;overflow-wrap:break-word;line-height:1.35;font-size:clamp(19px,5.4vw,24px)}
.flow-launch-options .mode-option{min-width:0;min-height:64px;padding:9px 5px;word-break:keep-all;overflow-wrap:break-word}
.flow-launch-options .mode-option b{white-space:normal;display:block;min-height:30px;line-height:1.3}
.flow-launch-options .speed-select{display:grid!important;grid-template-columns:1fr 100px;gap:8px;align-items:center;padding:14px 0!important;text-align:left}
.flow-launch-options .speed-select small{grid-column:1/-1;text-align:center}
.flow-launch-options .speed-select{grid-template-columns:1fr}
.flow-launch-options #speedSelect[hidden]{display:none!important}
.flow-speed-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%}
.flow-speed-choices button{min-width:0;min-height:46px;padding:8px 2px;border:1px solid #f2efe628;border-radius:12px;background:#ffffff04;color:#c2cbd6;font:500 13px/1.3 system-ui;touch-action:manipulation;transition:background .15s,border-color .15s}
.flow-speed-choices button[aria-pressed="true"]{border-color:#d9bc7ab0;background:#d9bc7a1c;color:#f4dfaa;box-shadow:inset 0 0 0 1px #d9bc7a36}
.flow-speed-choices button:focus-visible{outline:2px solid #9fdae2;outline-offset:2px}
.flow-prepare-play{box-sizing:border-box;width:min(390px,100%);height:auto;min-height:56px;margin:12px auto 0;padding:14px 18px;border-radius:18px;background:#f2eee5;color:#101521;font:600 16px/1.5 system-ui;letter-spacing:0;word-break:keep-all;overflow-wrap:break-word}
.flow-prepare-play i{display:none}
