:root{color-scheme:dark;--ink:#f7f2e9;--muted:#c7c2b7;--line:rgba(255,255,255,.18);--glass:rgba(13,22,31,.7);--accent:#ffd58a}
*{box-sizing:border-box}html{background:#0b1118}body.sky-page{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 0,#253f52 0,transparent 38rem),#0b1118;color:var(--ink);font:16px/1.55 Inter,ui-sans-serif,system-ui,sans-serif}.sky-page a{color:inherit}.skip-link{position:absolute;left:12px;top:12px;z-index:10;transform:translateY(-150%);padding:10px 14px;background:var(--accent);color:#17202a}.skip-link:focus{transform:none}.sky-nav,.sky-shell,.sky-footer{width:min(100% - 32px,1160px);margin:auto}.sky-nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.sky-brand{display:flex;align-items:center;gap:11px;text-decoration:none}.sky-brand__mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,213,138,.5);border-radius:50%;color:var(--accent);font-size:1.5rem}.sky-brand strong,.sky-brand small{display:block}.sky-brand small{color:var(--muted);font-size:.75rem}.sky-nav nav{display:flex;gap:8px}.sky-nav nav a{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);text-decoration:none}.sky-shell{padding:34px 0 54px;display:grid;gap:22px}.sky-hero{display:flex;align-items:end;justify-content:space-between;gap:24px}.eyebrow{margin:0;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.sky-hero h1{max-width:650px;margin:5px 0 8px;font:clamp(2.3rem,6vw,5.3rem)/.98 Georgia,serif;letter-spacing:-.045em}.sky-hero p:not(.eyebrow){max-width:600px;margin:0;color:var(--muted);font-size:1.05rem}.time-readout{text-align:right}.time-readout span{display:block;font:clamp(2.5rem,6vw,4.5rem)/1 Georgia,serif;color:var(--accent)}.time-readout small{color:var(--muted)}.scene-card{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--glass);box-shadow:0 28px 80px #0007}.scene{position:relative;height:min(58vw,540px);min-height:360px;overflow:hidden;background:#7eacc2}.scene canvas{position:absolute;inset:0;width:100%;height:100%}.scene__overlay{position:absolute;left:25px;top:22px;display:flex;flex-direction:column;gap:2px}.scene__overlay span:first-child{font:1.25rem Georgia,serif}.scene__overlay span:last-child{color:#fffc;font-size:.8rem}.scene__sun,.scene__moon{position:absolute;transform:translate(-50%,-50%);transition:left .8s ease,top .8s ease,opacity .8s ease}.scene__sun{width:clamp(35px,7vw,70px);height:clamp(35px,7vw,70px);border-radius:50%;background:#fff0b1;box-shadow:0 0 55px 20px #ffd97766}.scene__moon{color:#eaf4ff;font-size:clamp(2rem,6vw,4rem);text-shadow:0 0 28px #b9dbff}.scene__horizon{position:absolute;bottom:0;left:0;right:0;height:19%;background:linear-gradient(180deg,transparent,#101f24 48%);pointer-events:none}.scene-controls{padding:24px 26px 28px}.control-heading{display:flex;align-items:end;justify-content:space-between;gap:16px}.control-heading h2,.tool-card h2{margin:4px 0 0;font:1.55rem Georgia,serif}.text-button,.tool-action,.preset-row button{cursor:pointer;border:1px solid var(--line);border-radius:999px;background:#ffffff0a;color:var(--ink);padding:9px 14px}.text-button:hover,.tool-action:hover,.preset-row button:hover{border-color:var(--accent)}#timeSlider{width:100%;margin:24px 0 4px;accent-color:var(--accent)}.slider-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem}.slider-labels span:nth-child(2){color:var(--accent);font-weight:700}.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.preset-row button{display:flex;flex-direction:column;text-align:left;min-width:110px}.preset-row small{color:var(--muted);font-size:.7rem}.sky-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tool-card{position:relative;min-height:172px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#ffffff08}.tool-icon{display:block;margin-bottom:18px;color:var(--accent);font-size:1.35rem}.tool-card p:not(.eyebrow){margin:7px 0 0;color:var(--muted);font-size:.9rem}.tool-action{position:absolute;right:18px;bottom:18px}.tool-action span{color:var(--accent)}.reset-status{min-height:24px;margin:0;text-align:center;color:var(--accent)}.privacy-note{margin:0;color:#aab1b5;text-align:center;font-size:.78rem}.sky-footer{display:flex;justify-content:space-between;gap:12px;padding:18px 0 30px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}.sky-footer a{color:var(--accent)}
@media(max-width:700px){.sky-nav nav a:nth-child(2){display:none}.sky-hero{display:block}.time-readout{text-align:left;margin-top:20px}.scene{min-height:340px}.sky-tools{grid-template-columns:1fr}.sky-footer{display:block}.sky-footer span{display:block;margin-top:8px}.control-heading{align-items:start;flex-direction:column}.scene-controls{padding:20px 18px}}
@media(max-width:700px) and (orientation:portrait){.scene{height:520px;min-height:520px}}
@media(prefers-reduced-motion:reduce){.scene__sun,.scene__moon{transition:none}}
.scene-card{position:relative}
.scene-controls{position:absolute;z-index:3;right:0;bottom:0;left:0;padding:42px 26px 24px;background:linear-gradient(180deg,transparent 0,#0b1118d9 44%,#0b1118f2 100%);backdrop-filter:blur(3px)}
.scene-card:fullscreen{overflow:hidden}
.scene-card:fullscreen .scene{height:100%;min-height:0}
.scene-card:fullscreen .scene-controls{position:absolute;bottom:0;background:linear-gradient(180deg,transparent 0,#0b1118d9 44%,#0b1118f2 100%)}
@media(max-height:560px) and (orientation:landscape){.scene-controls{padding:28px 18px 12px}.control-heading h2{font-size:1.2rem}#timeSlider{margin:10px 0 2px}.preset-row{margin-top:10px}.preset-row button{min-width:92px;padding:6px 10px}.scene__overlay{top:14px;left:16px}}
.control-actions{display:flex;flex-wrap:wrap;gap:8px}.scene__overlay span:not(:first-child){color:#fffc;font-size:.8rem}.scene__overlay span:last-child{color:#fff9;font-size:.7rem}.scene-card:fullscreen{width:100vw;height:100vh;max-height:100vh;overflow-y:auto;border:0;border-radius:0;background:#0b1118;display:flex;flex-direction:column}.scene-card:fullscreen .scene{height:auto;min-height:0;flex:1 1 auto}.scene-card:fullscreen .scene-controls{flex:0 0 auto;background:#0b1118}
.biome-picker{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:#ffffff0a;color:var(--muted);padding:0 5px 0 12px;font-size:.78rem}.biome-picker select{cursor:pointer;border:0;border-radius:999px;background:transparent;color:var(--ink);padding:9px 8px;outline:none}.biome-picker option{background:#17232d;color:var(--ink)}
.scene-card.fullscreen-idle .scene__overlay,.scene-card.fullscreen-idle .scene-controls{display:none}.scene-card.fullscreen-idle .scene{flex:1 1 100%}
.scene-card:fullscreen .scene{height:100%;min-height:0}.scene-card:fullscreen .scene__horizon{display:none}
.scene-card:fullscreen{overflow:hidden}
.scene-card:fullscreen .scene-controls{position:absolute;right:0;bottom:0;left:0;z-index:3;flex:0 0 auto;background:linear-gradient(180deg,transparent 0,#0b1118d9 44%,#0b1118f2 100%)}
@media(max-width:700px){.scene-controls{padding:28px 18px 20px}}

/* Portrait keeps the landscape primary; the full control sheet is opt-in. */
@media(max-width:700px) and (orientation:portrait){
  .scene-controls{padding:12px 14px 13px}
  .scene-controls.controls-expanded{padding:18px 14px 16px}
  .control-heading{align-items:center;flex-direction:row;gap:10px}
  .control-heading h2{font-size:1.15rem;margin-top:2px}
  .control-heading .eyebrow{font-size:.62rem}
  .controls-toggle{display:block;margin-left:auto;padding:7px 11px;font-size:.8rem;white-space:nowrap}
  .scene-controls:not(.controls-expanded) .control-actions{display:none}
  .scene-controls.controls-expanded .control-actions{display:flex;width:100%;flex-direction:column;align-items:stretch}
  .scene-controls.controls-expanded .control-heading{align-items:flex-start;flex-wrap:wrap}
  .scene-controls.controls-expanded .controls-toggle{order:2}
  .scene-controls.controls-expanded .control-actions{order:3}
  .control-actions .biome-picker{display:flex;flex-direction:column;gap:4px}
  .control-actions .text-button{width:100%;text-align:center}
  .controls-body #timeSlider{margin:16px 0 3px}
  .controls-body .preset-row{margin-top:14px}
  .controls-body .preset-row button{min-width:0;flex:1 1 44%;padding:7px 9px}
}

/* The disclosure is only needed where the portrait sheet can crowd the scene. */
.controls-toggle{display:none}
@media(max-width:700px) and (orientation:portrait){.controls-toggle{display:block}}