@import url('../settings/cards.css');
@layer foundation, scene, controls, panels, responsive;
@layer foundation {
 *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#080f0c;color:#f5e5be;font-family:Georgia,'Times New Roman',serif}body{overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #ffe5a5;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}h1,h2,p{margin:0}small{font:11px/1.5 Arial,sans-serif;letter-spacing:.14em;color:#c7ae74}
}
@layer scene {
 #home{position:relative;height:100dvh;isolation:isolate;overflow:hidden;background:#080f0c}#scene{position:absolute;width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(#03100a38,transparent 24%,transparent 65%,#03100ae0)}
}
@layer controls {
 .round{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;padding:0;border:1px solid #c4a35c;border-radius:50%;background:radial-gradient(at 35% 0%,#3a5042,#0c1d16 70%);box-shadow:inset 0 1px #fff5,0 5px 18px #0007;font:23px/1 Arial,sans-serif}.round:hover{filter:brightness(1.2)}button:active{transform:translateY(1px)}#menu{position:absolute;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left))}.primary{
 position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
 display:flex;align-items:center;justify-content:center;width:min(264px,calc(100% - 64px));min-height:62px;
 padding:9px 52px;border:1px solid #e9c778;border-radius:999px;
 background:radial-gradient(ellipse at 50% 0%,#9fd8a424,transparent 74%),url('../../assets/refresh/buttons/green.webp') center/100% 100% no-repeat,#0c2b20;
 box-shadow:0 0 0 2px #342714,0 4px 0 2px #1b160d,0 10px 28px #000a;
 color:#ffedbf;font:700 27px/1.15 Georgia,serif;letter-spacing:.045em;text-shadow:0 2px 3px #000b;
}
.primary span{
 position:absolute;right:17px;display:grid;place-items:center;width:30px;height:30px;
 border-radius:50%;background:#142b20;color:#f5d990;border:1px solid #cba85e80;
 font:18px/1 Arial,sans-serif;box-shadow:inset 0 1px #ffffff24;
}
.primary:hover{filter:brightness(1.08)}.primary:focus-visible{outline:2px solid #ffecbc;outline-offset:4px}
.primary:active{transform:translate(-50%,3px);filter:brightness(.94);box-shadow:0 0 0 2px #342714,0 1px 0 2px #1b160d,0 5px 14px #0009}
.secondary{min-height:44px;padding:10px 16px;border:1px solid #a78e5766;border-radius:12px;background:linear-gradient(#223c2f,#11231b);font:14px/1.4 Arial,sans-serif}.secondary:hover{border-color:#d6b773}
}
@layer panels {
 dialog{color:#f5e5be;border:1px solid #a38a52;background:radial-gradient(at 0 0,#254536,#0b1913 70%);border-radius:22px;box-shadow:0 25px 90px #000a;padding:26px;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#020b08ad;backdrop-filter:blur(9px)}dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}h1{font-size:30px;letter-spacing:.12em;margin-top:6px}h2{font-size:25px;margin-top:6px}nav{display:grid;gap:9px}nav button,.mode{width:100%;min-height:54px;padding:14px 18px;border:1px solid #a38a5255;border-radius:13px;background:linear-gradient(110deg,#25473588,#0a1813);text-align:left;font-size:17px;box-shadow:inset 0 1px #ffffff12}nav button span{float:right;color:#d6b773}nav button:hover,.mode:hover{border-color:#d6b773;background-color:#264b39}#motion{margin-top:22px;width:100%}.mode{position:relative;display:grid;grid-template-columns:36px 1fr;gap:6px 16px;margin-top:12px;padding:22px 35px 22px 18px}.mode img{width:32px;grid-row:span 2;align-self:center}.mode small{font:12px/1.4 Arial,sans-serif;letter-spacing:0;color:#c0c7b8}.mode span{position:absolute;right:16px;top:30px;color:#d6b773}#destination{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr)}.return-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));background:#0a1912;border-bottom:1px solid #a38a5255}.return-bar span{font:12px Arial,sans-serif;color:#c7ae74}#mount{position:relative;min-height:0}iframe{width:100%;height:100%;border:0;display:block}#notice{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));padding:24px;border:1px solid #c4a35c;border-radius:18px;background:#10251c;box-shadow:0 20px 70px #000c}#notice p{margin-bottom:18px;font:16px/1.5 Arial,sans-serif}#notice button{margin:4px}
}
@layer responsive {
 #rotation{display:none}@media(orientation:landscape) and (pointer:coarse) and (max-width:1023px) and (max-height:500px){body>*{visibility:hidden;pointer-events:none}#rotation{display:grid;place-content:center;visibility:visible;position:fixed;inset:0;padding:32px;text-align:center;background:#0b2018;color:#ead098;font-size:22px;z-index:20}}
 @media(min-width:651px){#scene{height:calc(100% - 94px);object-fit:contain}.shade{bottom:94px;background:linear-gradient(#03100a18,transparent 25%,transparent 85%,#03100a44)}.primary{bottom:18px;min-height:60px}}
 #preferences[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:hidden}#preferences header,.tabs,.settings-footer{flex-shrink:0}#preferences header{margin-bottom:16px}#preference-fields{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#a68c53 #142b20;padding-right:6px}.settings-footer{border-top:1px solid #b89a5533}
 #navigation{position:fixed;inset:0 auto 0 0;margin:0;height:100dvh;max-height:100dvh;width:min(370px,calc(100% - 20px));border-radius:0 22px 22px 0;padding:32px 24px;background-image:linear-gradient(#0b2019f5,#08150ffb),url('../../assets/menu-ornament.svg');background-size:auto,300px auto;box-shadow:12px 0 80px #0009}
 #navigation header{padding-bottom:24px;border-bottom:1px solid #c8aa6544}#navigation h1{font-size:25px;letter-spacing:.08em}#navigation nav button{display:flex;align-items:center;justify-content:space-between;min-height:59px;background:transparent;border-color:transparent;border-bottom-color:#b99c5529;border-radius:0;box-shadow:none;padding-inline:4px}#navigation nav button:hover{color:#ffe6a5;background:#b7974b0a}#motion{margin-top:26px;color:#d2bd8d}
 #navigation{background-repeat:no-repeat;background-position:0 0,center bottom}

.community-menu{margin-top:9px}
.community-menu summary{display:flex;align-items:center;justify-content:space-between;min-height:59px;padding-inline:4px;border-bottom:1px solid #b99c5529;font-size:17px;cursor:pointer;list-style:none}
.community-menu summary::-webkit-details-marker{display:none}
.community-menu summary::after{content:"›";color:#d6b773}
.community-menu[open] summary::after{transform:rotate(90deg)}
.community-menu a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;margin-top:9px;padding:12px;border:1px solid #a38a5255;border-radius:13px;background:#142d22;color:inherit;text-decoration:none}
.community-menu a small{grid-column:1;font:13px/1.4 Arial,sans-serif;letter-spacing:0;color:#c0c7b8}
.community-menu a span{grid-area:1/2/3/3;align-self:center;color:#d6b773}
.community-menu a:hover{border-color:#d6b773}
.community-menu :is(summary,a):focus-visible{outline:2px solid #d6b773;outline-offset:2px}
 #preferences{width:min(540px,calc(100% - 28px));padding-bottom:18px}.tabs{display:flex;border-bottom:1px solid #b89a5544;margin-bottom:12px;gap:8px}.tabs button{flex:1;min-height:46px;background:transparent;border:0;border-bottom:2px solid transparent;color:#9eac9e;font:14px Arial,sans-serif}.tabs button[aria-selected=true]{color:#f1d395;border-bottom-color:#d4b671}.setting-row{display:flex;gap:14px;align-items:center;justify-content:space-between;min-height:57px;border-bottom:1px solid #c5a65d20;font:14px/1.4 Arial,sans-serif}.range-row{display:grid;grid-template-columns:1fr auto;gap:9px;padding:15px 0}.range-row input{grid-column:span 2}output{font-size:12px;color:#dbbf80;font-variant-numeric:tabular-nums}input[role=switch]{appearance:none;width:44px;height:26px;min-width:44px;position:relative;border-radius:20px;border:1px solid #7e8068;background:#18251f;cursor:pointer;box-shadow:inset 0 2px 5px #0006}input[role=switch]:after{content:'';position:absolute;width:18px;height:18px;top:3px;left:3px;border-radius:50%;background:#9b9c83;box-shadow:0 2px 4px #0006}input[role=switch]:checked{border-color:#bb9b53;background:#35583b}input[role=switch]:checked:after{left:21px;background:#e7c886}input[type=range]{appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;margin:0}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:8px;background:linear-gradient(to right,#bda05d var(--fill),#36483c var(--fill))}input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-top:-8px;border:1px solid #f0d99b;border-radius:50%;background:#c5a364;box-shadow:0 2px 7px #0008}input[type=range]::-moz-range-track{height:4px;background:#36483c}input[type=range]::-moz-range-progress{height:4px;background:#bda05d}input[type=range]::-moz-range-thumb{border:1px solid #f0d99b;border-radius:50%;background:#c5a364}input:focus-visible,select:focus-visible{outline:2px solid #f0d99b;outline-offset:4px}select{max-width:50%;color:#f1d395;background:#10271c;border:1px solid #b89a5555;border-radius:9px;padding:10px;font:13px Arial,sans-serif}.settings-footer{padding-top:18px;display:grid;gap:12px}.settings-footer span{color:#a9b4a4;font:11px/1.5 Arial,sans-serif}.settings-footer button{font-size:12px}
 @media(max-width:650px) and (orientation:portrait){#scene{object-fit:contain}.primary{bottom:max(26px,env(safe-area-inset-bottom));min-height:62px;width:min(264px,calc(100% - 64px))}#menu{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}dialog{padding:22px}#navigation{margin:0;height:100dvh;max-height:100dvh;width:min(370px,calc(100% - 20px));border-radius:0 22px 22px 0;padding-top:max(24px,env(safe-area-inset-top))}#destination-title{max-width:110px;text-align:right}}
 @media(prefers-reduced-motion:no-preference){button{transition:filter .15s,border-color .15s}dialog[open]{animation:appear .18s ease-out}@keyframes appear{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}}
}

@layer responsive {
#preferences .settings-description{display:block;margin-top:4px;color:#aebcab;font:11px/1.45 Arial,sans-serif;letter-spacing:normal}#preferences .settings-mute{width:100%;margin:4px 0 10px}#preferences .is-muted{opacity:.55}#preferences :disabled{cursor:default}#preferences .settings-artwork{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border:0;padding:16px 0;margin:0;min-width:0}#preferences .settings-artwork legend{padding-top:16px;font:14px Arial,sans-serif;color:#e4cb94}#preferences .settings-art-choice{display:grid;justify-items:center;gap:8px;padding:10px 4px;min-width:0;border:1px solid #a68c5344;border-radius:12px;background:#0b2018;color:#bfcdb9;font:11px/1.3 Arial,sans-serif}#preferences .settings-art-choice img{height:72px;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 5px #0007)}#preferences .settings-art-choice[aria-pressed=true]{border-color:#e0c17a;color:#ffe2a1;background:#254330;box-shadow:inset 0 0 0 1px #cfaf6833}#preferences .settings-tools{display:flex;gap:8px}#preferences .settings-tools button{flex:1;min-width:0;padding:10px 6px}#preferences .settings-footer{gap:8px}#preferences input[type=range]:disabled{opacity:.45}#preferences .setting-row select{max-width:56%}
}

@layer controls {#home-sound{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}#home-sound img{display:block;width:24px;height:24px}}
@layer responsive {@media(max-width:650px) and (orientation:portrait){#home-sound{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}}}

#home:not([hidden]) ~ #navigation{
 inset:0 auto auto 0;
 height:auto;
 background-color:#0b2019;
 background-image:linear-gradient(135deg,#173529,#091c15);
 box-shadow:12px 0 40px #0004;
}
body:has(#navigation[open]) #home #menu{visibility:hidden}
#home:not([hidden]) ~ #navigation::backdrop{background:transparent;backdrop-filter:none}
@media(max-width:650px) and (orientation:portrait){
 #home:not([hidden]) ~ #navigation{width:min(320px,82vw)}
}