@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Serif+KR:wght@400;500;600&display=swap');
:root{color-scheme:dark;font-family:'DM Sans','Noto Sans KR',sans-serif;color:#eff8f5;background:#062731}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-x:hidden}button{font:inherit;cursor:pointer}#world,.vignette{position:fixed;inset:0;z-index:-2}canvas{display:block;width:100%;height:100%}.vignette{z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,22,29,.7),rgba(3,28,38,.04) 78%),linear-gradient(0deg,rgba(3,24,31,.85),transparent 50%),linear-gradient(180deg,rgba(1,18,24,.4),transparent 25%)}.header{height:90px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1b}.brand{border:0;background:transparent;color:#fff;display:flex;gap:12px;align-items:center;text-align:left;font-size:15px;font-weight:700;letter-spacing:.03em}.brandmark{font-size:34px;color:#a5d3c9;line-height:1}.brand small{display:block;font-size:8px;letter-spacing:.18em;color:#9bbcb9;margin-top:3px}.header-right{display:flex;gap:24px;align-items:center}.pilot{font-size:10px;letter-spacing:.17em;color:#b4d0cc}.icon-button{width:40px;height:40px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font-size:19px}.landing{padding:0 6% 36px;max-width:1600px;margin:auto}.intro{padding-top:clamp(70px,11vh,125px);min-height:380px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;color:#acd9cb;text-transform:uppercase}.eyebrow span{display:inline-block;width:7px;height:7px;background:#b7e7c5;border-radius:50%;margin-right:9px;box-shadow:0 0 15px #a6efca}h1,h2{font-family:'Noto Serif KR',serif;font-weight:400;margin:0}.intro h1{font-size:clamp(36px,4.5vw,65px);line-height:1.3;letter-spacing:-.055em;margin:24px 0}.intro h1 em{font-style:normal;color:#aee1d5}.lede{font-size:14px;color:#c0d8d5;line-height:1.9}.choose{margin-top:24px}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.section-top h2{font-size:23px}.section-top>p,.footnote{color:#b1c9c5;font-size:11px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{position:relative;min-height:180px;border:1px solid #d4f5ed40;border-radius:13px;background:linear-gradient(140deg,#8fb5b525,#062c39aa);color:white;padding:21px;text-align:left;transition:.25s}.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:#b5e8d8;background:linear-gradient(135deg,#b8e9df35,#073642dd)}.card .num{font-size:10px;letter-spacing:.16em;color:#acd7ca}.card .tag{position:absolute;right:17px;top:17px;border:1px solid #c5e8df55;border-radius:20px;padding:5px 9px;font-size:9px;color:#c6e4de}.card h3{font-family:'Noto Serif KR',serif;font-size:22px;font-weight:500;margin:30px 0 5px}.card p{font-size:12px;color:#c6dcd9;margin:0}.card .arrow{position:absolute;right:20px;bottom:21px;font-size:23px;color:#b3e1d4}.footnote{margin-top:16px}.hidden{display:none!important}.dive-ui{height:calc(100vh - 90px);position:relative;padding:7vh 6% 30px}.dive-heading h1{font-size:clamp(32px,4vw,52px);margin:20px 0 8px}.dive-heading>p:not(.eyebrow){color:#c3dbd7;font-size:13px}.dive-heading a{display:inline-block;color:#b7d9d1;font-size:11px;margin-top:8px;text-decoration:none;border-bottom:1px solid #9fcfc5}.statusbar{position:absolute;top:7vh;right:6%;text-align:right}.modes{display:inline-flex;padding:4px;background:#071f29b8;border:1px solid #b6dad250;border-radius:40px}.modes button{border:0;border-radius:30px;padding:10px 15px;color:#c5d9d4;background:transparent;font-size:12px}.modes button.active{background:#cbe8dc;color:#10383a}.statusbar p{font-size:11px;color:#c4dfd8}.dive-bottom{position:absolute;bottom:34px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:end}.hint{display:flex;gap:12px;color:#edf7f4;font-size:12px}.hint small{display:block;color:#b8d1cb;margin-top:5px;font-size:11px}.hint-icon{font-size:25px}.actions{display:flex;gap:8px}.actions button{border:1px solid #bbd9d055;background:#072631b8;color:white;border-radius:30px;padding:13px 19px;font-size:12px}.actions button:disabled{opacity:.35;cursor:not-allowed}.actions #surface{background:#d3eae0;color:#123a3a;border-color:transparent;margin-left:8px}.actions #surface span{margin-left:16px}.signal-notice{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);background:#0a3541bb;border-radius:30px;padding:10px 18px;opacity:0;transition:opacity .4s;pointer-events:none;font-size:14px}.signal-notice.show{opacity:1}.audio-panel{position:fixed;right:6%;top:78px;width:250px;background:#082f39ed;border:1px solid #a7d4c755;border-radius:12px;padding:18px;z-index:5;box-shadow:0 12px 40px #0004}.audio-panel strong{font-size:14px}.audio-panel label{display:block;font-size:11px;margin-top:18px;color:#d1e6df}.audio-panel input{width:100%;margin-top:10px;accent-color:#bce7d2}.audio-panel p{font-size:10px;color:#a9c8bf}.error{position:fixed;top:110px;left:6%;padding:12px 16px;background:#632d2d;border-radius:8px}
#world{background:linear-gradient(var(--water-tint,rgba(40,167,180,.08)),var(--water-tint,rgba(40,167,180,.08))),var(--ocean-image,url('/assets/ocean-hero.png')) center center / cover no-repeat;transition:background 1s ease}.vignette{background:linear-gradient(90deg,rgba(1,31,46,.68),rgba(2,33,49,.09) 72%),linear-gradient(0deg,rgba(3,29,38,.88),transparent 55%),linear-gradient(180deg,rgba(2,33,45,.38),transparent 25%)}.card{backdrop-filter:blur(13px);background:linear-gradient(145deg,rgba(33,99,111,.48),rgba(4,36,47,.78));box-shadow:0 12px 40px #00151b33}.card:hover,.card:focus-visible{background:linear-gradient(145deg,rgba(55,132,139,.66),rgba(5,54,65,.88))}.dive-heading,.hint,.statusbar,.actions{text-shadow:0 2px 12px #00252d88}
.footnote a{color:#d7f1e8;margin-left:8px}.dive-heading .scene-note{font-size:10px!important;color:#c5dad9!important;opacity:.8;margin-top:12px}
.dive-ui{user-select:none;touch-action:none}
body.diving .vignette{background:linear-gradient(90deg,rgba(1,27,42,.53),rgba(2,33,49,.02) 62%),linear-gradient(0deg,rgba(3,29,38,.52),transparent 43%),linear-gradient(180deg,rgba(2,33,45,.25),transparent 25%)}
.gear-screen{position:fixed;inset:0;z-index:4;overflow:auto;min-height:100dvh}.gear-background,.gear-shade{position:fixed;inset:0;pointer-events:none}.gear-background{background:url('/assets/dive-boat.png') center/cover}.gear-shade{background:linear-gradient(90deg,rgba(4,29,40,.94) 0%,rgba(5,40,52,.86) 38%,rgba(4,39,51,.12) 100%),linear-gradient(0deg,rgba(3,32,43,.4),transparent 55%)}.gear-content{position:relative;width:min(610px,100%);padding:38px 6% 45px}.gear-back{border:0;background:transparent;color:#c6e1dc;font-size:12px;padding:0;margin-bottom:56px}.gear-content h1{font-size:clamp(34px,3.6vw,53px);line-height:1.35;letter-spacing:-.045em;margin:18px 0}.gear-content h1 em{font-style:normal;color:#b8e8dd}.gear-intro{font-size:13px;color:#c2dcd9;line-height:1.7}.gear-items{display:grid;gap:8px;margin:28px 0 25px}.gear-item{display:flex;align-items:center;text-align:left;gap:14px;border:1px solid #c0e4db38;background:#082e39b8;border-radius:12px;padding:13px 14px;color:white;min-height:70px}.gear-item:hover,.gear-item[aria-pressed=true]{background:#a7d8cc32;border-color:#a4dfd1}.gear-symbol{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#bfede422;font-size:19px;color:#d6f2e9}.gear-item strong,.gear-item small{display:block}.gear-item strong{font-size:13px}.gear-item small{font-size:11px;color:#afcbc5;margin-top:4px}.gear-tick{margin-left:auto;border:1px solid #bad8d069;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;color:transparent}.gear-item[aria-pressed=true] .gear-tick{background:#c9eade;color:#16484b;border-color:#c9eade}.entry-options{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#c5deda}.entry-options>div{display:flex;border:1px solid #c6e2db4a;border-radius:30px;padding:3px;background:#082e39b8}.entry-options button{border:0;background:transparent;border-radius:25px;color:#bfd8d4;font-size:11px;padding:9px 13px}.entry-options button.active{background:#ccebe0;color:#164347}.gear-caption{font-size:10px;line-height:1.6;color:#aecdc5}.enter-water{width:100%;margin-top:18px;padding:15px 20px;border:0;border-radius:30px;background:#d0ece0;color:#123d3e;font-weight:700;text-align:left}.enter-water span{float:right}.enter-water:disabled{opacity:.48;cursor:not-allowed}.entry-effect{position:fixed;inset:0;z-index:20;overflow:hidden;background:#00647b}.entry-scene{position:absolute;inset:-15%;background:url('/assets/dive-boat.png') center/cover}.entry-splash{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 48%,#e7ffffde 0%,#78d8eab8 35%,#076a8abf 90%)}.entry-caption{position:absolute;bottom:9%;width:100%;text-align:center;color:white;font-size:13px;letter-spacing:.1em;text-shadow:0 2px 9px #002e3b}.entry-effect.backroll .entry-scene{animation:backroll 2.2s ease-in forwards}.entry-effect.stride .entry-scene{animation:stride 2.2s ease-in forwards}.entry-effect .entry-splash{animation:splash 2.2s ease-out forwards}@keyframes backroll{0%{transform:scale(1)}45%{transform:scale(1.1) rotate(0)}85%,100%{transform:scale(1.5) rotate(-155deg)}}@keyframes stride{0%{transform:scale(1)}45%{transform:scale(1.1) translateY(-2%)}90%,100%{transform:scale(1.8) translateY(-15%)}}@keyframes splash{0%,40%{opacity:0}55%{opacity:.85}100%{opacity:1}}@media(max-width:700px), (orientation:landscape) and (max-height:500px){.gear-shade{background:linear-gradient(180deg,rgba(3,29,41,.75),rgba(3,35,46,.93) 70%)}.gear-content{padding:24px 5% 38px}.gear-back{margin-bottom:28px}.gear-content h1{font-size:34px}.gear-items{margin:20px 0}.gear-item{min-height:62px}.entry-options{align-items:flex-start;flex-direction:column}.entry-options>div{width:100%}.entry-options button{flex:1}.gear-background{background-position:55% center}}@media(prefers-reduced-motion:reduce){.entry-effect .entry-scene,.entry-effect .entry-splash{animation-duration:.2s!important}}
.entry-effect:not(.hidden){animation:entryfade 2.2s ease-in forwards}@keyframes entryfade{0%,75%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.entry-effect:not(.hidden){animation-duration:.3s}}
.mobile-move{display:none}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){.header{height:70px;padding:0 5%}.pilot{display:none}.landing{padding:0 5% 30px}.intro{padding-top:58px;min-height:310px}.intro h1{font-size:37px}.section-top>p{display:none}.cards{grid-template-columns:1fr;gap:9px}.card{min-height:126px;padding:16px}.card h3{margin:15px 0 4px;font-size:19px}.card .arrow{bottom:15px}.dive-ui{height:calc(100dvh - 70px);padding:5vh 5%;pointer-events:none}.dive-ui>*{pointer-events:auto}.dive-heading h1{font-size:32px}.statusbar{top:auto;bottom:114px;right:5%;left:5%;text-align:left}.statusbar p{margin:8px 6px}.dive-bottom{left:5%;right:5%;bottom:25px}.hint{display:none}.actions{width:100%}.actions button{padding:12px 15px}.actions #surface{margin-left:auto}.audio-panel{right:5%;top:63px}.mobile-move{display:flex;position:absolute;right:5%;bottom:180px;gap:5px}.mobile-move button{background:#082d38b8;color:white;border:1px solid #a6d5cb66;border-radius:50%;width:40px;height:40px;touch-action:none}}
/* Cozy illustrated edition: soft, legible controls and a handcrafted ocean palette. */
:root{color-scheme:light;color:#173f49;background:#b7e5df;font-family:'DM Sans','Noto Sans KR',sans-serif}
#world{background:linear-gradient(90deg,#bce9e9a6,#c5efeb14),url('/assets/cozy-ocean.png') center/cover no-repeat}
.vignette{background:linear-gradient(90deg,#effbf5b8,#f0faf140 62%,transparent),linear-gradient(0deg,#c6e9e6bb,transparent 58%)}
.header{border-color:#ffffff72}.brand{color:#174c54}.brandmark{color:#248b8b}.brand small,.pilot{color:#356d72}.icon-button{background:#f8fffaab;color:#245a5d;border-color:#ffffffb0}
h1,h2,.card h3{font-family:'Noto Sans KR',sans-serif;font-weight:700;letter-spacing:-.05em}.eyebrow{color:#287d7e}.eyebrow span{background:#54aaa1;box-shadow:none}.intro h1 em{color:#198e92}.lede,.section-top>p,.footnote{color:#315e61}.footnote a{color:#23666c}
.card{background:#f7fff4d9;border:2px solid #ffffffd9;color:#184d55;border-radius:24px;box-shadow:0 9px 28px #286c6e17;backdrop-filter:blur(12px)}.card:hover,.card:focus-visible{background:#ffffffed;border-color:#8bd3c7}.card .num,.card p,.card .arrow{color:#397c80}.card .tag{border:0;background:#dcefe7;color:#417d77}.card h3{font-size:21px}
.gear-background,.entry-scene{background-image:url('/assets/cozy-ocean.png')}.gear-shade{background:linear-gradient(90deg,#e9f8edfa 0%,#e7f7edf2 37%,#d5f5e74d 100%)}.gear-content h1,.gear-back{color:#234f54}.gear-content h1 em{color:#228e8d}.gear-intro,.gear-caption,.entry-options{color:#456f6d}.gear-item{background:#ffffffd9;border:2px solid #fff;color:#27565a;border-radius:16px}.gear-item:hover,.gear-item[aria-pressed=true]{background:#e1f4e8;border-color:#86cbb8}.gear-item small{color:#6c8b82}.gear-symbol{background:#d6eee7;color:#388b81}.gear-tick{border-color:#9acbbb}.gear-item[aria-pressed=true] .gear-tick{background:#4da999;color:white}.entry-options>div{background:#d9eee4;border-color:#f7fff9}.entry-options button{color:#507b74}.entry-options button.active{background:#fff;color:#24766e}.enter-water{background:#278f88;color:#fff}.enter-water:disabled{background:#9bbcb4}.entry-caption{color:white}
body.diving{color:#fff}body.diving .header{border-color:#ffffff42}body.diving .brand,body.diving .icon-button{color:#fff}body.diving .brand small,body.diving .pilot{color:#d0efeb}body.diving .icon-button{background:#1a626b80;border-color:#ffffff66}body.diving .eyebrow{color:#c6f5e3}body.diving .vignette{background:linear-gradient(90deg,#153f4b70,transparent 65%),linear-gradient(0deg,#174e5960,transparent 45%)}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){.gear-shade{background:linear-gradient(180deg,#eaf9f2ed,#e4f7edfa 70%)}.card{border-radius:18px}}
.nickname-label{display:block;font-size:13px;font-weight:700;color:#315e61;margin-top:30px}.nickname-row{display:flex;gap:8px;margin-top:10px}.nickname-row input{min-width:0;flex:1;border:2px solid #fff;border-radius:14px;background:#fffffff0;color:#174d54;padding:15px;font:600 16px 'Noto Sans KR',sans-serif}.nickname-row button{border:0;border-radius:14px;background:#cceae0;color:#256e68;padding:0 16px;font-size:12px;font-weight:700}.entry-options{margin-top:25px}
.entry-status{position:fixed;left:50%;bottom:12%;transform:translateX(-50%);z-index:10;background:#f7fff3e8;color:#24545a;border:2px solid #fff;border-radius:22px;padding:15px 25px;min-width:240px;text-align:center;box-shadow:0 10px 30px #123b4e33}.entry-status span,.entry-status strong{display:block}.entry-status span{font-size:10px;letter-spacing:.1em;color:#5b9b91;margin-bottom:5px}.entry-status strong{font-size:16px}.entry-splash-3d{position:fixed;inset:0;z-index:9;pointer-events:none;background:radial-gradient(circle,#e8ffffab,#85dfec9c 45%,#67c5d75c);animation:waterflash 1s ease-out forwards}@keyframes waterflash{from{opacity:.95}to{opacity:0}}
.hide-ui{position:absolute;right:6%;bottom:100px;border:1px solid #c8e9e7a0;background:#104d5a99;color:white;border-radius:30px;padding:10px 16px;font-size:11px}.show-ui{position:fixed;z-index:30;right:20px;bottom:20px;border:1px solid #ffffff88;background:#1b6d77a8;color:#fff;width:42px;height:42px;border-radius:50%;font-size:21px}.immersive .header,.immersive .dive-ui,.immersive .audio-panel,.immersive .entry-status{visibility:hidden}.immersive .vignette{background:none!important}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){.hide-ui{bottom:180px;right:auto;left:5%}.nickname-label{margin-top:22px}.entry-status{bottom:25%;width:max-content;max-width:90%}}

.drift{position:absolute;right:6%;bottom:145px;border:1px solid #c8e9e7a0;background:#104d5a99;color:white;border-radius:30px;padding:10px 16px;font-size:11px}.drift[aria-pressed=true]{background:#c9f1e3;color:#225d5d}.drift span{margin-left:6px;opacity:.8}@media(max-width:700px), (orientation:landscape) and (max-height:500px){.drift{bottom:226px;right:auto;left:5%}}

.reef-hook{position:absolute;right:6%;bottom:190px;border:1px solid #c8e9e7a0;background:#104d5a99;color:white;border-radius:30px;padding:10px 16px;font-size:11px}.reef-hook[aria-pressed=true]{background:#f6d69a;color:#55472b}.reef-hook:disabled{opacity:.45;cursor:not-allowed}.reef-hook span{margin-left:6px;opacity:.8}@media(max-width:700px), (orientation:landscape) and (max-height:500px){.reef-hook{bottom:272px;right:auto;left:5%}}

.current-settings{position:absolute;right:6%;bottom:235px;padding:10px 13px;border-radius:14px;background:#0e4b59e8;color:white;font-size:11px;display:grid;gap:8px}.current-settings label{display:flex;align-items:center;justify-content:space-between;gap:8px}.current-settings select{border:0;border-radius:8px;padding:5px;background:#e6f8ee;color:#234d50}.current-settings input{width:90px;accent-color:#b9ead6}@media(max-width:700px), (orientation:landscape) and (max-height:500px){.current-settings{bottom:317px;left:5%;right:auto}}

.boat-options{margin-top:28px}.boat-options + .entry-options{margin-top:12px}.boat-options button[aria-pressed=true]{background:#fff;color:#24766e}

.current-info{position:absolute;right:6%;bottom:231px;margin:0;color:#e2f4ea;font-size:10px;text-align:right}.face-view{position:absolute;right:6%;bottom:280px;border:1px solid #c8e9e7a0;background:#104d5a99;color:white;border-radius:30px;padding:10px 16px;font-size:11px}.face-view[aria-pressed=true]{background:#c9f1e3;color:#225d5d}@media(max-width:700px), (orientation:landscape) and (max-height:500px){.current-info{bottom:310px;left:5%;right:auto;text-align:left;font-size:10px}.face-view{bottom:350px;left:5%;right:auto}.mobile-move button{width:44px;height:44px}.dive-heading .scene-note{display:none}.dive-heading a{margin-top:2px}.dive-heading h1{margin:10px 0 4px}.dive-heading>p:not(.eyebrow){margin:4px 0}.gear-content{padding-bottom:48px}}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){.hide-ui{bottom:398px;left:5%;right:auto}}

.entry-status small{display:block;margin-top:6px;font-size:10px;color:#608780}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){.mobile-move{bottom:205px}}
.setup-select,.appearance-grid select{width:100%;border:2px solid #fff;border-radius:12px;background:#fffffff0;color:#24565a;padding:11px 12px;font:600 13px 'Noto Sans KR',sans-serif}.setup-select{margin-top:9px}.appearance-setup{margin-top:22px;padding:16px;border:2px solid #ffffffbd;border-radius:20px;background:#f5fff9cc;color:#24565a}.appearance-head{display:flex;justify-content:space-between;align-items:center}.appearance-head strong,.appearance-head small{display:block}.appearance-head strong{font-size:14px}.appearance-head small{margin-top:5px;font-size:11px;color:#62847d}.appearance-head canvas{width:170px;height:132px;border-radius:16px;background:linear-gradient(150deg,#d2eeea,#e9faf3)}.appearance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.appearance-grid label{font-size:11px;color:#547b75;font-weight:600}.appearance-grid select{margin-top:5px}.gear-content .nickname-label{margin-top:17px}@media(max-width:700px), (orientation:landscape) and (max-height:500px){.appearance-head canvas{width:135px;height:105px}.appearance-setup{padding:12px}.appearance-grid{gap:8px}.gear-content h1{font-size:28px;margin:12px 0}.gear-back{margin-bottom:14px}.gear-content .nickname-label{margin-top:14px}}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){.gear-content{padding-bottom:100px}.gear-screen .enter-water{position:fixed;left:5%;bottom:12px;width:90%;z-index:6;box-shadow:0 6px 24px #1d6a6933}}

/* Compact touch controls: the reef remains visible until the user opens the menu. */
.mobile-controls,.mobile-hint{display:none}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){
 body.diving{touch-action:none}
 body.diving .header{height:54px}
 body.diving .brand{font-size:12px}
 body.diving .brand small{display:none}
 body.diving .dive-ui{height:calc(100dvh - 54px);padding:12px 5%}
 body.diving .dive-heading h1{font:700 16px 'DM Sans','Noto Sans KR',sans-serif;margin:0;color:#fff}
 body.diving .dive-heading>p,body.diving .dive-heading>a{display:none!important}
 body.diving .mobile-move{display:none}
 body.diving .mobile-controls{display:block;position:absolute;right:5%;top:10px;border:1px solid #cceeea88;border-radius:24px;background:#123d4ac9;color:white;padding:10px 14px;font-size:12px}
 body.diving .mobile-hint{display:block;position:absolute;top:40px;left:5%;margin:0;color:#e7f6f1;font-size:10px;opacity:.78;pointer-events:none}
 body.diving .statusbar,body.diving .reef-hook,body.diving .drift,body.diving .current-info,body.diving .face-view,body.diving .hide-ui,body.diving .dive-bottom{visibility:hidden}
 body.diving.mobile-controls-open .dive-ui:before{content:'';position:fixed;z-index:0;bottom:0;left:0;right:0;height:285px;background:linear-gradient(0deg,rgba(5,36,46,.97),rgba(8,49,60,.91));border-radius:22px 22px 0 0;pointer-events:none}
 body.diving.mobile-controls-open .statusbar,body.diving.mobile-controls-open .reef-hook,body.diving.mobile-controls-open .drift,body.diving.mobile-controls-open .current-info,body.diving.mobile-controls-open .face-view,body.diving.mobile-controls-open .hide-ui,body.diving.mobile-controls-open .dive-bottom{visibility:visible;z-index:1}
 body.diving.mobile-controls-open .statusbar{position:fixed;bottom:207px;left:5%;right:5%;top:auto}
 body.diving.mobile-controls-open .statusbar p{font-size:10px;margin:4px}
 body.diving.mobile-controls-open .current-info{position:fixed;bottom:176px;left:6%;right:auto}
 body.diving.mobile-controls-open .reef-hook{position:fixed;bottom:122px;left:5%;right:auto}
 body.diving.mobile-controls-open .drift{position:fixed;bottom:122px;left:auto;right:5%}
 body.diving.mobile-controls-open .face-view{position:fixed;bottom:74px;left:5%;right:auto}
 body.diving.mobile-controls-open .hide-ui{position:fixed;bottom:74px;left:auto;right:5%}
 body.diving.mobile-controls-open .dive-bottom{position:fixed;bottom:16px;left:5%;right:5%}
 body.diving.mobile-controls-open .actions button{padding:10px 13px}
 body.diving .signal-notice{top:25%;white-space:nowrap;font-size:12px}
}
.air-meter{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:min(380px,38vw);color:#eaf8f4;font-size:10px;pointer-events:none;z-index:2;text-shadow:0 1px 5px #143a46}
.air-meter-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px}
.air-track{height:6px;background:#e7faf477;border-radius:10px;overflow:hidden}
.air-fill{height:100%;width:100%;background:#d6f0da;border-radius:10px;transition:width .4s linear}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){body.diving .air-meter{position:fixed;top:56px;left:5%;transform:none;width:90%;font-size:10px}body.diving .dive-heading h1{margin-top:31px}body.diving .mobile-controls{top:38px}body.diving .mobile-hint{top:73px} }
html[data-entry=ascent] .entry-status small,html[data-entry=tank-swap] .entry-status small,html[data-entry=tank-descent] .entry-status small{display:none}
.audio-panel select{display:block;width:100%;margin-top:8px;border:1px solid #a7d4c755;border-radius:8px;padding:8px;background:#123f49;color:#eaf8f4;font:inherit}
.vertical-controls{display:none}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){body.diving .vertical-controls{display:flex;position:fixed;left:5%;bottom:max(24px,env(safe-area-inset-bottom));gap:8px;z-index:4}body.diving .vertical-controls button{touch-action:none;min-width:68px;min-height:44px;border:1px solid #cceeea88;border-radius:24px;background:#123d4ac9;color:#fff;font:600 13px 'Noto Sans KR',sans-serif}body.diving.mobile-controls-open .vertical-controls{visibility:hidden}}

.action-menu{display:flex;gap:8px}.action-menu[hidden]{display:none}.actions{position:relative}#actionToggle{white-space:nowrap}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){body.diving .dive-bottom{visibility:visible;position:fixed;left:auto;right:5%;bottom:max(24px,env(safe-area-inset-bottom));z-index:4}body.diving .actions{width:auto}body.diving .actions #surface{display:none}body.diving .action-menu{position:absolute;right:0;bottom:54px;display:flex;flex-direction:row;align-items:stretch;background:#103c49ee;border:1px solid #cceeea77;border-radius:18px;padding:7px;min-width:max-content;gap:5px}body.diving .action-menu[hidden]{display:none}body.diving .action-menu button{white-space:nowrap;text-align:left}body.diving.mobile-controls-open .dive-bottom{left:5%;right:5%;bottom:16px}body.diving.mobile-controls-open .actions #surface{display:block}body.diving.mobile-controls-open .vertical-controls{visibility:hidden}}

.social-toggle{position:absolute;top:9vh;right:6%;border:1px solid #cceeea88;border-radius:24px;background:#123d4ac9;color:white;padding:10px 14px;font-size:12px}.statusbar{top:15vh}.social-toggle[aria-pressed=false]{opacity:.78}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){body.diving .social-toggle{position:fixed;top:135px;right:5%;z-index:4;min-height:40px}body.diving.mobile-controls-open .social-toggle{visibility:hidden}body.diving .action-menu{flex-wrap:wrap;max-width:90vw;min-width:0;width:max-content}body.diving .action-menu button{flex:0 0 auto}}

@media(max-width:700px), (orientation:landscape) and (max-height:500px){body.diving.mobile-controls-open .dive-bottom{visibility:hidden}body.diving .action-menu{right:0;bottom:54px;width:min(300px,90vw);justify-content:flex-end}body.diving .action-menu button{max-width:100%}}

/* Stacked notices do not cover the lower movement and action buttons. */
.signal-notice{position:fixed;left:50%;top:auto;bottom:104px;transform:translateX(-50%);width:min(360px,85vw);display:flex;flex-direction:column;align-items:center;gap:6px;background:none;padding:0;opacity:1;z-index:6;white-space:normal;pointer-events:none}
.notice-card{max-width:100%;padding:9px 14px;background:#0a3541e8;border:1px solid #caeee54d;border-radius:18px;color:#fff;font-size:12px;line-height:1.35;text-align:center;overflow-wrap:anywhere}
@media(max-width:700px), (orientation:landscape) and (max-height:500px){body.diving .signal-notice{top:auto;bottom:88px;white-space:normal;font-size:12px}body.diving:has(#actionToggle[aria-expanded=true]) .signal-notice{bottom:180px}body.diving.mobile-controls-open .signal-notice{bottom:292px}}
@media(orientation:landscape) and (max-height:500px){body.diving .header{height:46px}body.diving .dive-ui{height:calc(100dvh - 46px)}body.diving .air-meter{top:48px;left:30%;width:40%}body.diving .dive-heading h1{margin-top:8px}body.diving .mobile-hint{display:none}body.diving .mobile-controls{top:4px}body.diving .social-toggle{top:92px}body.diving .signal-notice{width:min(330px,45vw);bottom:75px}body.diving:has(#actionToggle[aria-expanded=true]) .signal-notice{bottom:170px}body.diving.mobile-controls-open .signal-notice{bottom:292px}body.diving .audio-panel{top:46px;max-height:calc(100dvh - 52px);overflow:auto}.gear-content{padding-bottom:90px}}

.entry-status{pointer-events:none}
.feedback-open{border:1px solid #ffffff66;border-radius:24px;background:#ffffff18;color:inherit;padding:8px 12px;font-size:12px;white-space:nowrap}.feedback-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #c3e6dc;border-radius:20px;padding:24px;background:#edf9f2;color:#173f45;box-shadow:0 20px 60px #002c3b66}.feedback-dialog::backdrop{background:#082731a8}.feedback-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.feedback-heading h2{font-size:21px;font-weight:700}.feedback-heading button{border:0;background:none;color:#285b60;font-size:28px}.feedback-dialog p{font-size:13px;line-height:1.6}.feedback-dialog label{display:block;margin:18px 0 8px;font-size:13px;font-weight:700}.feedback-dialog textarea{width:100%;min-height:110px;resize:vertical;border:1px solid #aed2c8;border-radius:12px;padding:12px;background:white;color:#173f45;font:inherit;font-size:16px}.feedback-dialog .feedback-hint{font-size:11px;color:#557c79}.feedback-dialog [role=status]{min-height:1.5em}.feedback-dialog button[type=submit]{width:100%;border:0;border-radius:30px;background:#277e80;color:#fff;padding:13px}.feedback-dialog button:disabled{opacity:.55}.header-right{gap:12px}
.gear-feedback{float:right;color:#215f63;border-color:#71aaa4;background:#effaf2cc}
.presence{font-size:12px;color:#275d61;white-space:nowrap}.gear-presence{clear:both;padding-top:10px;margin:0;color:#397b79}body.diving .presence{color:#e3f8f1}@media(max-width:700px){.header-right{gap:6px}.presence{font-size:10px}.feedback-open{padding:7px 9px;font-size:11px}}