:root{font-family:Arial,Helvetica,sans-serif;color:#133b42;background:#f3f5f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid #eaaa43;outline-offset:4px}header{height:82px;padding:12px max(28px,env(safe-area-inset-right)) 12px max(28px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce4df;background:white}.brand{display:flex;align-items:center;gap:14px;font-size:26px;font-weight:800;letter-spacing:.08em}.brand img{width:38px;height:53px;object-fit:contain}.brand-sub{display:block;font-size:9px;letter-spacing:.16em;margin-top:5px;color:#6a7e7f}button#home,.dialog-actions button{padding:14px 22px;border:1px solid #c9d8d3;border-radius:12px;background:white;color:#17474c;font-weight:700;min-height:48px}main{min-height:calc(100dvh - 82px)}.welcome{padding:55px 7vw 35px;max-width:1360px;margin:auto}.eyebrow{color:#138074;font-size:12px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}h1{font-size:clamp(34px,4.6vw,60px);line-height:1.08;letter-spacing:-.045em;margin:18px 0}p.lead{color:#667f82;font-size:19px;line-height:1.6;max-width:650px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}.card{text-align:left;border:1px solid #d6e0dc;background:white;border-radius:23px;padding:28px;color:#153f44;box-shadow:0 12px 35px #183b4010;transition:transform .15s,border-color .15s}.card:hover{border-color:#188477;transform:translateY(-3px)}.card strong{display:block;font-size:29px;margin:16px 0 9px}.card small{display:block;font-size:16px;color:#6b8082;line-height:1.5}.card .arrow{display:block;margin-top:24px;color:#128172;font-size:25px}.lang-icon{font-size:24px;border-radius:13px;background:#eef5f1;display:inline-flex;width:66px;height:55px;align-items:center;justify-content:center;font-weight:700}.product-card{padding:0;overflow:hidden}.product-card img{width:100%;height:205px;object-fit:contain;background:#fff}.product-copy{padding:0 26px 24px}.product-copy .arrow{float:right;margin:0}.footer-note{margin-top:35px;font-size:13px;color:#76908e}.workspace{height:calc(100dvh - 82px);position:relative}.workspace iframe{width:100%;height:100%;border:0;background:#f3f5f2;display:block}.loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#f3f5f2;z-index:2;pointer-events:none}.notice{padding:12px 20px;background:#fff0cf;color:#604818;font-size:14px;border-bottom:1px solid #e9d3a4}.workspace:has(.notice) iframe{height:calc(100% - 45px)}dialog{max-width:480px;width:90%;padding:30px;border:0;border-radius:22px;color:#17474c;box-shadow:0 30px 100px #0004}dialog::backdrop{background:#052e3bd0}.dialog-actions{display:flex;gap:12px;margin-top:25px}.dialog-actions .primary,.primary{background:#087b70;color:white;border:0;border-radius:12px;padding:17px 25px;font-size:18px;font-weight:700}.success{max-width:680px;margin:auto;padding:80px 28px;text-align:center}.success .tick{font-size:55px;color:#138575}.success h1{font-size:42px}.success p{font-size:18px;line-height:1.6}.success code{display:block;margin:25px;color:#46666c}body:has(.workspace) header{height:64px}body:has(.workspace) .workspace{height:calc(100dvh - 64px)}body:has(.workspace) .brand img{height:42px}body:has(.workspace) .brand-sub{display:none}@media(max-width:650px){.welcome{padding:30px 20px}.cards{gap:14px}.card{padding:20px}.card strong{font-size:22px}.product-card{padding:0}.product-card img{height:145px}.product-copy{padding:0 16px 20px}.lead{font-size:16px!important}.brand-sub{display:none}header{padding:12px 20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Lightweight, fully local trade-fair welcome screen. */
.attract{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100dvh - 82px);padding:48px 7vw 58px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:12px;color:#fff;background:radial-gradient(ellipse at 75% 45%,#1b8b88 0%,#095966 46%,#073943 100%)}
.attract-copy{position:relative;z-index:1}.attract .eyebrow{color:#a7e5d6;font-size:13px}.attract h1{font-size:clamp(40px,5.5vw,76px);line-height:1.07;margin:24px 0}.attract-copy p{color:#c3e1e2;font-size:clamp(18px,2vw,24px);line-height:1.5;max-width:360px}
.fish-invite{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:none;border:0;color:white;border-radius:32px;padding:0 12px 28px;-webkit-tap-highlight-color:transparent}.fish-scene{position:relative;display:block;width:100%;max-width:540px}.fish-scene img{display:block;width:100%;filter:drop-shadow(0 16px 22px #002d3944);animation:fish-swim 4s ease-in-out infinite}.tap-label{display:flex;align-items:center;justify-content:center;gap:28px;background:#ffcf70;color:#123f47;padding:20px 44px;border-radius:100px;font-size:clamp(28px,3.4vw,43px);font-weight:800;box-shadow:0 8px 0 #003e4638;transition:transform .2s}.fish-invite:active .tap-label{transform:scale(.96)}.tap-hint{margin-top:18px;font-size:18px;color:#c7ebe5}.attract-footer{position:absolute;bottom:17px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.2em;color:#a4d1d0}.water-ring{position:absolute;border:1px solid #a8e8dd1c;border-radius:50%;pointer-events:none;z-index:-1}.ring-one{width:650px;height:650px;right:-110px;top:-60px}.ring-two{width:830px;height:830px;right:-200px;top:-150px}.fish-bubble{position:absolute;border:2px solid #a5ece470;border-radius:50%;animation:bubble-rise 5s ease-in-out infinite}.bubble-one{width:22px;height:22px;left:20%;top:24%}.bubble-two{width:12px;height:12px;left:35%;top:10%;animation-delay:-2.5s}@keyframes fish-swim{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}@keyframes bubble-rise{0%,100%{transform:translateY(12px);opacity:.3}50%{transform:translateY(-16px);opacity:.8}}
@media(orientation:portrait){.attract{grid-template-columns:1fr;text-align:center;align-content:center;padding:35px 8vw 65px;gap:0}.attract-copy p{max-width:none;margin-bottom:0}.attract h1{font-size:clamp(40px,7vw,70px);margin:16px 0}.fish-scene{max-width:470px}.fish-invite{padding-bottom:0}.attract-copy .eyebrow{font-size:12px}}
@media(prefers-reduced-motion:reduce){.fish-scene img,.fish-bubble{animation:none}}

.fish-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 15px 15px #00303c35)}.has-fish-motion img{animation:none}.has-fish-motion{perspective:800px}

/* Keep the neutral artwork horizontal even when WebGL is unavailable. */
.fish-scene img{animation:none}

/* Native compositor animation: preserve the fish image and its alpha on iPad. */
.fish-scene{overflow:visible;perspective:none}
.fish-scene img{width:86%;margin:0 auto;animation:trout-swim-safe 7s ease-in-out infinite;will-change:transform;backface-visibility:hidden;filter:none}
@keyframes trout-swim-safe{0%,100%{transform:translate3d(-6%,0,0)}25%{transform:translate3d(0,-14px,0)}50%{transform:translate3d(6%,0,0)}75%{transform:translate3d(0,14px,0)}}
@media(prefers-reduced-motion:reduce){.fish-scene img{animation:none;will-change:auto}}

.fish-ripple{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.has-fish-ripple img{animation:none;will-change:auto}

/* Lightweight decorative bubbles, behind the invitation and controls. */
.water-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.water-bubble{position:absolute;left:var(--x);top:0;width:var(--size);height:var(--size);border-radius:50%;border:1px solid #baf7ed66;background:radial-gradient(circle at 28% 24%,#e5fff88c 0 4%,#cefff51a 10%,transparent 45%);box-shadow:inset -2px -3px 5px #b5fff518;opacity:0;animation:water-bubble-rise var(--duration) var(--delay) linear infinite}
@keyframes water-bubble-rise{0%{transform:translate3d(0,100dvh,0);opacity:0}10%{opacity:.48}85%{opacity:.38}100%{transform:translate3d(var(--drift),-55px,0);opacity:0}}
@media(prefers-reduced-motion:reduce){.water-bubble{animation:none;top:var(--start);opacity:.3}}

.tap-label{font-size:clamp(40px,5vw,62px);padding:22px 48px;gap:32px;line-height:1.1;letter-spacing:.025em;text-transform:uppercase}
@media(max-width:540px){.tap-label{font-size:clamp(36px,9vw,48px);padding:22px 38px;gap:24px}}

.fish-scene img{width:98%}

.brand-sub,body:has(.workspace) .brand-sub{display:block;font-size:9px;white-space:nowrap}