:root{color-scheme:dark;--navy:#06182e;--navy2:#0b2d55;--cyan:#13cff3;--blue:#168ff1;--white:#f8fbff;--muted:#9db0c5;--panel:#0a1c31;--radius:24px;font-family:Inter,"Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#174d82 0,#07182b 42%,#020b14 100%);color:var(--white);min-height:100vh}.app-shell{width:min(100%,720px);margin:auto;padding:16px 16px calc(28px + env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;gap:12px;padding:4px 2px 14px}.brand{width:72px;height:72px;object-fit:contain}.topbar h1,.result-head h2{font-size:20px;margin:2px 0}.eyebrow{margin:0;color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.18em}.icon-button,.round-button{border:1px solid #ffffff2b;background:#ffffff10;color:#fff;border-radius:999px;width:42px;height:42px;font-size:20px}.topbar .icon-button{margin-left:auto}.status-strip{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:30px}.status-pill{font-size:11px;font-weight:800;padding:6px 10px;border-radius:999px;background:#ffc83d;color:#13233a}.status-pill.ok{background:#37dca1;color:#06251c}.status-pill.warn{background:#ff8c61;color:#371307}.status-text{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.camera-card,.control-panel,.result-panel{background:#07172ae6;border:1px solid #ffffff17;border-radius:var(--radius);box-shadow:0 28px 70px #0008;overflow:hidden}.stage{position:relative;aspect-ratio:3/4;background:#02070d;overflow:hidden}.stage video,.stage #photoSource{width:100%;height:100%;object-fit:cover;display:none}.stage.has-video video,.stage.has-photo #photoSource{display:block}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#9cb0c4;background:linear-gradient(160deg,#102b45,#050d17)}.has-video .empty-state,.has-photo .empty-state{display:none}.empty-icon{font-size:64px;color:var(--cyan)}.empty-state small{color:#6f869e}.preview-overlay{position:absolute;inset:0;pointer-events:none}.overlay-logo{position:absolute;right:4%;top:3%;width:23%;max-height:22%;object-fit:contain;filter:drop-shadow(0 2px 8px #0008)}.overlay-gradient{position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(2,15,31,.56) 35%,rgba(2,15,31,.96))}.overlay-copy{position:absolute;left:5%;right:5%;bottom:4%;text-shadow:0 3px 12px #000c}.place-row{display:flex;align-items:end;justify-content:space-between;gap:16px}.place{font-weight:1000;font-size:clamp(40px,10vw,76px);line-height:.95;letter-spacing:-.07em}.place-roman{font-size:clamp(12px,3.2vw,22px);font-weight:900;letter-spacing:.22em;margin-top:8px}.time{font-size:clamp(9px,2.2vw,15px);font-weight:800;white-space:nowrap}.weather-grid{display:grid;grid-template-columns:1.2fr 1.45fr 1fr;align-items:center;gap:18px;padding-top:18px}.temperature{display:flex;align-items:center;white-space:nowrap}.weather-symbol{display:block;flex:0 0 auto;width:clamp(48px,11vw,82px);height:clamp(48px,11vw,82px);margin-right:10px;color:#fff;filter:drop-shadow(0 3px 8px #000c)}.weather-symbol svg{display:block;width:100%;height:100%;overflow:visible}.weather-symbol svg g{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.weather-symbol svg g path:first-child:not(:only-child){fill:none}.temperature b{font-size:clamp(42px,12vw,82px);line-height:.8}.temperature>span:last-child{font-size:clamp(18px,4vw,30px);font-weight:900}.condition,.sun{display:flex;flex-direction:column;gap:5px;font-size:clamp(9px,2.2vw,15px)}.condition b{font-size:clamp(16px,3.8vw,26px)}.condition span{color:#eef4fa;font-weight:700}.sun{color:#f7fbff}.sun b{font-size:1.14em}.guide-lines{position:absolute;inset:33.33% 0 auto;height:33.33%;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18;display:none}.capture-bar{display:flex;align-items:center;justify-content:center;gap:42px;padding:14px}.shutter{width:72px;height:72px;border:3px solid #fff;background:transparent;border-radius:50%;padding:5px}.shutter span{display:block;width:100%;height:100%;background:linear-gradient(145deg,#2ce1ff,#087add);border-radius:50%;box-shadow:0 0 22px #16cffa77}.shutter:active span{transform:scale(.92)}.control-panel{margin-top:14px;padding:16px}.segmented{display:grid;grid-template-columns:repeat(4,1fr);background:#020b14;border-radius:14px;padding:4px;gap:3px}.segmented button{border:0;border-radius:10px;padding:10px 2px;background:transparent;color:#8fa6bc;font-weight:800}.segmented button.active{background:#12395e;color:#fff;box-shadow:inset 0 0 0 1px #22d5fa55}.control-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.control-grid label{font-size:11px;color:#9db0c5;font-weight:800}.control-grid input,.control-grid select{display:block;width:100%;margin-top:5px;border:1px solid #ffffff1c;background:#05111f;color:#fff;border-radius:10px;padding:11px;font:inherit}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.primary-button,.ghost-button{border-radius:14px;padding:13px;border:1px solid transparent;font-weight:900;font-size:14px}.primary-button{background:linear-gradient(135deg,#20d8f7,#1381eb);color:#001628}.ghost-button{background:#ffffff08;border-color:#ffffff20;color:#fff}.privacy-note,.future-note{font-size:11px;color:#8fa5ba;margin:12px 2px 0;text-align:center}.result-panel{margin-top:14px;padding:16px}.result-head{display:flex;align-items:center;justify-content:space-between}.result-panel>img{width:100%;border-radius:16px;margin-top:10px;background:#02070d}.theme-cloudy .overlay-gradient{background:linear-gradient(transparent,rgba(5,19,34,.66) 30%,rgba(4,17,31,.98))}.theme-cloudy{filter:saturate(.82) contrast(1.04)}.theme-night .overlay-gradient{background:linear-gradient(transparent,rgba(3,9,27,.54) 25%,rgba(2,8,25,.98))}.theme-night{--cyan:#49d9ff;filter:saturate(.9) brightness(.91)}.theme-night .place,.theme-night .place-roman{color:#fffdf1}.theme-night .time{color:#eadca8}.theme-day .overlay-gradient{background:linear-gradient(transparent,rgba(3,24,47,.48) 38%,rgba(3,22,43,.95))}dialog{max-width:480px;width:calc(100% - 32px);border:1px solid #ffffff25;border-radius:22px;background:#081a2e;color:#fff;padding:24px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}dialog h2{margin-top:0}.dialog-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#fff;font-size:25px}dialog li,dialog p{color:#c2d0dd;line-height:1.7;font-size:14px}@media(max-width:480px){.app-shell{padding:10px 10px 24px}.brand{width:56px;height:56px}.weather-grid{gap:10px}.capture-bar{gap:30px}.control-grid{grid-template-columns:1fr 1fr}.overlay-logo{width:25%}}@media(min-width:800px){.stage{aspect-ratio:3/4}}@media(prefers-reduced-motion:no-preference){button{transition:transform .15s,background .2s}button:hover{transform:translateY(-1px)}}

.bluesky-connect,.post-composer{margin-top:16px;padding:15px;border:1px solid #22d5fa45;border-radius:18px;background:linear-gradient(145deg,#0b2d55aa,#061425cc)}
.bluesky-connect-head,.post-composer-head,.bluesky-account{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bluesky-connect [hidden]{display:none!important}
.bluesky-connect h2,.post-composer h3{margin:2px 0 0;font-size:17px}
.connection-badge{padding:6px 9px;border-radius:999px;background:#ffffff10;color:#a8bbce;font-size:10px;font-weight:900}
.connection-badge.connected{background:#37dca1;color:#06251c}
.bluesky-id-label,.post-composer label{display:block;margin-top:12px;color:#b5c7d8;font-size:11px;font-weight:800}
.bluesky-login-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:6px}
.bluesky-login-row input,.post-composer textarea{width:100%;border:1px solid #ffffff20;border-radius:11px;background:#03101f;color:#fff;padding:11px;font:inherit;resize:vertical}
.bluesky-button{border:0;border-radius:11px;padding:11px 15px;background:linear-gradient(135deg,#35dff8,#1185eb);color:#001628;font-weight:1000}
.bluesky-button:disabled{opacity:.45;filter:saturate(.3)}
button:disabled{cursor:not-allowed;opacity:.5;filter:saturate(.35)}
.bluesky-help{margin:8px 0 0;color:#8fa5ba;font-size:10px;line-height:1.55}
.bluesky-account span,.bluesky-account b{display:block}.bluesky-account span{color:#8fa5ba;font-size:10px}.bluesky-account b{margin-top:3px;font-size:14px}
.text-button{border:0;background:transparent;color:#67dff7;text-decoration:underline;font-size:11px}
.form-status{min-height:1.4em;margin:8px 0 0;color:#a9bfd3;font-size:11px;line-height:1.45}
.form-status.error{color:#ff9b7a}.form-status.success{color:#57e5ad}
.post-composer-head>span{max-width:50%;overflow:hidden;color:#8fa5ba;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.post-composer label>span{float:right;color:#7f96ac;font-weight:700}
.post-composer textarea{display:block;margin-top:6px;line-height:1.5}
.post-composer-help{margin:8px 0 0;color:#8fa5ba;font-size:10px;line-height:1.55}
.post-composer-host:empty{display:none}
.result-panel .post-composer{margin-top:12px}
.post-alt-details{margin-top:12px;border:1px solid #ffffff17;border-radius:12px;background:#03101f80}
.post-alt-details summary{padding:12px;color:#b5c7d8;font-size:11px;font-weight:900;cursor:pointer;list-style-position:inside}
.post-alt-details[open] summary{border-bottom:1px solid #ffffff12}
.post-alt-details label{margin:0;padding:0 12px 12px}
.post-alt-details textarea{margin-top:0}
.post-button{width:100%;margin-top:12px;padding:14px}
.post-link{display:block;margin-top:10px;color:#57dbf6;font-size:12px;font-weight:900;text-align:center}
.photo-filter-panel{margin:0 0 14px;padding:13px;border:1px solid #22d5fa38;border-radius:14px;background:#03101f}
.photo-filter-panel label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;color:#dff8ff;font-size:12px;font-weight:900}
.photo-filter-panel select{width:100%;border:1px solid #ffffff24;border-radius:10px;background:#06182e;color:#fff;padding:11px;font:inherit}
.photo-filter-panel p{margin:8px 0 0;color:#8fa5ba;font-size:10px;line-height:1.5}
@media(max-width:480px){.bluesky-login-row{grid-template-columns:1fr}.bluesky-button{width:100%}}
.overlay-logo{width:25%;height:auto;max-height:none}
@media(max-width:480px){.overlay-logo{width:27%}}
.overlay-copy{bottom:clamp(18px,5vw,34px)}
.place-roman{font-size:clamp(14px,3.8vw,26px)}
.time{font-size:clamp(11px,2.8vw,18px)}
.condition,.sun{font-size:clamp(11px,2.8vw,18px)}
.condition b,.sun b{font-size:1.12em}

.about-aozora{margin-top:36px;padding:4px 0 0}
.about-intro,.about-block{position:relative;margin-top:18px;padding:28px 24px;border:1px solid #ffffff18;border-radius:26px;background:linear-gradient(145deg,rgba(13,48,83,.9),rgba(4,18,34,.96));box-shadow:0 24px 60px #0005;overflow:hidden}
.about-intro::after{content:"";position:absolute;right:-70px;top:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#24d9f755,transparent 68%);pointer-events:none}
.about-kicker,.about-number{margin:0 0 8px;color:var(--cyan);font-size:11px;font-weight:1000;letter-spacing:.2em}
.about-aozora h2{position:relative;margin:0 0 15px;font-size:clamp(25px,6vw,38px);letter-spacing:.02em}
.about-intro>p:not(.about-kicker){position:relative;margin:9px 0;color:#d7e4ef;font-size:14px;line-height:1.9}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.feature-grid article{padding:18px 15px;border:1px solid #36dafa35;border-radius:18px;background:#031323a8}
.feature-grid article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#2ce0f8,#1287ed);color:#021427;font-size:23px;font-weight:1000;box-shadow:0 8px 24px #13bfe744}
.feature-grid h3{margin:14px 0 8px;font-size:15px}
.feature-grid p{margin:0;color:#aebfd0;font-size:12px;line-height:1.7}
.function-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.function-list li{padding:16px;border-left:3px solid var(--cyan);border-radius:0 14px 14px 0;background:#031323a8}
.function-list b,.function-list span{display:block}.function-list b{font-size:14px}.function-list span{margin-top:7px;color:#aebfd0;font-size:11px;line-height:1.65}
.about-cta{padding:38px 16px;text-align:center}.about-cta p{margin:0 0 15px;color:#d9f7ff;font-size:20px;font-weight:900}.about-cta button{width:min(100%,420px);border:0;border-radius:999px;padding:18px 24px;background:linear-gradient(135deg,#2ce0f8,#1287ed);color:#001526;font-size:19px;font-weight:1000;box-shadow:0 14px 38px #0cbce955}
.service-notice{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 34px;padding:13px 18px;border:1px solid #ffffff1c;border-radius:15px;background:#061524b8;color:#9fb2c4;text-align:left}
.service-notice>span{display:grid;flex:0 0 auto;place-items:center;width:24px;height:24px;border:1px solid #42dff56e;border-radius:50%;color:var(--cyan);font-family:Georgia,serif;font-size:14px;font-weight:900}
.service-notice p{margin:0;font-size:11px;line-height:1.65}.service-notice b{margin-right:.6em;color:#dceaf5}
.site-footer{margin:0 -16px calc(-28px - env(safe-area-inset-bottom));padding:34px 20px calc(30px + env(safe-area-inset-bottom));border-top:1px solid #ffffff16;background:#020a13;text-align:center}
.site-footer>a{display:inline-flex;flex-direction:column;align-items:center;gap:8px;color:#8ea7bd;text-decoration:none}.site-footer img{display:block;width:min(72%,270px);height:auto}.site-footer>a span{font-size:11px;font-weight:800;letter-spacing:.16em}.site-footer .app-version{margin:22px 0 0;color:#63788d;font-size:10px}
@media(max-width:560px){.feature-grid,.function-list{grid-template-columns:1fr}.about-intro,.about-block{padding:24px 19px}.site-footer{margin-left:-10px;margin-right:-10px}}
@media(min-width:900px){
  .app-shell{width:min(100%,1180px);padding-right:28px;padding-left:28px}
  .topbar,.status-strip,.pwa-banner,.mode-switch,.camera-card{width:min(100%,720px);margin-right:auto;margin-left:auto}
  .topbar{margin-top:12px;margin-bottom:12px;padding:16px 20px;border:1px solid #ffffff18;border-radius:22px;background:linear-gradient(135deg,#0d345bdd,#071a30ed);box-shadow:0 18px 50px #0005}
  .topbar .brand{width:82px;height:82px}.topbar h1{font-size:28px}.topbar .eyebrow{font-size:11px}
  .status-strip{margin-bottom:16px;padding:10px 14px;border:1px solid #ffffff12;border-radius:15px;background:#061728b8}
  .mode-switch{margin-bottom:12px}
  .camera-card{max-width:720px}
  .about-aozora{margin-top:54px}
  .about-intro,.about-block{padding:38px 42px}
  .about-intro>p:not(.about-kicker){max-width:850px;font-size:16px}
  .feature-grid{gap:18px}
  .feature-grid article{min-height:220px;padding:24px 22px}
  .feature-grid h3{font-size:17px}
  .feature-grid p{font-size:13px}
  .function-list{gap:14px}
  .function-list li{padding:20px}
  .function-list b{font-size:16px}
  .function-list span{font-size:13px}
  .site-footer{margin-right:-28px;margin-left:-28px;overflow:hidden}
  .site-footer>a{width:min(100%,520px);padding:6px 30px}
  .site-footer img{width:100%;max-width:420px;max-height:190px;object-fit:contain}
}