@import './vendor/canonical/style.css';
:root {color-scheme:light;--launcher-sky:#8adef3;--launcher-scene:radial-gradient(circle at -3% 55%,transparent 0 24%,#ffffff50 24% 24.2%,#ffffff13 24.2% 28%,#ffffff0b 28% 34%,transparent 34%),radial-gradient(circle at 103% 94%,transparent 0 30%,#ffffff50 30% 30.2%,#ffffff13 30.2% 34%,#ffffff0b 34% 40%,transparent 40%),radial-gradient(ellipse at 50% 15%,#e8fbff 0,#b1eafa 36%,#76cee9 75%,#58b9e1);font-family:ui-rounded,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--danu-ink);background:var(--launcher-sky);}
*{box-sizing:border-box}html,body{margin:0;width:100vw;height:100%;min-height:100vh;min-height:100dvh;overflow:hidden}
html,body,#viewport{color:var(--danu-ink);background-color:var(--launcher-sky)}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background-image:var(--launcher-scene);}
button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button .ui-icon{flex:none}
/* Stretch between viewport edges even while Safari is updating dynamic viewport units. */
#viewport{position:fixed;inset:0;width:100vw;min-height:100vh;min-height:100dvh;isolation:isolate}
#scenery{position:absolute;inset:0;z-index:0;pointer-events:none;background-color:var(--launcher-sky);background-image:var(--launcher-scene);background-repeat:no-repeat}
/* Only content is centered/scaled. Scenery covers safe areas and all letterboxing. */
#content{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}
#frame{position:relative;width:1280px;height:790px;isolation:isolate;background:none;color:var(--danu-ink)}
/* Loader, PIN, Home and loading errors sit over the full-screen scene. */
#frame[data-view],#loader,#gate,#home,#error{color:var(--danu-ink)}
/* Every modal kind (Options, Guardian, Exit and validation messages) uses shared material. */
#dialog{color:var(--danu-ink);background:transparent}
input,select,textarea{color-scheme:light;color:var(--danu-ink);background-color:#fff6e5;accent-color:var(--danu-accent)}
/* Only launcher composition and semantic role mapping; all material stays upstream. */
.ui-icon{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;vertical-align:middle}.ui-icon svg{width:100%;height:100%}
.danu-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:inherit}
.brand-lockup{position:absolute;z-index:2;left:50%;top:20px;width:650px;height:470px;transform:translateX(-50%);pointer-events:none;transition:all .3s ease}
.brand-lockup img{position:absolute;object-fit:contain}.brand-danu{z-index:1;width:400px;height:400px;top:-62px;left:205px}.brand-logo{z-index:2;width:600px;height:338px;left:25px;bottom:0}
#frame[data-view=gate] .brand-lockup{left:35px;top:122px;width:600px;height:430px;transform:none}
#frame[data-view=gate] .brand-danu{width:360px;height:360px;left:187px;top:-45px}
#frame[data-view=gate] .brand-logo{width:560px;height:316px;left:10px;bottom:0}
#frame.ready .brand-lockup{left:30px;top:0;width:390px;height:195px;transform:none}
#frame.ready .brand-danu{width:177px;height:177px;left:217px;top:-22px}
#frame.ready .brand-logo{width:340px;height:192px;left:0;bottom:-1px}
.center-panel{position:absolute;left:50%;top:510px;width:660px;transform:translateX(-50%);text-align:center}
.center-panel h1{font-size:32px;font-weight:900;margin:0 0 12px}.panel-help{font-size:20px;margin:0 0 22px;font-weight:700;color:#386781}
#gate{left:auto;right:64px;top:110px;width:470px;transform:none}
#pin-form{display:grid;justify-items:center}.pin-dots{display:flex;justify-content:center;gap:20px;margin:0 auto 28px}
.pin-dots i{width:26px;height:26px;border-radius:50%;background:var(--danu-panel-face);box-shadow:var(--danu-raised-shadow);--danu-depth:var(--danu-secondary-depth);border:2px solid var(--danu-highlight)}
.pin-dots i.filled{background:var(--danu-progress-face);--danu-depth:var(--danu-progress-depth)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;width:390px}.pin-keypad button{height:84px;font-size:32px}.pin-keypad button[data-key=clear]{font-size:21px}
#pin-error,.pin-message{min-height:28px;color:#98394b;font-size:19px;font-weight:750;margin:18px 0 0}
.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}
.loader-kicker{font-size:28px;font-weight:900;margin:0 0 24px}
#progress{width:580px;height:36px;margin:auto;padding:5px;border:3px solid white;border-radius:30px;background:#5ab1d5;box-shadow:0 6px 0 #3986af,0 12px 20px #276b9a30;overflow:hidden}
#progress-fill{height:100%;width:0;border-radius:24px;background:repeating-linear-gradient(115deg,#ffffffaa 0 9px,transparent 9px 22px),var(--danu-progress-face);background-size:80px 100%,100% 100%;animation:stripes 1s linear infinite;transition:width .2s}
@keyframes stripes{to{background-position:80px 0,0 0}}#phase{font-size:21px;font-weight:700;color:#386781;margin-top:22px}
#home header{height:196px;display:flex;justify-content:flex-end;padding:46px 42px 0}nav{display:flex;gap:18px}nav button{min-width:142px;height:70px}
.home-intro{text-align:center;height:112px}.eyebrow{font-size:16px;letter-spacing:.12em;font-weight:800;color:#3a7692}.home-intro h1{font-size:36px;line-height:1.2;margin:6px 0;color:#173f61}.home-intro p{font-size:19px;color:#3c718c;margin:6px 0}
#page-area{height:415px;display:grid;grid-template-columns:76px 1fr 76px;align-items:center;gap:16px;padding:0 38px}
.page-arrow{width:70px;height:85px;padding:12px}.page-arrow .ui-icon{width:38px;height:38px}
#cards{height:100%;min-width:0;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:18px;touch-action:pan-y}
#cards.featured{grid-template-columns:repeat(2,minmax(0,390px));grid-template-rows:1fr;gap:34px;justify-content:center}
.card{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;min-width:0;min-height:0;padding:10px;text-align:left;white-space:normal}
.card:nth-child(2n){--danu-face:var(--danu-progress-face);--danu-depth:var(--danu-progress-depth)}
.card-art{width:100%;min-height:0;flex:1;overflow:hidden;border-radius:18px;background:#ffffff80}.card-art>img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.card-copy{padding:8px 4px 5px}.card strong{display:block;font-size:20px;line-height:1.2;margin-bottom:5px}.card-copy>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;font-weight:700;line-height:1.35;color:#194960}
.card-play{display:none;align-items:center;justify-content:space-between;align-self:stretch;font-size:20px;padding:2px 8px 4px}
.featured .card{padding:16px;border-radius:34px}.featured .card-art{border-radius:23px}.featured .card-copy{padding:16px 8px 9px}.featured .card strong{font-size:29px}.featured .card-copy>span{font-size:18px;max-width:290px}.featured .card-play{display:flex}
.favorite-badge{position:absolute;right:22px;top:22px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--danu-primary-face);box-shadow:var(--danu-raised-shadow);--danu-depth:var(--danu-primary-depth);color:var(--danu-primary-text)}
#page-indicator{height:65px;display:flex;align-items:center;justify-content:center;gap:12px}#page-indicator i{width:12px;height:12px;border-radius:12px;background:#ffffff99;box-shadow:0 3px #4f9ec0}#page-indicator i.active{width:34px;background:var(--danu-progress-face);box-shadow:0 3px var(--danu-progress-depth)}
#dialog-backdrop{position:absolute;z-index:10;inset:0;display:grid;place-items:center;background:#163f6170;border-radius:42px}
#dialog{width:620px;max-height:748px;padding:28px 34px;overflow:auto}#dialog h2{background:none;box-shadow:none;color:var(--danu-ink);font-size:32px;text-align:center;margin:0 0 16px;padding:0}
#dialog .dialog-help{font-size:19px;color:#46637a;margin:0 0 24px}.setting-hint{font-size:16px!important;color:#577388;margin:10px 0!important}
#dialog>h3{margin-top:24px}.actions{display:flex;justify-content:center;gap:20px;margin-top:26px}.actions .danu-button{min-width:180px;min-height:68px}
.guardian-form .pin-keypad{margin:auto;gap:12px}.guardian-form .pin-keypad button{height:68px}.guardian-form .pin-dots{margin-bottom:24px}.guardian-form+.danu-button{margin-top:20px}
.exit-hero{display:grid;place-items:center;margin:24px auto;width:120px;height:120px;border-radius:40px;background:var(--danu-secondary-face);box-shadow:var(--danu-raised-shadow)}.exit-hero .ui-icon{width:65px;height:65px}
#frame.compact nav button{height:96px;font-size:25px;min-width:172px}#frame.compact .page-arrow{min-width:96px;height:100px}#frame.compact #page-area{grid-template-columns:100px 1fr 100px;padding:0 24px;gap:10px}
#frame.compact #gate{top:46px;right:48px;width:480px}#frame.compact .pin-keypad{width:450px;gap:12px}#frame.compact .pin-keypad button{height:98px}#frame.compact .panel-help{margin-bottom:16px}#frame.compact .pin-dots{margin-bottom:20px}
#frame.compact #dialog{max-height:766px;padding:18px 28px}
#frame.compact .guardian-form .pin-keypad{grid-template-columns:repeat(6,1fr);width:100%;gap:14px}#frame.compact #dialog[data-kind^=guardian]{width:1080px}#frame.compact .guardian-form+.danu-button{min-height:96px}
#frame[data-orientation=portrait] .brand-lockup{top:50px}
#frame[data-orientation=portrait][data-view=gate] .brand-lockup{left:50%;top:-10px;width:540px;height:345px;transform:translateX(-50%)}
#frame[data-orientation=portrait][data-view=gate] .brand-danu{width:300px;height:300px;left:180px;top:-40px}
#frame[data-orientation=portrait][data-view=gate] .brand-logo{width:500px;height:281px;left:0;bottom:0}
#frame[data-orientation=portrait] #gate{top:365px;right:auto;left:50%;transform:translateX(-50%);width:650px}
#frame[data-orientation=portrait] .pin-keypad{width:530px;gap:18px}#frame[data-orientation=portrait] .pin-keypad button{height:106px;font-size:37px}
#frame[data-orientation=portrait].ready .brand-lockup{top:0;left:190px;width:390px;height:195px;transform:none}
#frame[data-orientation=portrait] #home header{height:290px;padding:196px 54px 0;justify-content:center}#frame[data-orientation=portrait] nav{width:100%;justify-content:space-between}#frame[data-orientation=portrait] nav button{height:88px;min-width:200px}
#frame[data-orientation=portrait] .home-intro{height:134px;padding-top:20px}#frame[data-orientation=portrait] #page-area{height:565px;padding:0 16px;grid-template-columns:68px 1fr 68px;gap:12px}#frame[data-orientation=portrait] .page-arrow{width:66px;height:100px}
#frame[data-orientation=portrait] #cards.featured{gap:20px;grid-template-columns:1fr 1fr}#frame[data-orientation=portrait] .featured .card{padding:12px}#frame[data-orientation=portrait] .featured .card-art{flex:none;height:58%}#frame[data-orientation=portrait] .featured .card strong{font-size:28px}#frame[data-orientation=portrait] .featured .card-copy>span{font-size:20px}#frame[data-orientation=portrait] .card-play{margin-top:auto}
#frame[data-orientation=portrait] #dialog{width:700px;max-height:1060px}#frame[data-orientation=portrait] .danu-button{min-height:80px}
#frame[data-orientation=portrait] .guardian-form .pin-keypad{width:530px}#frame[data-orientation=portrait] #loader{top:620px}
[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep scenery behind interactive layers and constrain intrinsic art to its slot. */
#viewport{z-index:1}
#cards{min-height:0}
#cards.featured{grid-template-rows:minmax(0,1fr)}
.card-art{position:relative}
.card-art>img{position:absolute;inset:0}
#dialog-backdrop{border-radius:0;box-shadow:0 0 0 100vmax #163f6170}
/* Launcher composition only; all controls and panel surfaces are shared R3 assets. */
#dialog{border:0;box-shadow:none;border-radius:0;padding:48px 38px 40px}
#dialog .danu-panel-structure,#dialog .danu-panel-lighting{position:absolute}
#dialog .danu-title-zone{margin:0 auto 12px}
.card{height:auto}
.card-art>img{object-fit:cover}
#dialog .danu-product-version{font-size:17px;margin-top:18px}

.card{color:var(--danu-ink)}

/* Shared panels remain unscaled, bounded objects with scrollable content. */
#dialog-backdrop{position:fixed;inset:0;width:100vw;height:100dvh;z-index:20;box-shadow:none;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#dialog,#dialog[data-kind]{width:min(440px,calc(100vw - 24px));min-width:0;max-height:none;padding:44px 32px 36px;overflow:visible}
.launcher-modal-content{max-height:calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;padding:0 4px 4px}
#dialog h2{font-size:26px}
#dialog .dialog-help{font-size:16px;margin-bottom:18px}
#dialog .pin-keypad{width:100%;gap:12px}
#dialog .pin-keypad button{height:64px;font-size:26px}
#dialog .pin-dots{gap:14px;margin-bottom:18px}
#dialog .pin-dots i{width:20px;height:20px}
#dialog .actions{gap:10px}
#dialog .actions .danu-button{font-size:17px;padding:8px 12px}
.featured .card{padding:24px 24px 30px}
.featured .card-copy{padding:14px 4px 6px}
#frame[data-orientation=portrait] .featured .card{padding:20px 18px 28px}