.beach-page { background:#f6f2eb; color:#233a3c; padding-bottom:1px; }
.beach-intro { padding-top:32px; }
.beach-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin:30px 0; }
.beach-heading h1 { font:600 clamp(32px,3.5vw,52px)/1.12 var(--serif); letter-spacing:-.035em; margin:12px 0 0; color:#203b3d; }
.beach-heading > p { font-size:15px; line-height:1.7; color:#556364; margin:0; }
.beach-page .eyebrow { color:#855b31; font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.beach-versions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; border-top:1px solid #d9d7cf; padding:17px 0 22px; font-size:12px; }
.beach-versions span[aria-current] { font-weight:700; color:#233a3c; }
.beach-versions a { color:#566566; text-underline-offset:4px; }
.beach-versions a:last-child { margin-left:auto; }
.beach-experience { max-width:1320px; margin:0 auto; background:#fffdf8; border:1px solid #d6d4ca; box-shadow:0 15px 40px #2536360b; }
.beach-viewport { height:680px; height:clamp(480px,70vh,800px); position:relative; overflow:hidden; background:#272d32; }
.beach-viewport canvas,.beach-poster { position:absolute; inset:0; width:100%; height:100%; display:block; }
.beach-viewport canvas { touch-action:pan-y; }
.beach-viewport canvas:focus,.beach-viewport canvas:focus-visible { outline:none; }
.beach-viewport:has(canvas:focus-visible) .beach-scene-label { text-decoration:underline; text-underline-offset:4px; }
.beach-poster { object-fit:contain; }
.beach-experience[data-loaded="true"] .beach-poster { visibility:hidden; }
.beach-scene-label { position:absolute; left:24px; top:23px; z-index:2; pointer-events:none; font-size:11px; letter-spacing:.08em; color:#fff4dd; text-shadow:0 1px 5px #0009; display:flex; gap:9px; align-items:center; }
.beach-scene-label > span:last-child { opacity:.78; }
.beach-live-dot { width:5px; height:5px; border-radius:50%; background:#ffe7b5; box-shadow:0 0 8px #f7d288; }
.beach-scene-bottom { position:absolute; bottom:18px; left:24px; right:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none; z-index:2; font-size:11px; color:#fff7e8; text-shadow:0 1px 5px #000; }
.beach-scene-bottom button { pointer-events:auto; background:#192e32c9; border:1px solid #ffffff55; border-radius:4px; color:white; min-height:38px; padding:8px 12px; font:500 11px var(--sans); cursor:pointer; }
.beach-loading { position:absolute; inset:45% 20px auto; text-align:center; color:#fff7e8; font-size:14px; z-index:2; }
.beach-loading[hidden],.beach-error[hidden],.beach-motion-note[hidden] { display:none; }
.beach-error { position:absolute; left:24px; right:24px; bottom:70px; background:#fff8ea; color:#293c40; border-radius:4px; padding:16px; z-index:3; font-size:13px; }
.beach-console { display:grid; grid-template-columns:minmax(250px,.8fr) 1.6fr; gap:32px; padding:26px 28px 18px; }
.beach-time { padding-right:30px; border-right:1px solid #deddd4; }
.beach-time-title { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:12px; margin:0 0 12px; }
.beach-time-title label { font-weight:700; }
.beach-time-title output { color:#855b31; font-size:11px; }
.beach-time input { width:100%; margin:8px 0; accent-color:#93652e; cursor:pointer; min-height:24px; }
.beach-time-marks { display:flex; justify-content:space-between; font-size:10px; color:#687473; }
.beach-action-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.beach-controls button { border:1px solid #c9d0c9; border-radius:4px; background:transparent; color:#2e4647; font:500 11px/1.2 var(--sans); padding:10px 12px; min-height:38px; cursor:pointer; }
.beach-controls button:hover { background:#e7eae1; border-color:#8d9b93; }
.beach-controls button[aria-pressed="true"] { background:#e5e8dc; border-color:#94a38e; }
.beach-controls .beach-primary { background:#244b4c; color:#fff; border-color:#244b4c; min-width:125px; }
.beach-controls .beach-primary:hover,.beach-controls .beach-primary[aria-pressed="true"] { background:#173839; color:#fff; border-color:#244b4c; }
.beach-controls button:disabled { opacity:.45; cursor:wait; }
.beach-page :focus-visible { outline:3px solid #b67727; outline-offset:3px; }
.beach-help,.beach-motion-note,.beach-nojs { text-align:center; font-size:11px; line-height:1.6; color:#697672; padding:0 20px 17px; margin:0; }
.beach-motion-note { color:#795226; }
#beach-touch,.beach-touch-help { display:none; }
.beach-notes { display:grid; grid-template-columns:.8fr 1.6fr; gap:50px; padding-block:65px 75px; }
.beach-notes h2 { font:600 33px/1.17 var(--serif); color:#234142; margin:14px 0; letter-spacing:-.02em; }
.beach-note-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.beach-note-grid p { font-size:13px; line-height:1.8; color:#606e6b; }
.beach-note-grid strong { display:block; font-size:13px; color:#2e4647; margin-bottom:10px; }
.beach-experience:fullscreen { max-width:none; width:100%; height:100%; overflow:auto; border:0; display:flex; flex-direction:column; }
.beach-experience:fullscreen .beach-viewport { flex:1; min-height:200px; height:auto; }
.no-js .beach-loading,.no-js .beach-console,.no-js .beach-scene-bottom,.no-js .beach-help { display:none; }
.no-js .site-header { position:static; }
@media(pointer:coarse) { #beach-touch,.beach-touch-help { display:inline-block; } .beach-mouse-help { display:none; } .beach-controls button { min-height:44px; } }
@media(max-width:1000px) { .beach-heading { display:block; } .beach-heading > p { margin-top:20px; } .beach-console { grid-template-columns:1fr; gap:20px; } .beach-time { border-right:0; padding:0; max-width:600px; width:100%; } .beach-notes { grid-template-columns:1fr; gap:14px; } }
@media(max-width:600px) { .beach-intro { padding-top:20px; } .beach-heading { margin-top:24px; } .beach-heading h1 { font-size:36px; } .beach-heading > p { font-size:13px; } .beach-versions { gap:12px 18px; font-size:11px; } .beach-versions a:last-child { margin-left:0; } .beach-viewport { height:510px; } .beach-console { padding:20px 16px 12px; } .beach-scene-label { left:16px; top:18px; } .beach-scene-bottom { left:16px; right:16px; } .beach-help { font-size:10px; } .beach-controls button { padding:9px 10px; } .beach-note-grid { grid-template-columns:1fr; gap:8px; } .beach-notes { padding-block:40px; } .beach-note-grid p { margin:8px 0; } }