:root{font-family:Inter,Roboto,'Noto Sans JP',system-ui,sans-serif;color:#ecf3ff;background:#07111d}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden}button,a,label{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:none}button:focus-visible,a:focus-visible{outline:3px solid #6ecfff}.shell{height:100dvh;min-height:350px;display:flex;flex-direction:column}.top{height:64px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:#0b1524;border-bottom:1px solid #27384b}.brand{display:flex;gap:8px;align-items:baseline;letter-spacing:2px;font-weight:800;font-size:19px}.brand b{color:#72cfff}.brand small{font-size:10px;color:#8aa2bd;letter-spacing:1px;margin-left:12px}.logo{font-size:25px;color:#75d5ff}.topRight{display:flex;align-items:center;gap:12px;color:#7fabc5;font-size:12px}.topRight button,.panelHeading button{background:#17283c;border-radius:10px;min-width:42px;min-height:40px;font-size:21px}.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.72fr) minmax(300px,1fr)}.mapArea{position:relative;background:radial-gradient(ellipse at 45% 65%,#234d5b 0%,#112f44 35%,#0c1d30 70%);overflow:hidden}.mapArea:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 48%,#7291a012 49%,#7291a012 51%,transparent 52%),linear-gradient(-30deg,transparent 48%,#a9bdbe10 49%,#a9bdbe10 51%,transparent 52%);background-size:160px 120px,240px 160px}#map{position:absolute;inset:0;z-index:1}.mapShade{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 60px #06111c33}.mapPill{position:absolute;z-index:3;top:18px;left:18px;padding:11px 15px;background:#0b1825e8;border:1px solid #4e6778;border-radius:12px;font-weight:700;font-size:14px}.mapPill span{font-weight:400;color:#87a2b7;font-size:11px;margin-left:10px}.mapFallback{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;background:linear-gradient(160deg,#081b2c96,#061723db)}.mapFallback.hidden{display:none}.mapFallback h2{letter-spacing:4px;font-size:24px;margin:12px 0 5px}.mapFallback p{font-size:14px;max-width:420px;line-height:1.6;color:#bdd2df}.mapFallback button,#saveToken{background:#45b9eb;color:#021726;font-weight:800;border-radius:11px;padding:13px 20px}.compass{font-size:65px;color:#66d2ff}.mapControls{position:absolute;z-index:4;bottom:18px;left:18px;display:flex;gap:10px}.mapControls button{padding:13px 17px;background:#10253def;color:white;border:1px solid #59748a;border-radius:12px;font-size:14px;font-weight:700}.side{background:#09131f;padding:14px;min-height:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.panel{flex:none;border-radius:18px;border:1px solid #253749;background:linear-gradient(130deg,#17293b,#101d2d);padding:16px 19px}.clockPanel{padding:16px 22px 14px}.eyebrow{font-size:10px;color:#78aacc;letter-spacing:2px;font-weight:700}.time{font-size:clamp(45px,6.3vw,82px);font-weight:650;line-height:1.12;letter-spacing:-3px;font-variant-numeric:tabular-nums}.date{font-size:14px;color:#9db7cc}.panelHeading{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:16px}.panelHeading button{min-width:35px;min-height:32px;font-size:18px}.weatherNow{display:flex;align-items:center;gap:20px;margin:6px 0}.weatherIcon{font-size:56px}.temperature{font-size:44px;font-weight:700;line-height:1.1}.temperature small{font-size:17px;color:#b6cfdd}.subtle{color:#9cb4c9;font-size:13px}.weatherDetail{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #304252;padding-top:9px;font-size:12px;color:#9cb5cc}.muted{font-size:10px;letter-spacing:2px;color:#7299b9}.artRow{display:flex;align-items:center;gap:12px;margin:13px 0}.album{width:58px;height:58px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(150deg,#4482a8,#6b4ea1);font-size:30px}.track{min-width:0;display:flex;flex-direction:column;gap:4px}.track b{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.track span{font-size:12px;color:#9cb7cd}.musicLinks{display:flex;gap:8px}.musicLinks a{flex:1;text-align:center;text-decoration:none;color:white;font-size:12px;font-weight:700;background:#20364b;border:1px solid #3b556a;padding:12px 5px;border-radius:10px}.localMusic{margin-top:12px;border-top:1px solid #304252;padding-top:10px}.localMusic label{display:block;color:#a5c7db;font-size:12px}.localMusic input{width:100%;font-size:11px;margin-top:6px;color:#c0d3e1}.audioControls{display:flex;justify-content:center;gap:12px;margin-top:8px}.audioControls button{min-height:36px;min-width:66px;background:#244055;border-radius:9px}.audioControls #playPause{background:#3caadc;color:#001621;font-weight:900}.status{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#829db2;padding:3px 5px}dialog{width:min(520px,95vw);border-radius:18px;border:1px solid #4e718a;background:#102237;color:#e8f3fa;padding:0;box-shadow:0 20px 80px #000a}dialog::backdrop{background:#030a13c9}.settingsContent{display:flex;flex-direction:column;gap:12px;padding:22px}.settingsContent h2{margin:0;font-size:20px}.settingsContent label{font-weight:700;font-size:14px}.settingsContent textarea{width:100%;resize:vertical;border-radius:9px;background:#061520;border:1px solid #476478;color:#eefbff;padding:12px;font:12px monospace}.hint{font-size:12px;color:#9eb8c9;line-height:1.6;margin:0}.check{display:flex;align-items:center;gap:8px}.settingActions{display:flex;justify-content:space-between;gap:10px}.secondary{background:#21354a;border-radius:10px;padding:12px 16px}@media(max-width:800px){.top{height:52px;padding:0 12px}.topRight{gap:5px}.topRight #connectivity{display:none}.brand{font-size:15px}.brand small{display:none}.layout{grid-template-columns:minmax(0,1.2fr) minmax(245px,1fr)}.side{padding:8px;gap:7px}.panel{padding:10px 12px;border-radius:12px}.time{font-size:47px}.weatherIcon{font-size:39px}.temperature{font-size:34px}.weatherNow{gap:10px}.musicLinks a{padding:9px 3px}.mapPill{top:9px;left:9px}.mapControls{bottom:10px;left:10px}.mapControls button{padding:10px}}@media(max-height:480px){.top{height:46px}.side{gap:6px}.panel{padding:8px 12px}.clockPanel .time{font-size:39px}.eyebrow{font-size:8px}.date{font-size:11px}.weatherNow{margin:0}.weatherIcon{font-size:32px}.temperature{font-size:29px}.weatherDetail{padding-top:5px}.artRow{margin:5px 0}.album{height:38px;width:38px;font-size:22px}.musicLinks a{padding:7px 2px}.localMusic{margin-top:5px;padding-top:5px}.audioControls{margin-top:3px}.audioControls button{min-height:28px}.status{display:none}}@media(max-width:580px){html,body{overflow:auto}.shell{min-height:100dvh;height:auto}.layout{display:flex;flex-direction:column}.mapArea{height:52vh;min-height:290px}.side{overflow:visible}.time{font-size:64px}}