:root{color-scheme:dark;--ink:#dce5da;--muted:#8ca6a1;--line:#294347;--accent:#d5c894}*{box-sizing:border-box}body{margin:0;background:#10282d;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;font-size:14px}button,select,input{font:inherit}button{cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:7px;padding:10px 16px;transition:background .2s}button:hover{background:#294347}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{max-width:1320px;margin:auto;padding:25px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-weight:650;font-size:19px;display:flex;align-items:center;gap:10px}.mark{font-size:32px;color:var(--accent)}.edition{font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:400;margin-left:18px}main{max-width:1120px;padding:0 40px;margin:auto}.intro{padding:42px 0 30px}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:2px}h1{font-size:clamp(24px,3vw,34px);font-weight:500;letter-spacing:.07em;margin:12px 0}p{color:var(--muted);line-height:1.9;margin:10px 0}.island{position:relative;border:1px solid #486463;border-radius:11px;overflow:hidden;background:#357f86;box-shadow:0 24px 70px #071c2455}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.scene-top,.scene-bottom{position:absolute;left:0;width:100%;padding:18px 23px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-size:11px;letter-spacing:.06em;color:#f3f2d9;text-shadow:0 1px 3px #18383a}.scene-top{top:0}.scene-bottom{bottom:0;background:linear-gradient(transparent,#123c4155);padding-top:25px}i{display:inline-block;width:6px;height:6px;background:#ede5a5;border-radius:50%;margin-right:6px}.coordinates{font-size:9px;letter-spacing:2px;opacity:.7}.toolbar{display:flex;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}.tools{display:flex;gap:8px}#count{color:var(--accent);margin:0 9px}.footnote{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:20px 0}footer{text-align:center;color:#6b8986;font-size:10px;letter-spacing:2px;padding:30px 20px}footer span{padding:0 12px}dialog{color:var(--ink);background:#153238;border:1px solid #49615f;border-radius:12px;padding:26px;width:440px;max-width:92vw;max-height:85vh}dialog::backdrop{background:#041b22b8;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-head button{border:0;padding:8px 12px}h2{font-weight:500;font-size:22px;margin:5px 0}label{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:22px 0}select{background:#10282d;color:var(--ink);border:1px solid var(--line);padding:9px;border-radius:5px}input{accent-color:var(--accent)}.check{justify-content:flex-start}.small{font-size:12px}.danger{margin-top:18px;font-size:12px;color:#e6b9a4}ol{list-style:none;padding:0}li{border-top:1px solid var(--line);padding:15px 0;font-size:13px;line-height:1.8}li time{display:block;color:var(--muted);font-size:10px}.island:fullscreen{display:flex;align-items:center;justify-content:center;background:#10282d;border:0;border-radius:0}.island:fullscreen canvas{width:min(100vw,177.778vh);height:auto;max-height:100vh}.island:fullscreen .scene-top,.island:fullscreen .scene-bottom{background:#10282d99}@media(max-width:650px){header{padding:16px 20px}.edition{display:none}main{padding:0 16px}.intro{padding:30px 3px 22px}.intro p{font-size:12px}button{padding:9px 10px;font-size:12px}.toolbar{gap:6px}.tools{gap:5px}.scene-top,.scene-bottom{padding:10px 12px;font-size:9px}.coordinates{display:none}.footnote{font-size:10px}.brand{font-size:17px}.scene-bottom{padding-top:17px}footer{font-size:8px;letter-spacing:1px}}

/* Phone layout: keep the island readable and controls within thumb reach. */
button{touch-action:manipulation}
@media(max-width:650px){
  .island-app{padding-bottom:calc(144px + env(safe-area-inset-bottom));}
  .island-app header{padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));min-height:64px;}
  .island-app header button{min-height:44px;min-width:64px;font-size:14px;}
  .island-app main{padding:0 12px;}
  .island-app .intro{padding:18px 4px 16px;}
  .island-app .intro .eyebrow,.island-app .intro p{display:none;}
  .island-app h1{font-size:clamp(20px,5.5vw,26px);letter-spacing:.04em;margin:0;}
  .island-app .island{height:clamp(260px,min(54svh,calc((100vw - 24px)*1.2)),540px);border-radius:14px;}
  .island-app #scene{width:100%;height:100%;object-fit:cover;object-position:center;}
  .island-app .scene-top{padding:16px;font-size:12px;}
  .island-app .scene-bottom{padding:28px 16px 16px;font-size:12px;gap:10px;align-items:flex-end;}
  .island-app #activity{max-width:75%;line-height:1.6;}
  .island-app #pauseLabel{white-space:nowrap;font-size:11px;}
  .island-app .toolbar{position:fixed;z-index:10;left:0;right:0;bottom:0;margin:0;padding:12px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:#10282df5;border-top:1px solid var(--line);border-bottom:0;backdrop-filter:blur(12px);}
  .island-app .tools{display:contents;}
  .island-app .toolbar button{min-height:48px;padding:10px 12px;font-size:14px;border-radius:9px;background:#19363b;}
  .island-app .footnote{padding:14px 4px;gap:12px;align-items:center;line-height:1.7;}
  .island-app .footnote a{display:flex;align-items:center;min-height:44px;white-space:nowrap;}
  .island-app footer{display:none;}
  dialog{padding:20px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;}
  dialog button{min-height:44px;font-size:14px;}
  dialog select{min-height:44px;font-size:16px;max-width:100%;}
  dialog input[type=range]{min-height:44px;min-width:0;width:52%;}
  dialog input[type=checkbox]{width:20px;height:20px;flex-shrink:0;}
  dialog label{min-height:44px;}
  dialog .dialog-head{gap:12px;}
  dialog .dialog-head button{min-width:44px;}
  dialog .danger{width:100%;}
  .island-app .island:fullscreen{height:100dvh;}
  .island-app .island:fullscreen #scene{width:100%;height:100%;max-height:none;object-fit:contain;}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
  .island-app{padding-bottom:0;padding-right:calc(136px + env(safe-area-inset-right));}
  .island-app header{min-height:58px;padding:6px 16px;}
  .island-app header button{min-height:44px;}
  .island-app .edition,.island-app .intro,.island-app .footnote,.island-app footer{display:none;}
  .island-app main{padding:10px 12px 12px;}
  .island-app .island{height:calc(100svh - 82px);}
  .island-app #scene{width:100%;height:100%;object-fit:contain;}
  .island-app .scene-top,.island-app .scene-bottom{padding:10px 14px;font-size:11px;}
  .island-app .coordinates{display:none;}
  .island-app .toolbar{position:fixed;z-index:10;top:0;right:0;bottom:0;left:auto;width:calc(136px + env(safe-area-inset-right));margin:0;padding:12px calc(12px + env(safe-area-inset-right)) 12px 12px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:center;background:#10282df5;border:0;border-left:1px solid var(--line);}
  .island-app .tools{display:contents;}
  .island-app .toolbar button{min-height:48px;font-size:13px;padding:10px 4px;}
}
/* Isolated event previews keep the scene visible without duplicating app controls. */
.island-app.event-demo{height:100dvh;overflow:hidden;padding:0!important;background:#10282d}
.event-demo header,.event-demo .intro,.event-demo .toolbar,.event-demo .footnote,.event-demo footer{display:none}
.island-app.event-demo main{height:100%;width:100%;max-width:none;padding:0;margin:0}
.island-app.event-demo .island{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
.island-app.event-demo #scene{width:100%;height:100%;object-fit:cover}
.event-demo .scene-top{font-size:10px;padding:12px}.event-demo .scene-bottom{font-size:10px;padding:20px 12px 12px}.event-demo .coordinates{display:none}

/* Native fullscreen and the mobile fallback share the same controls and layout. */
.exit-fullscreen{position:fixed;z-index:30;top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));min-height:44px;padding:9px 14px;background:#10282de8;color:var(--ink);border-color:#718581;border-radius:9px}
.exit-fullscreen[hidden]{display:none}
body.island-app.immersive{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;padding:0;overflow:hidden;overscroll-behavior:none;background:#10282d}
.island-app.immersive header,.island-app.immersive .intro,.island-app.immersive .footnote,.island-app.immersive footer{display:none}
.island-app.immersive main{width:100%;height:100%;max-width:none;padding:0;margin:0}
.island-app.immersive .island{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;background:#10282d}
.island-app.immersive #scene{width:100%;height:100%;object-fit:contain;max-height:none}
.island-app.immersive .scene-top{top:env(safe-area-inset-top);padding:20px 16px;font-size:11px}
.island-app.immersive #weather,.island-app.immersive .coordinates{display:none}
.island-app.immersive .scene-bottom{bottom:calc(76px + env(safe-area-inset-bottom));padding:16px;font-size:12px;background:none}
.island-app.immersive .toolbar{position:fixed;z-index:20;top:auto;bottom:0;left:0;right:0;width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-content:normal;padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));margin:0;background:#10282de0;border:0;backdrop-filter:blur(12px)}
.island-app.immersive .tools{display:contents}
.island-app.immersive .toolbar button{min-height:48px;min-width:0;padding:8px 3px;font-size:12px;white-space:nowrap;border-radius:8px;background:#19363b}
.island-app.immersive #count{margin:0 2px}
@media(max-width:650px) and (orientation:portrait){
 .island-app.immersive #scene{height:min(100%,120vw);object-fit:cover}
}

#awakeIndicator{color:#f2e9b4;font-size:10px}#awakeIndicator[hidden]{display:none}.island-app.immersive #awakeIndicator{position:absolute;top:64px;right:16px}

/* The phone canvas is rendered to its viewport; the camera supplies the crop. */
.island-app.follow-camera #scene{width:100%;height:100%;max-height:none;object-fit:fill;flex:none}

/* Phone framing switch stays separate from browser fullscreen. */
#viewToggle[hidden]{display:none}
.island-app.overview-camera #scene{width:100%;height:100%;max-height:none;object-fit:contain;flex:none}
@media(max-width:650px){.island-app .toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}.island-app .toolbar button{padding:8px 3px;font-size:12px}}
.island-app.immersive .toolbar:has(#viewToggle:not([hidden])){grid-template-columns:repeat(5,minmax(0,1fr))}