@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans','Noto Sans JP',sans-serif;color:#eaf0fa;background:#07111f;font-synthesis:none;--muted:#92a0b7;--line:rgba(159,181,215,.13);--mint:#80dfce}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 50% -30%,#17294a 0,transparent 55%),#07111f}.app-shell{max-width:1180px;margin:auto;padding:0 36px}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;color:#f5f7fc;text-decoration:none;font-weight:700;font-size:16px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#75849e;font-weight:500;margin-top:2px}.brand-icon{font-size:25px;color:#8fd9db}.location{font-size:12px;color:#b9c5d8}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#80dfce;margin-right:8px;box-shadow:0 0 10px #80dfce}.divider{padding:0 7px;color:#66768e}.intro{padding:40px 0 27px}.eyebrow{font-size:10px;letter-spacing:2px;color:#86cfc9;font-weight:700;margin:0 0 10px}.intro h1{font-size:31px;letter-spacing:.04em;margin:0;font-weight:700}.intro h1 em{font-style:normal;color:#91dccc}.lead{font-size:13px;color:#9caac0;margin:11px 0 0}.explorer{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.8fr);gap:18px;align-items:stretch}.sky-panel,.controls{border:1px solid var(--line);border-radius:16px;background:rgba(15,27,45,.78);overflow:hidden}.sky-head{height:75px;padding:19px 23px;display:flex;align-items:center;justify-content:space-between}.sky-head .eyebrow{font-size:9px;margin-bottom:3px}.sky-head h2{font-size:17px;margin:0}.sky-head h2 span{color:#65748e;padding:0 4px}.sky-time{font-size:11px;color:#aab6c9;background:#1b2940;padding:7px 10px;border-radius:20px}.sky-wrap{height:365px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 53% 80%,#1a3152 0,#0b1a30 50%,#081321 100%)}#sky{display:block;width:100%;height:100%}.horizon{position:absolute;bottom:39px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(171,198,222,.42),transparent)}.horizon span{position:absolute;right:20px;top:8px;color:#91a2b9;font-size:9px}.zenith{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:1px;color:#71839f}.view-readout{position:absolute;bottom:15px;left:19px;display:flex;align-items:center;gap:8px;font-size:11px;color:#a9b8cd}.view-readout b{color:#e9f1fc;font-size:13px;margin-left:3px}.angle-icon{font-size:24px;color:#8de1d1}.sky-legend{height:39px;padding:0 20px;display:flex;align-items:center;gap:18px;font-size:10px;color:#98a8bf}.sky-legend span:last-child{margin-left:auto;color:#73829a}.star-key{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f2ead1;margin-right:6px}.line-key{display:inline-block;width:14px;border-top:1px solid #79c6c8;margin-right:6px;vertical-align:middle}.controls{padding:19px 22px}.control-section{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:16px}.section-label{display:flex;align-items:center;gap:11px;margin-bottom:13px}.step{font-size:10px;color:#83d3c7;font-weight:700;border:1px solid rgba(128,223,206,.24);border-radius:7px;padding:6px}.section-label h3{font-size:12px;margin:0 0 3px}.section-label p{font-size:10px;color:#8594ab;margin:0}.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.season{border:1px solid #293951;background:#111e31;border-radius:8px;color:#c2cede;padding:8px 3px;font:inherit;font-size:11px;cursor:pointer;transition:.18s}.season span{display:block;font-size:15px;margin-bottom:4px}.season:hover,.season.active{border-color:#76cabb;background:#18303d;color:#baf0e5}.direction-section{padding-bottom:14px}.compass{position:relative;margin:0 auto 10px;width:130px;height:116px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center}.compass button{width:31px;height:31px;border:1px solid #31425b;border-radius:50%;color:#71839d;background:#142238;cursor:pointer;font-size:12px;z-index:1;transition:.15s}.compass button:hover,.compass button.selected{background:#80dfce;color:#09201e;border-color:#80dfce;box-shadow:0 0 17px #80dfce45}.compass-n{grid-column:2;grid-row:1;font-size:9px;color:#8291a8}.compass-e{grid-column:3;grid-row:2;font-size:9px;color:#8291a8}.compass-w{grid-column:1;grid-row:2;font-size:9px;color:#8291a8}.compass-s{grid-column:2;grid-row:3;font-size:9px;color:#8291a8}.compass button[data-direction=north]{grid-column:2;grid-row:1;margin-top:25px}.compass button[data-direction=east]{grid-column:3;grid-row:2;margin-left:-24px}.compass button[data-direction=west]{grid-column:1;grid-row:2;margin-right:-24px}.compass button[data-direction=south]{grid-column:2;grid-row:3;margin-top:-25px}.compass-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#1a2b43;color:#83d5c7;font-size:9px;font-weight:700}.direction-label{display:flex;align-items:center;gap:7px;font-size:10px;color:#91a0b7}.direction-label b{margin-left:auto;color:#d7e4f1;font-size:12px}.direction-arrow{font-size:15px;color:#80dfce}.altitude-section{border:0;margin:0;padding:0}.altitude-row{display:flex;align-items:center;gap:10px;font-size:9px;color:#8d9db4}input[type=range]{appearance:none;flex:1;height:4px;border-radius:9px;background:linear-gradient(90deg,#80dfce 0%,#80dfce 50%,#293951 50%);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border:3px solid #07111f;border-radius:50%;background:#91e2d3;box-shadow:0 0 0 1px #91e2d3}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:3px solid #07111f;border-radius:50%;background:#91e2d3;box-shadow:0 0 0 1px #91e2d3}.altitude-labels{display:flex;justify-content:space-between;margin:8px 28px 0;color:#677993;font-size:9px}.altitude-labels span:nth-child(2){color:#a5b4c8}.tip{display:flex;gap:9px;margin-top:16px;border-radius:8px;background:#111f32;padding:10px 11px}.tip-icon{color:#8ddbcf;font-size:15px}.tip p{font-size:9px;line-height:1.7;color:#92a2b8;margin:0}.constellation-section{padding:37px 0 40px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.section-heading .eyebrow{margin-bottom:5px}.section-heading h2{font-size:18px;margin:0}.section-heading>span{font-size:10px;color:#8796ae}.constellation-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.constellation-card{padding:15px 17px;border:1px solid var(--line);border-radius:12px;background:rgba(15,27,45,.68);display:flex;align-items:center;gap:13px}.constellation-glyph{width:43px;height:43px;border-radius:11px;background:#172942;display:grid;place-items:center;font-size:21px;color:#9cdbd2}.constellation-card h3{font-size:12px;margin:0 0 4px}.constellation-card p{font-size:10px;color:#8d9db4;margin:0;line-height:1.6}.card-season{margin-left:auto;align-self:flex-start;color:#8bcfc7;background:#182d3a;padding:5px 7px;border-radius:20px;font-size:9px;white-space:nowrap}footer{border-top:1px solid var(--line);padding:17px 0 25px;color:#8292a9;font-size:10px}footer span{margin-left:10px;color:#53637c}@media(max-width:850px){.app-shell{padding:0 22px}.explorer{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.direction-section{grid-column:2;grid-row:1/3;border-bottom:0;border-left:1px solid var(--line);padding-left:20px}.altitude-section{grid-column:1;grid-row:2;margin-top:0}.tip{grid-column:1/3}.sky-wrap{height:340px}}@media(max-width:540px){.app-shell{padding:0 15px}.topbar{height:69px}.location{font-size:10px}.intro{padding:29px 0 22px}.intro h1{font-size:24px}.lead{font-size:11px;line-height:1.7}.sky-head{padding:16px;height:68px}.sky-wrap{height:300px}.controls{display:block;padding:17px}.direction-section{border-left:0;padding-left:0;border-bottom:1px solid var(--line)}.altitude-section{margin-top:0}.constellation-section{padding:30px 0}.constellation-cards{grid-template-columns:1fr}.constellation-card{padding:12px 14px}.section-heading h2{font-size:16px}}