/* Compliance tokens: 0.85rem reads "화결 reef" entire indicator (Google Interaction Pattern* Pattern: Pattern:** Interactive Detail IntersectionObserver triggers `threshold: 0.15`. within (text blocks `clamp(3rem */
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{min-height:100vh;overflow-x:hidden;background:#1a120b;color:#c9b8a0;font-family:"Outfit",Inter,sans-serif;font-size:clamp(1rem,1.2vw,1.15rem);font-weight:300;line-height:1.72}body:before{content:"";position:fixed;inset:0;z-index:-4;background:linear-gradient(180deg,#0f1a2e 0%,#1a120b 42%,#0f1a2e 100%)}:root{--walnut:#1a120b;--aquarium:#0f1a2e;--mahogany:#3b2614;--brass:#d4a843;--coral:#e87c5b;--teal:#2dd4a8;--parchment:#f5e6d0;--sand:#c9b8a0;--aged:#8b7355;--silver:#a8b4c0;--cool:#d0e6e0;--spring:cubic-bezier(.68,-.55,.265,1.55);--wood:repeating-linear-gradient(93deg,#3b2614 0 3px,#5a3d22 3px 5px,#2a1a0d 5px 7px,#3b2614 7px 12px)}h1,h2{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;line-height:1.02;color:#f5e6d0;text-shadow:0 2px 4px rgba(0,0,0,.4)}p{max-width:58ch}.label,.leather-cartouche,.radial-menu a{font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#d4a843}.hero{position:relative;height:100vh;min-height:680px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,#e87c5b 0%,#d4a843 24%,#1a120b 58%,#0f1a2e 100%)}.hero:before{content:"";position:absolute;inset:12px;z-index:1;border:1px solid rgba(245,230,208,.1);background:radial-gradient(ellipse at 30% 20%,rgba(245,230,208,.08),transparent 70%),radial-gradient(ellipse at 70% 82%,rgba(45,212,168,.08),transparent 56%);box-shadow:inset 0 0 90px rgba(15,26,46,.92),inset 0 0 18px rgba(245,230,208,.08);pointer-events:none}.wood-frame{position:absolute;z-index:5;background:var(--wood);box-shadow:inset 2px 2px 4px rgba(0,0,0,.55),inset -2px -2px 4px rgba(255,200,140,.15)}.frame-top,.frame-bottom{left:0;right:0;height:12px}.frame-top{top:0}.frame-bottom{bottom:0}.frame-left,.frame-right{top:0;bottom:0;width:12px}.frame-left{left:0}.frame-right{right:0}.glass-haze{position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 0 38%,rgba(245,230,208,.07) 44%,transparent 50% 100%);mix-blend-mode:screen;pointer-events:none}.hero-center{position:relative;z-index:4;text-align:center;animation:heroRise 1200ms ease-out both}.hero-center h1{font-size:clamp(3rem,8vw,6rem);font-weight:700;color:#f5e6d0;text-shadow:0 0 60px rgba(232,124,91,.3)}.hero-center p{margin-top:1rem;font-family:"IBM Plex Mono",monospace;font-size:0.85rem;letter-spacing:.08em;color:#8b7355}.leather-cartouche{position:absolute;top:22px;left:50%;z-index:8;transform:translateX(-50%);padding:.8rem 1.35rem;border-radius:8px;border:2px dashed #8b7355;background-color:#4a3528;background-image:radial-gradient(circle at 30% 20%,rgba(245,230,208,.08),transparent 35%),radial-gradient(circle,rgba(0,0,0,.18) 1px,transparent 1.5px);background-size:auto,7px 7px;box-shadow:inset 2px 2px 5px rgba(0,0,0,.6),inset -2px -2px 3px rgba(245,230,208,.08);color:#3a281b;text-shadow:0 1px 1px rgba(245,230,208,.18),0 -1px 1px rgba(0,0,0,.75)}.compass{position:absolute;top:48px;right:42px;z-index:12;width:58px;height:58px;border:0;background:transparent;cursor:pointer;transition:transform 420ms var(--spring),filter 420ms var(--spring)}.compass:hover{filter:brightness(1.15);transform:scale(1.04)}.compass.open{transform:rotate(45deg) scale(1.05)}.compass-ring{position:absolute;inset:5px;border-radius:50%;background:linear-gradient(135deg,#8b7355,#d4a843 42%,#f5e6d0 50%,#b8860b 63%,#8b7355);box-shadow:0 2px 8px rgba(0,0,0,.7)}.compass-ring:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#1a120b}.compass-needle{position:absolute;left:50%;top:50%;z-index:2;width:8px;height:28px;transform-origin:50% 100%;background:#d4a843;clip-path:polygon(50% 0,100% 100%,0 100%)}.compass-needle.n{transform:translate(-50%,-100%)}.compass-needle.e{transform:translate(-50%,-100%) rotate(90deg);opacity:.7}.compass-needle.s{transform:translate(-50%,-100%) rotate(180deg);opacity:.45}.compass-needle.w{transform:translate(-50%,-100%) rotate(270deg);opacity:.3}.radial-menu{position:absolute;top:76px;right:74px;z-index:11;pointer-events:none}.radial-menu a{position:absolute;display:grid;place-items:center;width:112px;height:36px;text-decoration:none;border:1px solid rgba(212,168,67,.38);border-radius:999px;background:rgba(26,18,11,.72);box-shadow:inset 1px 1px 2px rgba(245,230,208,.08),0 8px 18px rgba(0,0,0,.35);opacity:0;transform:translate(0,0) scale(.15);transition:transform 520ms var(--spring),opacity 320ms ease,color 260ms ease}.radial-menu.open{pointer-events:auto}.radial-menu.open a{opacity:1}.radial-menu.open a:nth-child(1){transform:translate(-154px,-14px) scale(1);transition-delay:0ms}.radial-menu.open a:nth-child(2){transform:translate(-182px,38px) scale(1);transition-delay:60ms}.radial-menu.open a:nth-child(3){transform:translate(-151px,90px) scale(1);transition-delay:120ms}.radial-menu.open a:nth-child(4){transform:translate(-88px,116px) scale(1);transition-delay:180ms}.radial-menu.open a:nth-child(5){transform:translate(-23px,103px) scale(1);transition-delay:240ms}.radial-menu a:hover{color:#e87c5b}.cabinet{position:relative;z-index:3;background:var(--wood);padding-bottom:12px}.display-case{position:relative;min-height:88vh;padding:clamp(4rem,8vw,8rem) clamp(1.2rem,4vw,4rem);overflow:hidden}.display-case:before{content:"";position:absolute;inset:clamp(1rem,2vw,2rem);border:3px solid rgba(139,115,85,.85);border-radius:14px;box-shadow:inset 2px 2px 4px rgba(0,0,0,.5),inset -2px -2px 4px rgba(255,200,140,.15);pointer-events:none}.warm-panel{background:linear-gradient(180deg,rgba(26,18,11,.92),rgba(15,26,46,.88)),radial-gradient(ellipse at 18% 0%,rgba(232,124,91,.28),transparent 42%)}.mid-panel{background:linear-gradient(180deg,rgba(26,18,11,.94),rgba(15,26,46,.92)),radial-gradient(ellipse at 80% 18%,rgba(212,168,67,.18),transparent 46%)}.cool-panel{background:linear-gradient(180deg,rgba(15,26,46,.94),rgba(26,18,11,.9)),radial-gradient(ellipse at 65% 30%,rgba(45,212,168,.16),transparent 50%)}.deep-panel{background:linear-gradient(180deg,#0f1a2e,#121624 55%,#1a120b)}.abyss-panel{background:linear-gradient(180deg,#0f1a2e 0%,#08111e 70%,#02060a 100%);color:#d0e6e0}.panel-grid{position:relative;z-index:2;display:grid;grid-template-columns:.8fr .8fr .8fr 1.2fr 1.2fr 1.2fr 1.2fr .8fr .8fr .8fr;gap:32px;max-width:1420px;margin:auto}.panel-card{position:relative;min-height:180px;padding:clamp(1.4rem,2.6vw,2.4rem);border:1px solid rgba(139,115,85,.75);border-radius:10px;background:linear-gradient(135deg,rgba(59,38,20,.92),rgba(26,18,11,.72)),radial-gradient(ellipse at 30% 20%,rgba(245,230,208,.08),transparent 70%);box-shadow:inset 2px 2px 4px rgba(0,0,0,.5),inset -2px -2px 4px rgba(255,200,140,.15);backdrop-filter:blur(8px) saturate(1.2);opacity:0;transform:translateY(30px);transition:transform 400ms var(--spring),box-shadow 400ms var(--spring),border-color 400ms var(--spring)}.panel-card:after{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(110deg,transparent,rgba(245,230,208,.045),transparent 42%);pointer-events:none}.panel-card.revealed{opacity:1;transform:translateY(0);animation:elasticReveal 700ms var(--spring) both}.panel-card:hover{transform:translateY(-3px);border-color:#d4a843;box-shadow:inset 2px 2px 4px rgba(0,0,0,.5),inset -2px -2px 4px rgba(255,200,140,.15),0 8px 32px rgba(212,168,67,.15)}.panel-card h2{font-size:clamp(2.4rem,6vw,5.2rem);font-weight:700}.heading-card{background:linear-gradient(135deg,#4a3528,#3b2614);background-image:radial-gradient(circle,rgba(0,0,0,.18) 1px,transparent 1.5px),linear-gradient(135deg,#4a3528,#3b2614);background-size:7px 7px,auto;border-style:dashed}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-10{grid-column:span 10}.offset-down{transform:translateY(70px)}.offset-down.revealed{transform:translateY(40px);animation:elasticRevealOffset 700ms var(--spring) both}.brass-inlay{height:8px;position:relative;z-index:4;background:linear-gradient(90deg,#8b7355,#d4a843,#b8860b,#d4a843,#8b7355);box-shadow:0 1px 3px rgba(0,0,0,.6)}.glass-window,.specimen-window{min-height:320px;overflow:hidden;background:rgba(15,26,46,.55);border-color:rgba(245,230,208,.1)}.glass-window:before,.specimen-window:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(245,230,208,.08),transparent 70%),linear-gradient(180deg,rgba(45,212,168,.08),transparent);pointer-events:none}.plate{position:absolute;left:2rem;bottom:1.5rem}.mini-fish{position:absolute;width:96px;height:52px;border-radius:50%;filter:drop-shadow(0 0 18px currentColor);animation:swim 9s ease-in-out infinite}.mini-fish:before{content:"";position:absolute;right:-28px;top:14px;border-left:34px solid currentColor;border-top:13px solid transparent;border-bottom:13px solid transparent;opacity:.55}.fish-a{left:12%;top:25%;color:#e87c5b;background:radial-gradient(circle at 38% 40%,#f5e6d0,#e87c5b 45%,rgba(212,168,67,.24));animation-delay:-1s}.fish-b{left:52%;top:46%;color:#2dd4a8;background:radial-gradient(circle at 38% 40%,#d0e6e0,#2dd4a8 45%,rgba(15,26,46,.24));transform:scale(.75);animation-delay:-4s}.fish-c{left:28%;top:66%;color:#d4a843;background:radial-gradient(circle at 38% 40%,#f5e6d0,#d4a843 45%,rgba(232,124,91,.24));transform:scale(.55);animation-delay:-6s}.texture-sample{height:118px;margin:1rem 0;border-radius:8px;border:1px solid rgba(212,168,67,.3);box-shadow:inset 0 2px 8px rgba(0,0,0,.48)}.wood-sample{background:var(--wood)}.leather-sample{background-color:#4a3528;background-image:radial-gradient(circle,rgba(0,0,0,.25) 1px,transparent 1.6px),radial-gradient(circle at 65% 35%,rgba(245,230,208,.08),transparent 32%);background-size:6px 6px,auto}.brass-sample{background:linear-gradient(90deg,#8b7355,#d4a843 28%,#f5e6d0 50%,#b8860b 68%,#8b7355)}.glass-sample{background:rgba(15,26,46,.6);backdrop-filter:blur(8px) saturate(1.2);box-shadow:inset 0 0 28px rgba(45,212,168,.1),inset 0 0 1px rgba(245,230,208,.12)}.specimen-svg{width:100%;height:100%;min-height:240px;filter:drop-shadow(0 0 24px rgba(45,212,168,.22))}.svg-fin{fill:none;stroke:#d4a843;stroke-width:7;stroke-linecap:round;stroke-dasharray:18 12;animation:finPulse 2400ms ease-in-out infinite}.svg-fin.two{stroke:#2dd4a8;animation-delay:-900ms}.svg-fish{mix-blend-mode:screen;animation:svgDrift 5s ease-in-out infinite}.svg-fish.two{animation-delay:-1600ms}.lever-card{display:flex;flex-direction:column;justify-content:center}.brass-toggle{width:128px;height:54px;margin:1.3rem 0;border:0;border-radius:999px;cursor:pointer;background:#3b2614;box-shadow:inset 4px 4px 9px rgba(0,0,0,.7),inset -2px -2px 5px rgba(245,230,208,.1);padding:6px}.brass-toggle span{display:block;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f5e6d0,#d4a843 35%,#8b7355 100%);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:transform 500ms var(--spring),filter 300ms ease}.brass-toggle:hover span{filter:brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.5))}.brass-toggle.on span{transform:translateX(74px)}.toggle-copy{color:#8b7355}.cool-text{color:#d0e6e0}.abyss-panel .label{color:#a8b4c0}.descent-gradient{height:190px;min-height:190px;background:linear-gradient(180deg,#e87c5b 0%,#d4a843 25%,#1a120b 60%,#0f1a2e 100%);border-color:rgba(168,180,192,.4)}#fishCanvas{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;will-change:transform;mix-blend-mode:screen}#causticCanvas,#bubbleCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#causticCanvas{z-index:-2;opacity:1}#bubbleCanvas{z-index:20}.bubble{position:absolute}
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes elasticReveal{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes elasticRevealOffset{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:translateY(40px)}}
@keyframes swim{0%,100%{translate:0 0;rotate:-2deg}50%{translate:34px -18px;rotate:4deg}}
@keyframes finPulse{0%,100%{stroke-dashoffset:0;opacity:.45}50%{stroke-dashoffset:28;opacity:.8}}
@keyframes svgDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:980px){.panel-grid{grid-template-columns:repeat(6,1fr)}.span-7,.span-10{grid-column:span 6}.span-6,.span-5,.span-4,.span-3{grid-column:span 3}.offset-down.revealed{transform:translateY(16px);animation:none}.compass{right:24px}.leather-cartouche{left:24px;transform:none}}@media (max-width:640px){.hero{min-height:620px}.panel-grid{grid-template-columns:1fr;gap:20px}.span-3,.span-4,.span-5,.span-6,.span-7,.span-10{grid-column:1}.display-case{padding:4rem 1rem}.display-case:before{inset:.55rem}.offset-down,.offset-down.revealed{transform:none}.radial-menu.open a:nth-child(n){transform:translate(-150px,calc(46px * var(--i,1))) scale(1)}.radial-menu a:nth-child(1){--i:0}.radial-menu a:nth-child(2){--i:1}.radial-menu a:nth-child(3){--i:2}.radial-menu a:nth-child(4){--i:3}.radial-menu a:nth-child(5){--i:4}.leather-cartouche{display:none}.compass{top:26px;right:24px;width:50px;height:50px}.hero-center p{padding:0 2rem}.glass-window,.specimen-window{min-height:260px}}