body.nb-open{overflow:hidden}.nb-vignette{--sea:#66d5d0;--deep:#075879;--sand:#f8e8bd;--ink:#173f49;position:fixed;inset:0;z-index:20000;display:none;overflow:hidden;color:var(--ink);background:#b7ecdf;font-family:Barlow,Arial,sans-serif}.nb-vignette.is-open{display:block}.nb-vignette *{box-sizing:border-box}.nb-sky,.nb-ocean,.nb-grain{position:absolute;inset:0;pointer-events:none}.nb-sky{background:linear-gradient(#a9e8e4 0 54%,#d8f3e9 54% 58%,transparent 58%)}.nb-sun{position:absolute;top:13%;right:12%;width:92px;height:92px;border-radius:50%;background:#ffd66b;box-shadow:0 0 0 20px rgba(255,214,107,.16),0 0 70px rgba(255,227,151,.65)}.nb-cloud{position:absolute;width:145px;height:28px;border-radius:50%;background:rgba(255,255,255,.62);filter:blur(1px)}.nb-cloud:before,.nb-cloud:after{content:"";position:absolute;bottom:0;border-radius:50%;background:inherit}.nb-cloud:before{left:24px;width:55px;height:55px}.nb-cloud:after{right:24px;width:42px;height:42px}.nb-cloud-one{top:18%;left:7%;animation:nb-cloud 24s linear infinite}.nb-cloud-two{top:35%;right:25%;transform:scale(.65);animation:nb-cloud 31s -14s linear infinite}.nb-ocean{top:54%;background:linear-gradient(180deg,var(--sea),#1b9fb0 44%,var(--deep));transition:background 1.2s}.nb-wave{position:absolute;top:-16px;left:-5%;width:110%;height:42px;border-radius:50%;border-top:5px solid rgba(255,255,255,.75);animation:nb-wave 5s ease-in-out infinite}.nb-wave-two{top:2px;opacity:.45;animation-delay:-2.5s}.nb-shadow{position:absolute;top:65%;left:9%;width:90px;height:24px;border-radius:50%;background:rgba(0,25,40,.22);filter:blur(9px);opacity:0;transition:opacity 1s,transform 10s linear}.nb-grain{z-index:2;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.nb-topbar{position:absolute;z-index:20;top:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;height:72px;padding:0 clamp(18px,4vw,70px);border-bottom:1px solid rgba(23,63,73,.15);background:rgba(213,246,234,.64);backdrop-filter:blur(12px)}.nb-topbar button{border:0;color:var(--ink);background:none;font:700 12px Barlow,sans-serif;letter-spacing:.08em;cursor:pointer}.nb-brand{justify-self:start;font-size:14px!important}.nb-brand-sun{display:inline-grid;width:26px;height:26px;margin-right:6px;place-items:center;border-radius:50%;color:#9d6b19;background:#ffd66b}.nb-controls{display:flex;justify-self:end;gap:6px}.nb-controls button{padding:9px 11px;border-radius:99px}.nb-controls button:hover{background:rgba(255,255,255,.5)}.nb-progress{display:flex;gap:7px}.nb-progress span{width:26px;height:3px;border-radius:9px;background:rgba(23,63,73,.17);transition:.35s}.nb-progress span.is-active{background:#146d72}.nb-scroll{position:absolute;z-index:5;inset:0;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;scroll-snap-type:y mandatory;overscroll-behavior:none}.nb-scene{position:relative;display:grid;width:100%;min-height:100%;padding:clamp(100px,12vh,145px) clamp(25px,9vw,150px) 55px;align-items:center;scroll-snap-align:start;scroll-snap-stop:always}.nb-scene-copy{z-index:3;max-width:560px}.nb-kicker,.nb-step{display:block;margin-bottom:18px;color:#23787d;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.nb-scene h1{margin:0;color:#fffaf0;font-family:Georgia,serif;font-size:clamp(66px,10vw,154px);font-weight:400;letter-spacing:-.06em;line-height:.72;text-shadow:0 4px 0 rgba(24,93,99,.15)}.nb-scene-copy h2{margin:0 0 24px;color:#fffaf0;font-family:Georgia,serif;font-size:clamp(52px,7vw,96px);font-weight:400;letter-spacing:-.05em;line-height:.88;text-shadow:0 3px 0 rgba(24,93,99,.12)}.nb-scene-copy>p{max-width:490px;margin:0;color:#255963;font:500 clamp(17px,1.5vw,21px)/1.55 Barlow,sans-serif}.nb-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.nb-scene.is-visible .nb-reveal{opacity:1;transform:none}.nb-scene.is-visible .nb-reveal:nth-child(2){transition-delay:.12s}.nb-scene.is-visible .nb-reveal:nth-child(3){transition-delay:.22s}
.nb-scene-welcome{grid-template-columns:1.1fr .9fr;gap:8vw;background:linear-gradient(180deg,transparent 0 58%,rgba(248,232,189,.88) 58%)}.nb-scene-welcome .nb-scene-copy>p{margin-top:28px;font-size:clamp(20px,2vw,28px)}.nb-card{position:relative;overflow:hidden;border:9px solid #fff8e5;border-radius:18px;color:#214d54;background:#f8f0d9;box-shadow:0 25px 60px rgba(14,74,81,.24),0 0 0 2px #438f8e}.nb-hero-card{width:min(330px,70vw);justify-self:center;transform:translateY(24px) rotate(3deg)}.nb-scene.is-visible .nb-hero-card{transform:rotate(3deg);animation:nb-float 5s ease-in-out .8s infinite}.nb-card-art{position:relative;height:245px;overflow:hidden;background:linear-gradient(#8de0d8 0 55%,#3eb8ba 55% 75%,#f8df9f 75%)}.nb-art-sun{position:absolute;top:22px;right:28px;width:50px;height:50px;border-radius:50%;background:#ffd76c}.nb-art-water{position:absolute;right:-15%;bottom:25%;width:130%;height:38px;border-radius:50%;border-top:8px solid rgba(255,255,255,.65)}.nb-art-umbrella{position:absolute;bottom:43px;left:52px;width:132px;height:66px;border-radius:132px 132px 0 0;background:repeating-conic-gradient(from 270deg at 50% 100%,#ef7f69 0 22deg,#fff1cc 22deg 44deg)}.nb-art-umbrella:after{content:"";position:absolute;top:65px;left:64px;width:5px;height:85px;background:#785b45;transform:rotate(8deg);transform-origin:top}.nb-card-body{padding:14px 16px 17px}.nb-card-body small{color:#4b8583;font-size:9px;font-weight:800;letter-spacing:.15em}.nb-card-body h2,.nb-card-body h3{margin:5px 0 9px;font:700 22px/1 Georgia,serif}.nb-card-body p{margin:0;font-size:12px;line-height:1.45}.nb-card-cost{position:absolute;top:10px;left:10px;display:grid;width:38px;height:38px;place-items:center;border:3px solid #fff8e5;border-radius:50%;color:#fff;background:#e39052;font:800 18px Georgia,serif;box-shadow:0 2px 5px rgba(0,0,0,.2)}.nb-scroll-cue{position:absolute;bottom:23px;left:50%;padding:10px 20px;border:0;color:#255963;background:none;font:700 12px Barlow,sans-serif;letter-spacing:.09em;text-transform:uppercase;transform:translateX(-50%);cursor:pointer}.nb-scroll-cue span{display:block;margin-top:7px;font-size:20px;animation:nb-bob 1.5s infinite}
.nb-scene-bag{grid-template-columns:1fr 1.1fr;gap:5vw;background:linear-gradient(160deg,rgba(245,225,172,.32),rgba(69,187,183,.12))}.nb-deck-demo{position:relative;display:grid;grid-template-columns:1fr 180px;align-items:center;min-height:410px}.nb-mini-cards{position:relative;height:350px}.nb-mini-cards span{--rotate:calc((var(--i) - 2.5)*4deg);position:absolute;top:calc(var(--i)*25px);left:calc(var(--i)*17px);display:flex;width:190px;height:255px;padding:20px;align-items:flex-end;border:6px solid #fff5d9;border-radius:13px;color:#214d54;background:linear-gradient(150deg,#f8d888,#86d7c8);font:700 16px Georgia,serif;box-shadow:0 10px 25px rgba(19,92,97,.18);transform:rotate(var(--rotate));transition:.45s}.nb-mini-cards span i{position:absolute;top:45px;left:0;width:100%;color:#fff9e7;text-align:center;font:normal 70px Georgia,serif}.nb-scene.is-visible .nb-mini-cards span{animation:nb-pack 5s calc(var(--i)*.12s + .6s) both}.nb-deck-box{position:relative;z-index:2;display:grid;width:165px;height:230px;padding:20px;place-items:center;border:2px solid #fff2d2;border-radius:13px;color:#fff9e9;background:linear-gradient(145deg,#277f7d,#195768);box-shadow:0 24px 45px rgba(13,66,72,.3);text-align:center}.nb-deck-box:before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.35);border-radius:7px}.nb-deck-box span{font:700 20px/1.1 Georgia,serif}.nb-deck-box b{font:400 54px Georgia,serif}.nb-deck-box small{letter-spacing:.2em}.nb-meters{position:absolute;right:8vw;bottom:5vh;display:flex;gap:30px;margin:0;padding:14px 22px;border:1px solid rgba(255,255,255,.5);border-radius:10px;background:rgba(247,248,216,.72);backdrop-filter:blur(8px)}.nb-meters div{width:120px}.nb-meters dt{margin-bottom:7px;font-size:11px;font-weight:800;text-transform:uppercase}.nb-meters dd{display:grid;grid-template-columns:1fr 20px;gap:8px;align-items:center;margin:0}.nb-meters dd>b{height:5px;border-radius:8px;background:linear-gradient(90deg,#eaa354 var(--value),rgba(25,91,95,.14) var(--value))}.nb-meters dd>span{font-weight:800}
.nb-scene-friends{grid-template-columns:.8fr 1.2fr;gap:6vw}.nb-friend-cards{display:flex;justify-content:center;gap:28px}.nb-person-card{width:min(260px,29vw);transform:rotate(-2deg)}.nb-surfer-card{transform:translateY(40px) rotate(2deg)}.nb-portrait{position:relative;height:235px;overflow:hidden;background:linear-gradient(#86d9d5 0 55%,#2baab2 55% 71%,#efcf8c 71%)}.nb-portrait>span{position:absolute;bottom:36px;left:50%;width:88px;height:150px;border-radius:48px 48px 15px 15px;background:#eb775f;transform:translateX(-50%)}.nb-portrait>span:before{content:"";position:absolute;top:-41px;left:18px;width:54px;height:63px;border-radius:45% 45% 42% 42%;background:#c9855a}.nb-lifeguard>span:after{content:"+";position:absolute;top:32px;left:27px;color:#fff;font:800 38px Arial}.nb-surfer>span{background:#e7c463}.nb-surfer>span:after{content:"";position:absolute;right:-28px;bottom:-15px;width:34px;height:184px;border:6px solid #f7efe0;border-radius:50%;transform:rotate(12deg)}.nb-person-card blockquote{margin:8px 0 0;color:#597477;font:italic 11px/1.4 Georgia,serif}.nb-friendly-note{position:absolute;bottom:7vh;left:9vw;margin:0;color:#2f7676;font:700 13px Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase}.nb-friendly-note span{color:#e49552}
.nb-scene-water{grid-template-columns:.8fr 1.2fr;gap:6vw;background:linear-gradient(180deg,transparent 0 40%,rgba(24,145,163,.2))}.nb-board{position:relative;display:grid;gap:10px;width:min(610px,100%);justify-self:end;padding:18px;border:1px solid rgba(255,255,255,.42);border-radius:18px;background:rgba(18,111,128,.16);box-shadow:0 25px 65px rgba(8,73,91,.16);backdrop-filter:blur(10px)}.nb-zone{position:relative;height:135px;border:1px dashed rgba(255,255,255,.6);border-radius:12px;color:#eafff9;background:rgba(255,255,255,.09)}.nb-zone>span{position:absolute;top:10px;left:14px;font-size:10px;font-weight:800;letter-spacing:.18em}.nb-zone-arrow{position:absolute;z-index:3;top:135px;left:50%;display:grid;place-items:center;color:#fff;transform:translateX(-50%)}.nb-zone-arrow span{font-size:25px}.nb-zone-arrow small{padding:3px 8px;border-radius:20px;color:#296469;background:#fff3cb;font-weight:800}.nb-tutorial-card{position:absolute;top:27px;left:50%;width:72px;height:98px;padding:7px;border:4px solid #fff3d3;border-radius:7px;color:#28575e;background:#e7bd69;box-shadow:0 8px 15px rgba(0,0,0,.18);transform:translateX(-50%)}.nb-tutorial-card i{display:block;height:60px;background:linear-gradient(#86d6cd 52%,#2fa8af 52% 68%,#f1cf89 68%)}.nb-tutorial-card b{display:block;margin-top:4px;font:700 9px Georgia,serif}.nb-zone-beach .nb-tutorial-card{opacity:.28}.nb-swimmer{animation:nb-swim 3s ease-in-out infinite}.nb-zone-deep{height:90px;opacity:.48;background:rgba(0,47,76,.18)}.nb-zone-deep small{display:block;padding-top:43px;text-align:center}.nb-toast{position:absolute;right:9vw;bottom:4vh;padding:13px 18px;border-radius:9px;color:#2c5a5f;background:#fff5d5;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.nb-vignette.is-darkening .nb-ocean{background:linear-gradient(#35a8b4,#08718c 38%,#003348)}.nb-vignette.is-darkening .nb-shadow{opacity:1;transform:translateX(70vw) scale(2.3)}.nb-scene-deep{grid-template-columns:1fr 1fr;gap:5vw;background:linear-gradient(180deg,rgba(13,106,130,.2),rgba(0,52,74,.55))}.nb-glitch-title{position:absolute;top:90px;left:50%;color:rgba(238,255,246,.65);font-size:12px;font-weight:800;letter-spacing:.24em;transform:translateX(-50%)}.nb-scene-deep.is-visible .nb-glitch-title:before{content:attr(data-warning);position:absolute;inset:0;width:max-content;color:#f36c5c;opacity:0;animation:nb-glitch 4s .7s infinite}.nb-deep-demo{position:relative;height:420px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.09),rgba(0,40,61,.24) 62%,transparent 64%)}.nb-deep-swimmer{z-index:3;top:130px;animation:nb-drift 6s ease-in-out infinite}.nb-ripple{position:absolute;top:145px;left:50%;width:100px;height:55px;border:3px solid rgba(214,255,248,.38);border-radius:50%;transform:translateX(-50%);animation:nb-ripple 3s infinite}.nb-under-shape{position:absolute;top:230px;left:22%;width:58%;height:55px;border-radius:50%;background:rgba(0,22,38,.43);filter:blur(12px);animation:nb-under 7s ease-in-out infinite}.nb-cheer-modal{position:absolute;right:15vw;bottom:9vh;display:flex;gap:12px;padding:14px 22px;border:1px solid rgba(255,255,255,.5);border-radius:12px;color:#2c5a5f;background:#fff7d9}.nb-cheer-modal>span{display:grid;width:36px;height:36px;place-items:center;border-radius:50%;color:white;background:#68aa79}.nb-cheer-modal b,.nb-cheer-modal small{display:block}.nb-cheer-modal small{margin-top:3px}.nb-tourism{position:absolute;bottom:22px;left:50%;width:100%;margin:0;color:rgba(211,246,239,.43);font-size:9px;letter-spacing:.05em;text-align:center;transform:translateX(-50%)}
.nb-scene-malfunction{grid-template-columns:.8fr 1.2fr;gap:5vw;color:#e5fff6;background:linear-gradient(180deg,rgba(3,76,99,.48),rgba(0,31,49,.75))}.nb-scene-malfunction .nb-scene-copy>p{color:#c5e1dc}.nb-relaxation-word{position:relative}.nb-scene-malfunction.is-visible .nb-relaxation-word:after{content:attr(data-alt);position:absolute;left:0;color:#f16c61;background:#0b5368;opacity:0;animation:nb-word-glitch 5s 1.5s infinite}.nb-broken-board{position:relative;width:min(650px,100%);height:390px;padding:50px 25px 25px;border:1px solid rgba(220,255,248,.24);border-radius:16px;background:rgba(0,34,52,.33);box-shadow:0 30px 80px rgba(0,0,0,.22);overflow:hidden}.nb-counter{position:absolute;top:15px;left:24px;font-size:10px;letter-spacing:.13em}.nb-counter b{margin-left:12px;font-size:16px}.nb-counter s{opacity:.35}.nb-broken-slots{position:absolute;z-index:3;inset:70px 25px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:center}.nb-broken-slots>span{position:relative;height:205px;border:1px dashed rgba(255,255,255,.2);border-radius:9px}.nb-broken-slots .is-card:before{content:"";position:absolute;inset:8px;border:5px solid #eee4c9;border-radius:9px;background:linear-gradient(#57afad 0 55%,#136d82 55%)}.nb-broken-slots .is-missing:after{content:attr(data-message);position:absolute;top:48%;left:50%;width:max-content;padding:6px 9px;border-radius:5px;color:#e8ddd0;background:#3c1720;font:11px monospace;opacity:0;transform:translate(-50%,-50%);animation:nb-missing 6s 2s infinite}.nb-broken-slots .is-damaged{filter:saturate(.3);clip-path:polygon(0 0,100% 0,100% 17%,87% 24%,100% 32%,100% 100%,0 100%)}.nb-giant-shadow{position:absolute;top:145px;left:-30%;width:160%;height:170px;border-radius:50%;background:rgba(0,12,24,.5);filter:blur(20px);animation:nb-giant 8s ease-in-out infinite}.nb-buoy{position:absolute;z-index:4;right:8%;bottom:45px;width:18px;height:58px;border-radius:8px 8px 3px 3px;background:#d64b3f;animation:nb-buoy 13s linear infinite}.nb-buoy i{position:absolute;top:-9px;left:4px;width:10px;height:10px;border-radius:50%;background:#ffdf87}.nb-win-modal{position:absolute;z-index:5;right:13vw;top:50%;width:290px;padding:22px;border-radius:13px;color:#28575e;background:rgba(255,248,219,.94);box-shadow:0 22px 60px rgba(0,0,0,.34);text-align:center;transform:translateY(calc(-50% + 24px))}.nb-scene.is-visible .nb-win-modal{transform:translateY(-50%)}.nb-win-modal h3{margin:11px 0 4px;font:700 22px Georgia,serif}.nb-win-modal p{margin:0 0 16px;font-size:13px}.nb-win-modal button{padding:9px 18px;border:0;border-radius:50px;color:white;background:#3d9a96;font-weight:700;cursor:pointer}.nb-last-instruction{position:absolute;bottom:20px;left:50%;margin:0;color:rgba(225,255,248,.7);font-size:11px;letter-spacing:.16em;text-transform:uppercase;transform:translateX(-50%)}
.nb-scene-impact{display:block;padding:0;overflow:hidden;background:#06455f}.nb-impact-board{position:absolute;inset:9% 8%;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:linear-gradient(160deg,rgba(57,165,172,.35),rgba(0,57,78,.5));box-shadow:0 30px 100px #002534;transition:transform .25s cubic-bezier(.2,.8,.2,1)}.nb-impact-logo{position:absolute;top:8%;left:50%;color:#e9f7e9;font:700 22px Georgia,serif;letter-spacing:.12em;transform:translateX(-50%)}.nb-impact-logo span{color:#f5ca67}.nb-impact-card{position:absolute;top:35%;width:150px;height:220px;border:8px solid #f6edcf;border-radius:12px;background:linear-gradient(#68bbb5 0 55%,#0c728a 55%);box-shadow:0 18px 35px rgba(0,0,0,.35);transition:transform .4s}.nb-impact-card-one{left:20%;transform:rotate(-3deg)}.nb-impact-card-two{left:calc(50% - 75px)}.nb-impact-card-three{right:20%;transform:rotate(3deg)}.nb-impact-message{position:absolute;bottom:8%;left:50%;width:330px;padding:14px;border-radius:8px;color:#24545b;background:#fff4cf;text-align:center;transform:translateX(-50%)}.nb-impact-message span,.nb-impact-message b{display:block}.nb-impact-message span{font:700 18px Georgia,serif}.nb-impact-message b{margin-top:4px;font-size:11px}.nb-impact-prompt{position:absolute;z-index:5;bottom:12px;left:50%;color:#c9e8e3;font-size:11px;letter-spacing:.18em;text-transform:uppercase;transform:translateX(-50%)}.nb-impact-prompt span{display:block;text-align:center}.nb-shark{position:absolute;z-index:8;bottom:-48%;left:50%;width:min(780px,90vw);height:380px;transform:translateX(-50%);transition:bottom .75s cubic-bezier(.15,.9,.3,1)}.nb-shark-body{position:absolute;inset:75px 70px 35px;border-radius:54% 48% 52% 50%;background:linear-gradient(#163948 0 55%,#aec3bc 56%);box-shadow:0 0 80px rgba(0,14,24,.8);transform:rotate(-4deg)}.nb-fin{position:absolute;top:-104px;left:42%;width:170px;height:150px;background:#163948;clip-path:polygon(0 100%,50% 0,100% 100%)}.nb-tail{position:absolute;right:-105px;top:38px;width:155px;height:180px;background:#193e4b;clip-path:polygon(0 50%,100% 0,72% 50%,100% 100%)}.nb-mouth{position:absolute;top:48px;left:-15px;width:150px;height:130px;border-radius:50%;background:#350e19;clip-path:polygon(0 15%,100% 0,83% 50%,100% 100%,0 85%,24% 50%)}.nb-mouth:after{content:"";position:absolute;inset:7px;background:repeating-conic-gradient(from 0deg,#f5ead8 0 9deg,transparent 9deg 18deg);clip-path:polygon(0 0,100% 0,80% 50%,100% 100%,0 100%,24% 50%)}.nb-eye{position:absolute;top:35px;left:105px;width:12px;height:12px;border-radius:50%;background:#05090b;box-shadow:0 0 0 3px #82989a}.nb-debris i{position:absolute;z-index:10;top:45%;left:50%;width:65px;height:42px;background:#f5ebca;opacity:0}.nb-debris i:nth-child(2){width:30px;left:43%}.nb-debris i:nth-child(3){width:80px;left:55%}.nb-debris i:nth-child(4){width:25px;left:35%}.nb-debris i:nth-child(5){width:44px;left:62%}.nb-debris i:nth-child(6){width:34px;left:48%}.nb-vignette[data-impact="1"] .nb-impact-board{transform:translateY(-18px) rotate(.25deg)}.nb-vignette[data-impact="1"] .nb-impact-card-one{transform:translate(-10px,-8px) rotate(-8deg)}.nb-vignette[data-impact="2"] .nb-impact-board{transform:translateY(-34px) scaleX(1.01)}.nb-vignette[data-impact="2"] .nb-impact-card-three{transform:translate(24px,18px) rotate(12deg)}.nb-vignette[data-impact="2"] .nb-impact-card-two{transform:translateY(-15px) rotate(-4deg)}.nb-vignette.is-attacking .nb-shark{bottom:8%;}.nb-vignette.is-attacking .nb-impact-board{animation:nb-bite .9s .42s forwards}.nb-vignette.is-attacking .nb-impact-card{animation:nb-card-debris 1s .5s forwards}.nb-vignette.is-attacking .nb-debris i{animation:nb-debris 1.1s calc(.45s + var(--d,0s)) forwards}.nb-debris i:nth-child(2){--d:.06s}.nb-debris i:nth-child(3){--d:.1s}.nb-debris i:nth-child(4){--d:.15s}.nb-debris i:nth-child(5){--d:.19s}.nb-debris i:nth-child(6){--d:.23s}.nb-screen-flash{position:absolute;z-index:30;inset:0;pointer-events:none;background:#e4fff6;opacity:0}.nb-vignette.is-attacking .nb-screen-flash{animation:nb-flash 1.2s .5s}
.nb-scene-real{display:grid;place-items:center;color:#eadfc6;background:radial-gradient(circle at 50% 110%,#12384b,#080a0d 63%);text-align:center}.nb-real-content{position:relative;z-index:2}.nb-real-mark{display:grid;width:68px;height:68px;margin:0 auto 28px;place-items:center;border:1px solid #9e302e;clip-path:polygon(50% 0,100% 22%,91% 78%,50% 100%,9% 78%,0 22%);color:#e2b765;background:#1b1214;font:700 31px Georgia,serif}.nb-real-content h2{margin:0;color:#ece3d0;font:400 clamp(42px,7vw,94px)/1 Georgia,serif;letter-spacing:.08em}.nb-real-content>p{margin:18px 0 45px;color:#a85048;font-size:clamp(12px,1.2vw,16px);font-weight:800;letter-spacing:.32em}.nb-real-content nav{display:flex;justify-content:center;gap:clamp(14px,3vw,42px)}.nb-real-content nav a,.nb-real-content nav button{padding:7px 0;border:0;border-bottom:1px solid transparent;color:#cfc5b2;background:none;font:700 13px Barlow,sans-serif;letter-spacing:.17em;text-decoration:none;cursor:pointer}.nb-real-content nav a:hover,.nb-real-content nav button:hover{border-color:#9e302e;color:#fff}.nb-enter{margin-top:55px;padding:13px 22px;border:1px solid #72554a;border-radius:2px;color:#e3d7c4;background:rgba(255,255,255,.03);font:700 11px Barlow,sans-serif;letter-spacing:.16em;cursor:pointer}.nb-enter span{margin-left:14px;color:#bd5548}.nb-real-water{position:absolute;right:-10%;bottom:-18%;left:-10%;height:34%;border-radius:50% 50% 0 0;background:linear-gradient(rgba(15,67,87,.55),#020507);filter:blur(2px);animation:nb-real-wave 7s ease-in-out infinite}
@keyframes nb-cloud{from{transform:translateX(-18vw)}to{transform:translateX(105vw)}}@keyframes nb-wave{50%{transform:translateY(8px) scaleX(.97)}}@keyframes nb-float{50%{transform:translateY(-10px) rotate(1deg)}}@keyframes nb-bob{50%{transform:translateY(6px)}}@keyframes nb-pack{0%{transform:translate(-180px,-50px) rotate(-20deg);opacity:0}45%{opacity:1}100%{transform:translate(160px,80px) rotate(8deg);opacity:0}}@keyframes nb-swim{50%{transform:translate(-50%,5px) rotate(2deg)}}@keyframes nb-glitch{0%,14%,17%,100%{opacity:0}15%,16%{opacity:1;transform:translate(3px,-1px)}}@keyframes nb-drift{50%{transform:translate(-42%,8px) rotate(3deg)}}@keyframes nb-ripple{to{width:320px;height:170px;opacity:0;transform:translate(-50%,-60px)}}@keyframes nb-under{50%{transform:translateX(80px) scale(1.4)}}@keyframes nb-word-glitch{0%,44%,47%,100%{opacity:0}45%,46%{opacity:1;transform:translate(4px,-2px)}}@keyframes nb-missing{0%,30%,34%,100%{opacity:0}31%,33%{opacity:1}}@keyframes nb-giant{50%{transform:translateX(18%) scaleY(1.3)}}@keyframes nb-buoy{from{transform:translateX(80px)}to{transform:translateX(-570px)}}@keyframes nb-bite{55%{transform:translateY(-120px) rotate(-5deg)}100%{transform:translateY(120vh) rotate(-13deg);opacity:0}}@keyframes nb-card-debris{to{transform:translate(calc((var(--x,1))*45vw),-35vh) rotate(170deg);opacity:0}}@keyframes nb-debris{30%{opacity:1}to{opacity:0;transform:translate(calc((var(--x,1))*43vw),-45vh) rotate(280deg)}}@keyframes nb-flash{45%{opacity:0}50%{opacity:.9}100%{opacity:0}}@keyframes nb-real-wave{50%{transform:translateY(18px) scaleX(1.03)}}
@media(max-width:800px){.nb-topbar{grid-template-columns:1fr auto;height:62px;padding:0 14px}.nb-progress{display:none}.nb-control-label{display:none}.nb-scene{padding:90px 24px 45px}.nb-scene-welcome,.nb-scene-bag,.nb-scene-friends,.nb-scene-water,.nb-scene-deep,.nb-scene-malfunction{grid-template-columns:1fr;align-content:center;gap:24px}.nb-scene h1{font-size:64px}.nb-scene-copy h2{font-size:48px}.nb-hero-card{width:205px}.nb-card-art{height:125px}.nb-card-body h2{font-size:17px}.nb-deck-demo{min-height:260px;grid-template-columns:1fr 120px}.nb-mini-cards{height:250px;transform:scale(.67);transform-origin:left center}.nb-deck-box{width:112px;height:165px;padding:10px}.nb-deck-box b{font-size:38px}.nb-meters{right:24px;bottom:18px;left:24px;justify-content:space-between;gap:8px;padding:9px}.nb-meters div{width:30%}.nb-friend-cards{gap:12px}.nb-person-card{width:47%;border-width:5px}.nb-portrait{height:140px}.nb-card-body{padding:9px}.nb-card-body h3{font-size:15px}.nb-person-card blockquote{display:none}.nb-friendly-note{display:none}.nb-board{height:390px}.nb-zone{height:105px}.nb-zone-arrow{top:110px}.nb-zone-deep{height:70px}.nb-toast{right:24px;bottom:18px}.nb-deep-demo{height:260px}.nb-deep-swimmer{top:60px}.nb-under-shape{top:150px}.nb-cheer-modal{right:24px;bottom:35px}.nb-broken-board{height:265px}.nb-broken-slots{inset:55px 12px 15px;gap:6px}.nb-broken-slots>span{height:150px}.nb-win-modal{right:50%;top:68%;width:250px;transform:translate(50%,calc(-50% + 24px))}.nb-scene.is-visible .nb-win-modal{transform:translate(50%,-50%)}.nb-impact-board{inset:12% 4%}.nb-impact-card{width:92px;height:150px}.nb-impact-card-one{left:8%}.nb-impact-card-two{left:calc(50% - 46px)}.nb-impact-card-three{right:8%}.nb-real-content nav{flex-wrap:wrap;max-width:360px;margin:auto}.nb-real-content>p{letter-spacing:.2em}.nb-real-content h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.nb-vignette *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.nb-reveal{opacity:1;transform:none}.nb-vignette.is-attacking .nb-impact-board{opacity:0}}

/* Isolate the tour controls from the shared Hellbreak button skin. */
.nb-vignette .nb-topbar button,
.nb-vignette .nb-scroll-cue,
.nb-vignette .nb-real-content nav button,
.nb-vignette .nb-enter {
  min-height: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.nb-vignette .nb-topbar button { padding: 0 !important; border: 0 !important; color: var(--ink) !important; transform: none !important; }
.nb-vignette .nb-controls button { padding: 9px 11px !important; border-radius: 99px !important; }
.nb-vignette .nb-controls button:hover { background: rgba(255,255,255,.5) !important; }
.nb-vignette .nb-scroll-cue { position: absolute !important; right: auto !important; left: 50% !important; width: auto !important; padding: 10px 20px !important; border: 0 !important; color: #255963 !important; transform: translateX(-50%) !important; }
.nb-vignette .nb-card-body h2,
.nb-vignette .nb-card-body h3,
.nb-vignette .nb-card-body p { color: #214d54 !important; }
.nb-vignette .nb-card-body b { color: #b46235 !important; }
.nb-vignette .nb-scene-welcome .nb-scene-copy { position: relative; top: -34px; }
.nb-vignette .nb-scene-deep .nb-scene-copy > p { color: #bfe5df !important; }
.nb-vignette .nb-cheer-modal b,
.nb-vignette .nb-cheer-modal small { color: #2c5a5f !important; }
.nb-vignette .nb-win-modal h3,
.nb-vignette .nb-win-modal p { color: #28575e !important; }
.nb-vignette .nb-impact-message span,
.nb-vignette .nb-impact-message b { color: #24545b !important; }
.nb-vignette .nb-topbar { overflow: hidden; transition: opacity .55s ease,background .45s ease,border-color .45s ease,filter .45s ease,box-shadow .45s ease; }
.nb-vignette .nb-topbar > * { position: relative; z-index: 1; }
.nb-vignette .nb-topbar::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 18% 105%,rgba(4,74,91,.34),transparent 34%),linear-gradient(105deg,transparent 0 58%,rgba(177,132,77,.12) 59% 61%,transparent 63%),repeating-linear-gradient(96deg,transparent 0 82px,rgba(3,73,88,.08) 84px 87px,transparent 90px); opacity: 0; transition: opacity .45s ease; }
.nb-vignette.is-attacking .nb-topbar { opacity: 0; pointer-events: none; }

/* Contrast and story-polish pass. */
.nb-vignette .nb-meters { background: rgba(235,246,221,.9); border-color: rgba(255,255,255,.82); }
.nb-vignette .nb-meters dt,
.nb-vignette .nb-meters dd > span { color: #174f57 !important; text-shadow: none !important; }
.nb-vignette .nb-meters dd > b { background: linear-gradient(90deg,#e88a39 var(--value),rgba(23,79,87,.2) var(--value)); }
.nb-vignette .nb-friendly-note { padding: 10px 14px; border: 1px solid rgba(255,255,255,.62); border-radius: 99px; color: #174f57 !important; background: rgba(255,248,218,.82); box-shadow: 0 8px 22px rgba(11,84,91,.12); }
.nb-vignette .nb-friendly-note span { color: #bb622d !important; }
.nb-vignette .nb-toast { border: 1px solid rgba(255,255,255,.78); color: #214d54 !important; background: rgba(255,245,213,.95); }
.nb-vignette .nb-toast b { color: #174f57 !important; }
.nb-vignette .nb-toast span { color: #b6632e !important; }
.nb-vignette .nb-tourism { bottom: 18px; width: auto; max-width: calc(100% - 40px); padding: 7px 12px; border: 1px solid rgba(211,246,239,.26); border-radius: 4px; color: rgba(226,250,244,.76) !important; background: rgba(0,35,52,.35); font-size: 10px; letter-spacing: .04em; white-space: normal; }
.nb-vignette .nb-tourism b { margin-right: 7px; color: #f3d899 !important; letter-spacing: .08em; text-transform: uppercase; }
.nb-vignette .nb-under-shape { display: none; }
.nb-vignette .nb-under-shape::before,
.nb-vignette .nb-under-shape::after { content: none; }
.nb-vignette .nb-shadow { top: 62%; left: 43%; width: 180px; height: 44px; background: rgba(0,18,31,.58); filter: blur(9px); box-shadow: 0 0 34px 9px rgba(0,13,25,.22); transition: opacity 1s; }
.nb-vignette.is-darkening .nb-shadow { opacity: .78; transform: none; animation: nb-ocean-shadow-orbit 9s linear infinite; }
.nb-vignette .nb-deep-buoy { position: absolute; z-index: 5; bottom: 27px; left: 6vw; width: 32px; height: 78px; border: 3px solid #8e302c; border-radius: 50% 50% 7px 7px; background: repeating-linear-gradient(180deg,#d94c43 0 20px,#f1dfbd 20px 31px,#d94c43 31px 54px); box-shadow: 0 9px 13px rgba(0,28,43,.35); animation: nb-deep-buoy 3s ease-in-out infinite; }
.nb-vignette .nb-deep-buoy::before { content: ""; position: absolute; top: -23px; left: 50%; width: 3px; height: 23px; background: #6b332c; transform: translateX(-50%); }
.nb-vignette .nb-deep-buoy::after { content: ""; position: absolute; top: -28px; left: 50%; width: 13px; height: 13px; border-radius: 50%; background: #f2c75d; box-shadow: 0 0 13px rgba(242,199,93,.6); transform: translateX(-50%); }
.nb-vignette .nb-deep-buoy i { position: absolute; right: -17px; bottom: -12px; left: -17px; height: 18px; border-top: 3px solid rgba(216,250,244,.58); border-radius: 50%; }
.nb-vignette .nb-deep-buoy span { position: absolute; top: 16px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #6f211f; transform: translateX(-50%); }

/* The last tutorial panel is now the deck of a too-cheerful tour boat. */
.nb-vignette .nb-scene-impact { --bump-x: 2px; --bump-y: 4px; --bump-r: .08deg; --prompt-speed: 1.15s; background: radial-gradient(ellipse at 50% 110%,#0a7790 0,#06445d 46%,#022b40 100%); }
.nb-vignette.is-impact-scene .nb-topbar { border-bottom-color: rgba(2,65,78,.28); background: rgba(199,235,221,.72); box-shadow: inset 0 -3px rgba(13,103,112,.08); }
.nb-vignette.is-impact-scene .nb-topbar::after { opacity: .18; }
.nb-vignette .nb-impact-board { inset: 8% 7% 17%; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform-origin: 50% 100%; }
.nb-vignette .nb-impact-board::after { display: none; }
.nb-vignette .nb-ship-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; transition: opacity .34s ease,filter .34s ease; }
.nb-vignette .nb-ship-art-clean { opacity: 1; }
.nb-vignette .nb-ship-art-stressed,.nb-vignette .nb-ship-art-critical { opacity: 0; }
.nb-vignette[data-impact="1"] .nb-ship-art-clean { opacity: 0; }
.nb-vignette[data-impact="1"] .nb-ship-art-stressed { opacity: 1; }
.nb-vignette[data-impact="2"] .nb-ship-art-clean { opacity: 0; }
.nb-vignette[data-impact="2"] .nb-ship-art-stressed { opacity: 1; filter: brightness(.96) contrast(1.04); }
.nb-vignette[data-impact="3"] .nb-ship-art-clean { opacity: 0; }
.nb-vignette[data-impact="3"] .nb-ship-art-stressed { opacity: .34; filter: brightness(.9) saturate(.9); }
.nb-vignette[data-impact="3"] .nb-ship-art-critical { opacity: .72; }
.nb-vignette[data-impact="4"] .nb-ship-art-clean,.nb-vignette[data-impact="4"] .nb-ship-art-stressed { opacity: 0; }
.nb-vignette[data-impact="4"] .nb-ship-art-critical { opacity: 1; filter: brightness(.86) saturate(.84) contrast(1.1); }
.nb-vignette .nb-impact-logo { z-index: 4; top: 13%; padding: 7px 15px; border-radius: 2px; color: #493421; background: #f3e4bb; box-shadow: 0 3px 0 #755539; font-size: 16px; }
.nb-vignette .nb-impact-logo span { color: #c87735; }
.nb-vignette .nb-impact-card { top: 31%; z-index: 2; overflow: hidden; padding: 0; color: #214d54; background: #f7efd8; box-shadow: 0 18px 25px rgba(60,38,20,.38); transform-origin: center; }
.nb-vignette .nb-impact-card-art { position: relative; height: 112px; overflow: hidden; background: linear-gradient(#72cbc5 0 53%,#147b91 53% 76%,#e6c277 76%); }
.nb-vignette .nb-impact-card-copy { padding: 8px 9px; }
.nb-vignette .nb-impact-card-copy small,.nb-vignette .nb-impact-card-copy b,.nb-vignette .nb-impact-card-copy span { display: block; color: #214d54 !important; }
.nb-vignette .nb-impact-card-copy small { color: #477d7c !important; font-size: 6px; font-weight: 800; letter-spacing: .11em; }
.nb-vignette .nb-impact-card-copy b { margin: 4px 0 5px; font: 700 14px/1 Georgia,serif; }
.nb-vignette .nb-impact-card-copy span { font-size: 7px; line-height: 1.35; }
.nb-vignette .nb-debris i { background: linear-gradient(105deg,#6d482d 0 18%,#d7ae69 20% 72%,#5b3b27 74%); clip-path: polygon(0 42%,78% 0,100% 19%,67% 100%,19% 82%); }
.nb-vignette .nb-debris i:nth-child(even) { clip-path: polygon(8% 0,100% 31%,73% 100%,0 77%); }
.nb-vignette .nb-glass-boat-art::before { content: ""; position: absolute; top: 34px; left: 29px; width: 90px; height: 35px; border-radius: 6px 15px 20px 20px; background: #fff0bd; box-shadow: inset 0 -10px #b35d3f; transform: rotate(-3deg); }
.nb-vignette .nb-glass-boat-art::after { content: ""; position: absolute; top: 16px; left: 68px; width: 4px; height: 35px; background: #76543b; }
.nb-vignette .nb-glass-boat-art i { position: absolute; z-index: 2; top: 44px; left: 51px; width: 43px; height: 16px; border: 3px solid #3d9ba0; background: rgba(177,235,224,.7); }
.nb-vignette .nb-fish-food-art i { position: absolute; top: 66px; left: 30px; width: 27px; height: 14px; border-radius: 60% 45% 45% 60%; background: #f3c75d; }
.nb-vignette .nb-fish-food-art i::after { content: ""; position: absolute; right: -9px; top: 1px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #f3c75d; }
.nb-vignette .nb-fish-food-art i:nth-child(2){top:84px;left:78px;transform:scale(.75)}.nb-vignette .nb-fish-food-art i:nth-child(3){top:50px;left:98px;transform:scale(.55)}
.nb-vignette .nb-lookout-art i { position: absolute; top: 38px; left: 61px; width: 29px; height: 64px; border-radius: 18px 18px 5px 5px; background: #e77b62; }
.nb-vignette .nb-lookout-art i::before { content: ""; position: absolute; top: -18px; left: 6px; width: 18px; height: 22px; border-radius: 50%; background: #bd7e5a; }
.nb-vignette .nb-lookout-art i::after { content: ""; position: absolute; top: 7px; right: -24px; width: 31px; height: 5px; border-radius: 5px; background: #e77b62; transform: rotate(-28deg); transform-origin: left; }
.nb-vignette .nb-impact-message { z-index: 4; bottom: 7%; border: 2px solid #8b643e; color: #3f3021; background: #fff0c6; box-shadow: 0 6px 0 rgba(82,54,31,.32); }
.nb-vignette .nb-boat-wake { position: absolute; right: -5%; bottom: 1%; left: -5%; height: 16%; border-top: 8px double rgba(214,249,244,.45); border-radius: 50%; animation: nb-boat-wake 2.2s ease-in-out infinite; }
.nb-vignette .nb-impact-prompt { z-index: 14; bottom: 13px; display: grid; place-items: center; min-width: 230px; margin: 0; color: #f5eee0; text-shadow: 0 2px 10px #001a29; animation: nb-prompt-throb var(--prompt-speed) ease-in-out infinite; }
.nb-vignette .nb-impact-prompt b { color: #fff7e7 !important; font-size: 14px; letter-spacing: .2em; }
.nb-vignette .nb-impact-prompt small { max-height: 20px; margin-top: 3px; overflow: hidden; color: #f2b28e; font-size: 9px; letter-spacing: .14em; opacity: .82; transition: color .3s,opacity .3s,transform .3s; }
.nb-vignette .nb-impact-prompt span { color: #fff; font-size: 22px; }
.nb-vignette[data-impact="1"] { --bump-x: 4px; --bump-y: 7px; --bump-r: .18deg; --prompt-speed: .9s; }
.nb-vignette[data-impact="2"] { --bump-x: 7px; --bump-y: 11px; --bump-r: .34deg; --prompt-speed: .68s; }
.nb-vignette[data-impact="3"] { --bump-x: 11px; --bump-y: 17px; --bump-r: .58deg; --prompt-speed: .48s; }
.nb-vignette[data-impact="4"] { --bump-x: 17px; --bump-y: 25px; --bump-r: .9deg; --prompt-speed: .3s; }
.nb-vignette .nb-shark { bottom: -78%; }
.nb-vignette .nb-shark-throat { position: absolute; z-index: 12; top: 69%; left: 50%; width: 34vw; height: 30vh; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 58%,#050607 0 24%,#2c2023 47%,#60464a 72%,#8b6b67 100%); box-shadow: inset 0 0 60px 22px rgba(0,0,0,.7); transform: translate(-50%,-50%) scale(.28); transform-origin: 50%; will-change: opacity,transform; }
.nb-vignette .nb-shark-throat::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: #000; opacity: 0; }
.nb-vignette .nb-shark-attack-art { position: absolute; z-index: 13; bottom: -108%; left: 50%; width: max(98vw,820px); max-width: none; height: auto; pointer-events: none; opacity: 0; filter: brightness(.88) saturate(.9) contrast(1.06) drop-shadow(0 -24px 42px rgba(0,18,28,.72)); transform: translateX(-50%) scale(.84); transform-origin: 50% 100%; will-change: bottom,opacity,transform; }
.nb-vignette .nb-swallow-blackout { position: absolute; z-index: 29; inset: 0; pointer-events: none; background: #000; opacity: 0; }
.nb-vignette[data-impact="1"] .nb-shark { bottom: -72%; }
.nb-vignette[data-impact="2"] .nb-shark { bottom: -64%; }
.nb-vignette[data-impact="3"] .nb-shark { bottom: -55%; }
.nb-vignette[data-impact="4"] .nb-shark { bottom: -44%; }
.nb-vignette[data-impact="2"] .nb-impact-board { animation: nb-boat-list-soft 2.7s ease-in-out infinite; }
.nb-vignette[data-impact="3"] .nb-impact-board { animation: nb-boat-list-medium 1.55s ease-in-out infinite; }
.nb-vignette[data-impact="4"] .nb-impact-board { animation: nb-boat-list-hard .82s ease-in-out infinite; }
.nb-vignette[data-impact="2"] .nb-impact-card-one { transform: translate(-14px,-10px) rotate(-9deg); }
.nb-vignette[data-impact="3"] .nb-impact-card-three { transform: translate(30px,20px) rotate(15deg); }
.nb-vignette[data-impact="4"] .nb-impact-card-one { transform-origin: 12px 12px; transform: rotate(68deg) translate(18px,-2px); }
.nb-vignette[data-impact="4"] .nb-impact-card-two { transform: translateY(-32px) rotate(-8deg); }
.nb-vignette[data-impact="4"] .nb-impact-card-three { transform: translate(-48px,205px) rotate(88deg) scale(.94); }
.nb-vignette[data-impact="2"] .nb-impact-prompt small { color: #ffc18f; opacity: .92; }
.nb-vignette[data-impact="3"] .nb-impact-prompt small { color: #ff9e7d; opacity: 1; transform: scale(1.05); }
.nb-vignette[data-impact="4"] .nb-impact-prompt small { color: #ff775f; opacity: 1; transform: scale(1.12); }
.nb-vignette.is-impact-scene[data-impact="2"] .nb-topbar::after { opacity: .3; }
.nb-vignette.is-impact-scene[data-impact="3"] .nb-topbar { background: rgba(178,218,207,.76); filter: saturate(.86) contrast(1.04); box-shadow: inset 0 -4px rgba(3,72,88,.16); }
.nb-vignette.is-impact-scene[data-impact="3"] .nb-topbar::after { opacity: .46; }
.nb-vignette.is-impact-scene[data-impact="4"] .nb-topbar { background: rgba(155,199,194,.78); filter: saturate(.72) contrast(1.08); box-shadow: inset 0 -5px rgba(2,54,70,.24); }
.nb-vignette.is-impact-scene[data-impact="4"] .nb-topbar::after { opacity: .66; }
.nb-vignette.is-impact-scene[data-impact="3"] .nb-progress span:nth-child(even) { transform: translateY(2px) rotate(-2deg); }
.nb-vignette.is-impact-scene[data-impact="4"] .nb-progress span:nth-child(odd) { transform: translateY(-2px) rotate(3deg); }
.nb-vignette.is-bumping .nb-scroll,.nb-vignette.is-bumping .nb-topbar { animation: nb-screen-bump .4s cubic-bezier(.2,.8,.25,1); }
.nb-vignette.is-bumping[data-impact="2"] .nb-impact-card { animation: nb-card-rattle .34s linear; }
.nb-vignette.is-bumping[data-impact="3"] .nb-impact-card { animation: nb-card-rattle-hard .48s linear; }
.nb-vignette.is-bumping[data-impact="4"] .nb-impact-card-one { animation: nb-card-hinge .72s cubic-bezier(.2,.8,.25,1) forwards; }
.nb-vignette.is-bumping[data-impact="4"] .nb-impact-card-two { animation: nb-card-rattle-hard .28s linear 2; }
.nb-vignette.is-bumping[data-impact="4"] .nb-impact-card-three { animation: nb-card-fall .7s cubic-bezier(.35,.05,.8,.3) forwards; }
.nb-vignette.is-attacking .nb-shark { bottom: -44%; opacity: 0; }
.nb-vignette.is-attacking .nb-shark-throat { animation: nb-throat-open 1.68s cubic-bezier(.2,.72,.2,1) forwards; }
.nb-vignette.is-attacking .nb-shark-throat::after { animation: nb-throat-blacken 1.68s ease-in forwards; }
.nb-vignette.is-attacking .nb-shark-attack-art { animation: nb-shark-attack-rise 1.3s cubic-bezier(.12,.78,.18,1) forwards; }
.nb-vignette.is-attacking .nb-swallow-blackout { animation: nb-swallow-blackout 2.5s ease-in-out forwards; }
.nb-vignette.is-attacking .nb-scroll { scrollbar-width: none; }
.nb-vignette.is-attacking .nb-scroll::-webkit-scrollbar { display: none; }
.nb-vignette.is-attacking .nb-impact-prompt { animation: nb-prompt-swallowed .38s ease-in forwards; }
.nb-vignette.is-attacking .nb-topbar { opacity: 1; pointer-events: none; animation: nb-topbar-damage 1.35s ease-in forwards; }
.nb-vignette.is-attacking .nb-topbar::after { background: radial-gradient(circle at 61% 48%,rgba(194,59,52,.78) 0 3px,transparent 4px),radial-gradient(ellipse at 63% 29%,rgba(194,59,52,.62) 0 2px,transparent 3px),radial-gradient(ellipse at 87% 67%,rgba(194,59,52,.5) 0 2px,transparent 3px),radial-gradient(ellipse at 91% 35%,rgba(194,59,52,.44) 0 1px,transparent 3px),repeating-linear-gradient(96deg,transparent 0 82px,rgba(3,73,88,.13) 84px 87px,transparent 90px); opacity: .82; }
.nb-vignette.is-attacking .nb-impact-board { animation: nb-bite .9s .42s forwards; }
.nb-vignette.is-attacking .nb-real-content { opacity: 0; }
.nb-vignette.is-swallowed .nb-shark-attack-art,.nb-vignette.is-swallowed .nb-shark-throat,.nb-vignette.is-revealing .nb-shark-attack-art,.nb-vignette.is-revealing .nb-shark-throat { animation: none !important; opacity: 0 !important; }
.nb-vignette.is-revealing .nb-real-content { animation: nb-menu-emerge .9s .35s ease-out forwards; }
@keyframes nb-screen-bump{0%,100%{transform:none}22%{transform:translate(var(--bump-x),calc(0px - var(--bump-y))) rotate(var(--bump-r))}48%{transform:translate(calc(0px - var(--bump-x)),var(--bump-y))}72%{transform:translate(var(--bump-x),calc(0px - var(--bump-y)))}}
@keyframes nb-shark-attack-rise{0%{bottom:-108%;opacity:0;transform:translateX(-50%) scale(.84)}14%{opacity:1}68%{bottom:-19%;opacity:1;transform:translateX(-50%) scale(1.01)}100%{bottom:-13%;opacity:1;transform:translateX(-50%) scale(1.05)}}
@keyframes nb-throat-open{0%,16%{opacity:0;transform:translate(-50%,-50%) scale(.28)}38%{opacity:.72}72%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(4.8)}}
@keyframes nb-throat-blacken{0%,45%{opacity:0}78%{opacity:.52}100%{opacity:1}}
@keyframes nb-swallow-blackout{0%,62%{opacity:0}68%,80%{opacity:1}100%{opacity:0}}
@keyframes nb-menu-emerge{0%{opacity:0;filter:blur(8px);transform:translateY(12px) scale(.985)}100%{opacity:1;filter:none;transform:none}}
@keyframes nb-prompt-swallowed{to{opacity:0;transform:translate(-50%,38px) scale(.72)}}
@keyframes nb-topbar-damage{0%,42%{opacity:1;transform:none}48%{transform:translate(4px,-2px) skewX(-.4deg)}55%{transform:translate(-3px,1px)}78%{opacity:.94;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@keyframes nb-boat-list-soft{0%,100%{transform:translateY(-12px) rotate(-.45deg)}50%{transform:translateY(-17px) rotate(.48deg)}}
@keyframes nb-boat-list-medium{0%,100%{transform:translateY(-24px) rotate(-1deg)}50%{transform:translateY(-34px) rotate(1.15deg)}}
@keyframes nb-boat-list-hard{0%,100%{transform:translate(-3px,-38px) rotate(-1.7deg)}50%{transform:translate(4px,-52px) rotate(1.8deg)}}
@keyframes nb-card-rattle{0%,100%{transform:rotate(0)}20%{transform:translate(-4px,2px) rotate(-3deg)}45%{transform:translate(5px,-3px) rotate(4deg)}70%{transform:translate(-3px,-2px) rotate(-2deg)}}
@keyframes nb-card-rattle-hard{0%,100%{transform:rotate(0)}16%{transform:translate(-9px,5px) rotate(-7deg)}35%{transform:translate(11px,-7px) rotate(9deg)}56%{transform:translate(-8px,-5px) rotate(-6deg)}78%{transform:translate(7px,4px) rotate(5deg)}}
@keyframes nb-card-hinge{0%{transform:translate(-14px,-10px) rotate(-9deg);transform-origin:12px 12px}35%{transform:rotate(84deg) translate(22px,-4px)}65%{transform:rotate(58deg) translate(16px,-1px)}100%{transform:rotate(68deg) translate(18px,-2px)}}
@keyframes nb-card-fall{0%{transform:translate(30px,20px) rotate(15deg)}38%{transform:translate(16px,50px) rotate(34deg)}100%{transform:translate(-48px,205px) rotate(88deg) scale(.94)}}
@keyframes nb-prompt-throb{0%,100%{transform:translateX(-50%) scale(1);opacity:.68}50%{transform:translateX(-50%) scale(1.13);opacity:1}}
@keyframes nb-boat-wake{50%{transform:translateY(9px) scaleX(.96);opacity:.6}}
@keyframes nb-ocean-shadow-orbit{0%,100%{transform:translate(-70px,0) scale(.96)}25%{transform:translate(0,-23px) scale(.89)}50%{transform:translate(110px,0) scale(.96)}75%{transform:translate(0,27px) scale(1.08)}}
@keyframes nb-deep-buoy{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(7px) rotate(3deg)}}
.nb-vignette .nb-win-modal button { min-height: 0 !important; padding: 9px 18px !important; border: 0 !important; border-radius: 50px !important; color: #fff !important; background: #3d9a96 !important; box-shadow: none !important; }
.nb-vignette .nb-real-content nav button { padding: 7px 0 !important; border: 0 !important; border-bottom: 1px solid transparent !important; color: #cfc5b2 !important; transform: none !important; }
.nb-vignette .nb-real-content nav button:hover { border-bottom-color: #9e302e !important; color: #fff !important; }
.nb-vignette .nb-enter { padding: 13px 22px !important; border: 1px solid #72554a !important; border-radius: 2px !important; color: #e3d7c4 !important; background: rgba(255,255,255,.03) !important; transform: none !important; }

/* Keep the scroll affordance present throughout the guided portion. */
.nb-vignette .nb-last-instruction { z-index: 8; bottom: 7px; padding: 0; border: 0; border-radius: 0; color: #164f57; background: none; box-shadow: none; font-size: 10px; font-weight: 800; line-height: 1.1; text-align: center; text-shadow: 0 1px rgba(239,255,247,.92),0 2px 10px rgba(238,255,248,.8); white-space: nowrap; }
.nb-vignette .nb-last-instruction span { display: block; width: 18px; height: 13px; margin: 3px auto 0; color: #164f57 !important; font-size: 14px; line-height: 11px; text-align: center; text-shadow: 0 1px rgba(239,255,247,.92),0 2px 8px rgba(238,255,248,.8) !important; animation: nb-cue-arrow 1.5s ease-in-out infinite; }
.nb-vignette .nb-scene-bag .nb-last-instruction,
.nb-vignette .nb-scene-friends .nb-last-instruction,
.nb-vignette .nb-scene-water .nb-last-instruction { color: rgba(239,255,249,.95); text-shadow: 0 2px 9px rgba(0,25,39,.84); }
.nb-vignette .nb-scene-bag .nb-last-instruction span,
.nb-vignette .nb-scene-friends .nb-last-instruction span,
.nb-vignette .nb-scene-water .nb-last-instruction span { color: rgba(239,255,249,.95) !important; text-shadow: 0 2px 8px rgba(0,25,39,.86) !important; }
.nb-vignette .nb-scene-deep .nb-last-instruction,
.nb-vignette .nb-scene-malfunction .nb-last-instruction { color: rgba(235,255,249,.94); background: none; box-shadow: none; text-shadow: 0 2px 8px rgba(0,20,33,.82); }
.nb-vignette .nb-scene-deep .nb-last-instruction span,
.nb-vignette .nb-scene-malfunction .nb-last-instruction span { color: rgba(235,255,249,.94) !important; text-shadow: 0 2px 8px rgba(0,20,33,.72) !important; }
.nb-vignette .nb-scene-bag .nb-meters { bottom: 7vh; }
.nb-vignette .nb-scene-deep .nb-tourism { bottom: 42px; }
@keyframes nb-cue-arrow { 0%,100% { transform: translateY(0); opacity: .72; } 50% { transform: translateY(3px); opacity: 1; } }

/* Quiet final reveal: one message, with something still moving below it. */
.nb-vignette .nb-real-content > p { margin-bottom: 30px; }
.nb-vignette .nb-real-description { color: rgba(215,224,214,.78); font: 500 clamp(13px,1.1vw,16px)/1.5 Barlow,sans-serif; letter-spacing: .08em; }
.nb-vignette .nb-real-content .nb-enter { margin-top: 43px; }
.nb-vignette .nb-real-shark { position: absolute; z-index: 1; top: 54%; left: -34vw; width: min(430px,34vw); height: 112px; pointer-events: none; opacity: 0; filter: blur(1.2px); }
.nb-vignette .nb-scene-real.is-visible .nb-real-shark { animation: nb-real-shark-swim 24s linear 1.1s infinite; }
.nb-vignette .nb-real-shark::before { content: ""; position: absolute; inset: 22px 58px 18px 0; border-radius: 58% 45% 48% 55% / 52% 46% 54% 48%; background: linear-gradient(180deg,rgba(0,8,13,.8),rgba(0,17,25,.52)); box-shadow: 0 0 34px rgba(0,5,10,.28); transform: rotate(-2deg); }
.nb-vignette .nb-real-shark::after { content: ""; position: absolute; top: 25px; right: 0; width: 92px; height: 76px; background: rgba(0,10,16,.66); clip-path: polygon(0 43%,100% 0,70% 50%,100% 100%,0 58%); }
.nb-vignette .nb-real-shark i { position: absolute; z-index: 1; top: 4px; left: 44%; width: 74px; height: 49px; border-radius: 90% 8% 68% 25% / 94% 15% 82% 10%; background: rgba(0,9,15,.72); transform: skewX(-14deg) rotate(-8deg); transform-origin: 50% 100%; }
@keyframes nb-real-shark-swim { 0% { left:-34vw; opacity:0; transform:translateY(18px) scaleX(-1) scale(.88); } 6% { opacity:.23; } 44% { left:112vw; opacity:.18; transform:translateY(-12px) scaleX(-1) scale(1); } 49% { left:112vw; opacity:0; transform:translateY(-12px) scaleX(-1) scale(.94); } 51% { left:112vw; opacity:0; transform:translateY(-12px) scaleX(1) scale(.94); } 56% { opacity:.22; } 94% { left:-34vw; opacity:.18; transform:translateY(15px) scaleX(1) scale(.92); } 100% { left:-34vw; opacity:0; transform:translateY(18px) scaleX(1) scale(.88); } }

/* The vignette remains scroll-driven without exposing browser chrome. */
.nb-vignette .nb-scroll { scrollbar-width: none; }
.nb-vignette .nb-scroll::-webkit-scrollbar { display: none; }

/* A weathered channel marker, based on a real steel navigation buoy. */
.nb-vignette .nb-deep-buoy { bottom: 24px; width: 46px; height: 92px; border: 0; border-radius: 0; background: linear-gradient(90deg,#692725 0,#a43b32 18%,#bd4b3d 48%,#7d2b28 82%,#4d2020 100%) bottom/100% 28px no-repeat,linear-gradient(74deg,transparent 0 41%,#6f2927 43% 49%,#b14237 51% 56%,transparent 58%) 2px 18px/42px 52px no-repeat,linear-gradient(106deg,transparent 0 42%,#8a302c 44% 50%,#582424 52% 57%,transparent 59%) 2px 18px/42px 52px no-repeat; box-shadow: 0 10px 16px rgba(0,24,38,.42); filter: saturate(.82) contrast(1.06); }
.nb-vignette .nb-deep-buoy::before { top: 13px; left: -5px; width: 56px; height: 11px; border: 1px solid #542522; border-radius: 50%; background: radial-gradient(ellipse at 48% 30%,#bd5443 0 22%,#8f342e 54%,#51201f 100%); box-shadow: inset 0 2px rgba(231,135,102,.35),0 3px 4px rgba(40,13,16,.35); transform: none; }
.nb-vignette .nb-deep-buoy::after { top: -8px; left: 19px; width: 8px; height: 25px; border: 1px solid #4c2422; border-radius: 3px 3px 1px 1px; background: linear-gradient(#d86a58 0 7px,#fff0d0 8px 10px,#71302a 11px); box-shadow: inset 2px 0 rgba(255,196,151,.18),0 -4px 7px rgba(238,91,72,.24); transform: none; }
.nb-vignette .nb-deep-buoy span { top: 39px; left: 50%; width: 35px; height: 22px; border: 1px solid #542321; border-radius: 1px; color: rgba(255,232,199,.78); background: linear-gradient(105deg,#7d2926,#a83b32 48%,#6d2524); box-shadow: inset 0 0 0 1px rgba(210,103,76,.22),2px 3px 4px rgba(47,17,20,.28); font: 700 10px/20px Georgia,serif; text-align: center; transform: translateX(-50%) rotate(-2deg); }
.nb-vignette .nb-deep-buoy span::before { content: "25"; }
.nb-vignette .nb-deep-buoy span::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 2px; background: rgba(245,220,184,.45); transform: rotate(-18deg); }
.nb-vignette .nb-deep-buoy i { right: -20px; bottom: -9px; left: -20px; height: 17px; border-top: 2px solid rgba(216,250,244,.48); border-radius: 50%; }

/* Generated buoy art replaces the CSS construction while retaining its water motion. */
.nb-vignette .nb-deep-buoy { bottom: 20px; width: 48px; height: 142px; border: 0; border-radius: 0; background: none; box-shadow: none; filter: none; }
.nb-vignette .nb-deep-buoy::before,
.nb-vignette .nb-deep-buoy::after { content: none; }
.nb-vignette .nb-deep-buoy img { display: block; width: 100%; height: 100%; object-fit: fill; filter: saturate(.88) contrast(1.04) drop-shadow(0 8px 7px rgba(0,22,35,.42)); }
.nb-vignette .nb-deep-buoy i { right: -18px; bottom: -7px; left: -18px; height: 15px; border-top: 2px solid rgba(216,250,244,.48); border-radius: 50%; }

/* Slide 01 keeps a polished, inspectable teaser hand after its opening fan. */
.nb-vignette .nb-deck-demo { grid-template-columns: minmax(390px,1fr) 165px; }
.nb-vignette .nb-mini-cards { height: 370px; isolation: isolate; }
.nb-vignette .nb-mini-card { position: absolute; z-index: calc(var(--i) + 1); top: 46%; left: 47%; width: 154px; height: 224px; margin: 0; padding: 0; border: 0; outline: 0; opacity: 0; transform: translate(-50%,-50%) translate(190px,54px) rotate(1deg) scale(.72); transform-origin: 50% 92%; }
.nb-vignette .nb-scene-bag.is-visible .nb-mini-card { animation: nb-teaser-fan .85s calc(.3s + var(--i)*.16s) cubic-bezier(.16,.84,.22,1) forwards; }
.nb-vignette .nb-mini-card:hover,.nb-vignette .nb-mini-card:focus-visible { z-index: 30; }
.nb-vignette .nb-mini-card-face { position: relative; width: 100%; height: 100%; overflow: hidden; border: 6px solid #fff6dc; border-radius: 12px; color: #214d54; background: #f7efd9; box-shadow: 0 14px 30px rgba(17,74,78,.27),0 0 0 1px rgba(48,119,117,.5); transition: transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,filter .28s ease; }
.nb-vignette .nb-mini-card:hover .nb-mini-card-face,.nb-vignette .nb-mini-card:focus-visible .nb-mini-card-face { transform: translate(var(--hover-x),-26px) scale(1.42); box-shadow: 0 28px 58px rgba(6,54,61,.38),0 0 0 2px rgba(255,248,219,.9); filter: saturate(1.04) contrast(1.02); }
.nb-vignette .nb-mini-card:focus-visible .nb-mini-card-face { outline: 3px solid #ffd66b; outline-offset: 4px; }
.nb-vignette .nb-mini-card-art { position: relative; height: 116px; overflow: hidden; background: linear-gradient(#78cfca 0 55%,#12809a 55% 75%,#e8c679 75%); }
.nb-vignette .nb-mini-card-art::after { content: ""; position: absolute; right: -18px; bottom: 25px; left: -18px; height: 17px; border-top: 3px solid rgba(231,255,246,.58); border-radius: 50%; }
.nb-vignette .nb-mini-card-art i { position: absolute; z-index: 2; display: block; }
.nb-vignette .nb-mini-card-copy { padding: 8px 9px 9px; }
.nb-vignette .nb-mini-card-copy small,.nb-vignette .nb-mini-card-copy b,.nb-vignette .nb-mini-card-copy p { display: block; color: #214d54 !important; }
.nb-vignette .nb-mini-card-copy small { color: #4a8582 !important; font-size: 5px; font-weight: 800; letter-spacing: .11em; }
.nb-vignette .nb-mini-card-copy b { margin: 4px 0 5px; font: 700 14px/1 Georgia,serif; }
.nb-vignette .nb-mini-card-copy p { margin: 0; font-size: 6.5px; line-height: 1.35; }
.nb-vignette .nb-mini-card-face > em { position: absolute; z-index: 4; top: 6px; left: 6px; display: grid; width: 25px; height: 25px; place-items: center; border: 3px solid #fff6dc; border-radius: 50%; color: #fff; background: #df8a4d; box-shadow: 0 2px 5px rgba(0,0,0,.2); font: normal 800 12px Georgia,serif; }
.nb-vignette .nb-mini-art-sunscreen i { top: 34px; left: 60px; width: 35px; height: 57px; border: 3px solid #fff1c8; border-radius: 8px 8px 12px 12px; background: linear-gradient(#f9e0a0 0 22%,#ef785f 23% 66%,#f7ead0 67%); box-shadow: 0 5px 9px rgba(0,62,72,.24); transform: rotate(5deg); }
.nb-vignette .nb-mini-art-sunscreen i::before { content: ""; position: absolute; top: -10px; left: 8px; width: 14px; height: 10px; border-radius: 3px 3px 0 0; background: #ef785f; }
.nb-vignette .nb-mini-art-ball i { top: 35px; left: 50px; width: 58px; height: 58px; border: 4px solid #fff1cd; border-radius: 50%; background: conic-gradient(#ed7963 0 20%,#f7e5a9 20% 40%,#58b9b4 40% 60%,#f7e5a9 60% 80%,#ed7963 80%); box-shadow: 0 6px 10px rgba(0,58,70,.25); }
.nb-vignette .nb-mini-art-lemonade i { top: 31px; left: 57px; width: 43px; height: 65px; border: 4px solid rgba(255,248,214,.9); border-radius: 5px 5px 12px 12px; background: linear-gradient(rgba(255,255,255,.32) 0 20%,#f3cb59 21% 88%,#df9e3e 89%); box-shadow: inset 7px 0 rgba(255,255,255,.18),0 6px 10px rgba(0,58,70,.2); transform: rotate(-3deg); }
.nb-vignette .nb-mini-art-lemonade i::before { content: ""; position: absolute; top: -22px; left: 27px; width: 4px; height: 31px; border-radius: 4px; background: #e76f60; transform: rotate(14deg); }
.nb-vignette .nb-mini-art-lemonade i::after { content: ""; position: absolute; top: 6px; right: -10px; width: 21px; height: 21px; border: 3px solid #f6df72; border-radius: 50%; background: #f4c94e; }
.nb-vignette .nb-mini-art-flipflops i { top: 30px; left: 45px; width: 27px; height: 67px; border-radius: 52% 48% 44% 56%; background: #f3c667; box-shadow: 42px 7px 0 #e87562,0 7px 10px rgba(0,58,70,.22); transform: rotate(12deg); }
.nb-vignette .nb-mini-art-flipflops i::before,.nb-vignette .nb-mini-art-flipflops i::after { content: ""; position: absolute; top: 15px; width: 3px; height: 25px; border-radius: 3px; background: #fff0c6; transform-origin: top; }
.nb-vignette .nb-mini-art-flipflops i::before { left: 12px; transform: rotate(29deg); }
.nb-vignette .nb-mini-art-flipflops i::after { left: 12px; transform: rotate(-29deg); }
.nb-vignette .nb-mini-art-book i { top: 31px; left: 40px; width: 76px; height: 62px; border: 5px solid #fff0cb; border-radius: 5px 12px 12px 5px; background: linear-gradient(90deg,#e87562 0 48%,#bc5c50 49% 51%,#f0c967 52%); box-shadow: 0 7px 11px rgba(0,55,67,.25); transform: rotate(-4deg); }
.nb-vignette .nb-mini-art-book i::after { content: ""; position: absolute; top: 12px; right: 9px; width: 20px; height: 3px; background: rgba(255,247,213,.7); box-shadow: 0 8px rgba(255,247,213,.55),0 16px rgba(255,247,213,.4); }
.nb-vignette .nb-mini-art-shells i { top: 42px; left: 49px; width: 57px; height: 45px; border: 4px solid #fff0cf; border-radius: 75% 75% 42% 42% / 92% 92% 34% 34%; background: repeating-conic-gradient(from -35deg at 50% 100%,#ef9a7c 0 12deg,#f7d99c 13deg 25deg); box-shadow: 0 6px 9px rgba(0,55,67,.24); }
.nb-vignette .nb-mini-art-shells i::after { content: ""; position: absolute; right: 8px; bottom: -7px; left: 8px; height: 10px; border-radius: 50%; background: #fff0cf; }
@keyframes nb-teaser-fan { 0% { opacity: 0; transform: translate(-50%,-50%) translate(190px,54px) rotate(1deg) scale(.72); } 42% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r)) scale(1); } }
@media(max-width:800px){.nb-vignette .nb-deck-demo{grid-template-columns:minmax(210px,1fr) 112px}.nb-vignette .nb-mini-cards{height:250px;transform:none}.nb-vignette .nb-mini-card{top:44%;left:42%;width:108px;height:157px}.nb-vignette .nb-mini-card-art{height:78px}.nb-vignette .nb-mini-card-copy{padding:5px 6px}.nb-vignette .nb-mini-card-copy b{font-size:10px}.nb-vignette .nb-mini-card-copy p{font-size:4.5px}.nb-vignette .nb-mini-card:hover .nb-mini-card-face,.nb-vignette .nb-mini-card:focus-visible .nb-mini-card-face{transform:translate(calc(var(--hover-x)*.55),-18px) scale(1.35)}}

/* Slide 05 begins as a credible final board, then quietly stops adding up. */
.nb-vignette .nb-broken-board { width: min(700px,100%); height: 430px; padding: 0; border-color: rgba(222,255,247,.3); background: linear-gradient(180deg,rgba(25,108,120,.42),rgba(0,39,58,.58)); box-shadow: inset 0 1px rgba(239,255,246,.1),0 30px 80px rgba(0,0,0,.24); }
.nb-vignette .nb-score-header { position: absolute; z-index: 6; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr 1.35fr .78fr; min-height: 70px; align-items: center; padding: 10px 18px; border-bottom: 1px solid rgba(222,255,247,.2); background: linear-gradient(180deg,rgba(3,52,69,.82),rgba(3,52,69,.58)); box-shadow: 0 10px 24px rgba(0,28,43,.12); }
.nb-vignette .nb-score-header small,.nb-vignette .nb-score-header b,.nb-vignette .nb-score-header span { display: block; }
.nb-vignette .nb-score-header small { color: rgba(208,239,232,.66); font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.nb-vignette .nb-round-label b { margin-top: 4px; color: #f7efd9; font: 700 14px/1 Georgia,serif; letter-spacing: .04em; }
.nb-vignette .nb-score-total { text-align: right; }
.nb-vignette .nb-score-total b { margin-top: 3px; color: #fff2c3; font: 700 25px/1 Georgia,serif; }
.nb-vignette .nb-score-total b i { color: #f3c866; font: normal 17px/1 sans-serif; }
.nb-vignette .nb-counter { position: relative; top: auto; left: auto; display: grid; grid-template-columns: 1fr auto; min-height: 48px; align-items: center; padding: 6px 10px; border: 1px solid rgba(242,224,168,.34); border-radius: 8px; background: rgba(245,238,208,.08); box-shadow: inset 0 0 18px rgba(255,238,182,.04); }
.nb-vignette .nb-counter > span { color: #f7efd9; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.nb-vignette .nb-counter > b { display: flex; gap: 7px; align-items: center; margin: 0; color: #fff2c3; font: 700 26px/1 Georgia,serif; }
.nb-vignette .nb-counter > b i { position: relative; display: block; font-style: normal; }
.nb-vignette .nb-count-new { opacity: 0; }
.nb-vignette .nb-count-new { color: #ffb09d; }
.nb-vignette .nb-count-old::after { content: ""; position: absolute; top: 49%; left: -4px; width: 0; height: 3px; border-radius: 3px; background: #ef715f; box-shadow: 0 0 5px rgba(239,113,95,.42); transform: rotate(-16deg); }
.nb-vignette .nb-count-alert { position: absolute; right: 10px; bottom: -13px; color: #ffae9a !important; opacity: 0; white-space: nowrap; }
.nb-vignette .nb-broken-slots { position: absolute; z-index: 3; inset: 83px 18px 92px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; align-items: center; }
.nb-vignette .nb-broken-slots > .nb-score-slot { position: relative; height: 224px; border: 1px solid rgba(223,253,242,.17); border-radius: 12px; background: rgba(4,50,65,.19); box-shadow: inset 0 0 22px rgba(0,27,40,.12); }
.nb-vignette .nb-score-slot::after { content: "BEACH ZONE"; position: absolute; right: 0; bottom: -14px; left: 0; color: rgba(204,238,230,.38); font-size: 6px; font-weight: 800; letter-spacing: .16em; text-align: center; }
.nb-vignette .nb-score-card { position: absolute; z-index: 2; inset: 7px; overflow: hidden; border: 5px solid #fff4d7; border-radius: 10px; color: #24525a; background: #f7efd9; box-shadow: 0 10px 20px rgba(0,24,36,.3),0 0 0 1px rgba(33,100,103,.4); transform: rotate(var(--card-tilt,0deg)); transform-origin: 50% 88%; }
.nb-vignette .nb-score-card-lifeguard { --card-tilt: -1.5deg; }
.nb-vignette .nb-score-card-michael { --card-tilt: 1deg; }
.nb-vignette .nb-score-card-towel { --card-tilt: -.6deg; }
.nb-vignette .nb-score-card-book { --card-tilt: 1.3deg; }
.nb-vignette .nb-score-card-art { position: relative; height: 108px; overflow: hidden; background: linear-gradient(#72c8c2 0 55%,#148097 55% 75%,#e3c276 75%); }
.nb-vignette .nb-score-card-art::after { content: ""; position: absolute; right: -12px; bottom: 21px; left: -12px; height: 13px; border-top: 2px solid rgba(232,255,247,.6); border-radius: 50%; }
.nb-vignette .nb-score-card-art i { position: absolute; z-index: 2; display: block; }
.nb-vignette .nb-score-card-copy { padding: 7px 8px; }
.nb-vignette .nb-score-card-copy small,.nb-vignette .nb-score-card-copy b,.nb-vignette .nb-score-card-copy span { display: block; color: #24525a; }
.nb-vignette .nb-score-card-copy small { color: #4b8783; font-size: 5px; font-weight: 800; letter-spacing: .08em; }
.nb-vignette .nb-score-card-copy b { margin: 4px 0; font: 700 12px/1 Georgia,serif; }
.nb-vignette .nb-score-card-copy span { font-size: 5.6px; line-height: 1.35; }
.nb-vignette .nb-score-card > em { position: absolute; z-index: 3; top: 5px; left: 5px; display: grid; width: 23px; height: 23px; place-items: center; border: 3px solid #fff4d7; border-radius: 50%; color: #fff; background: #df8954; box-shadow: 0 2px 4px rgba(0,0,0,.2); font: normal 800 11px/1 Georgia,serif; }
.nb-vignette .nb-score-card-lifeguard .nb-score-card-art i { top: 25px; left: 50%; width: 30px; height: 56px; border-radius: 14px 14px 6px 6px; background: #ef745e; box-shadow: 0 6px 8px rgba(0,54,66,.2); transform: translateX(-50%); }
.nb-vignette .nb-score-card-lifeguard .nb-score-card-art i::before { content: ""; position: absolute; top: -17px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: #c9805d; }
.nb-vignette .nb-score-card-lifeguard .nb-score-card-art i::after { content: "+"; position: absolute; top: 13px; left: 8px; color: #fff3da; font: 800 20px/1 sans-serif; }
.nb-vignette .nb-score-card-michael .nb-score-card-art i { top: 50px; left: 50%; width: 59px; height: 24px; border: 5px solid #fff0c7; border-radius: 52% 48% 48% 52%; background: #e9765e; box-shadow: 0 5px 8px rgba(0,54,66,.24); transform: translateX(-50%) rotate(-4deg); }
.nb-vignette .nb-score-card-michael .nb-score-card-art i::before { content: ""; position: absolute; top: -7px; left: -10px; width: 16px; height: 16px; border-radius: 50%; background: #c97f5c; }
.nb-vignette .nb-score-card-towel .nb-score-card-art i { top: 25px; left: 50%; width: 68px; height: 63px; border: 4px solid #fff0c9; border-radius: 5px; background: repeating-linear-gradient(90deg,#ef785f 0 12px,#f3d98e 12px 24px,#55b8b0 24px 36px); box-shadow: 0 6px 10px rgba(0,55,67,.22); transform: translateX(-50%) rotate(3deg); }
.nb-vignette .nb-score-card-book .nb-score-card-art i { top: 31px; left: 50%; width: 74px; height: 57px; border: 4px solid #fff0ca; border-radius: 4px 10px 10px 4px; background: linear-gradient(90deg,#e87562 0 48%,#a74e48 49% 52%,#edc56e 53%); box-shadow: 0 7px 10px rgba(0,55,67,.23); transform: translateX(-50%) rotate(-5deg); }
.nb-vignette .nb-score-card-book::after { content: ""; position: absolute; z-index: 5; top: 0; right: 0; width: 0; height: 100%; background: rgba(34,6,16,.52); clip-path: polygon(64% 0,100% 0,100% 100%,28% 100%,53% 78%,35% 62%,61% 46%,44% 29%); opacity: 0; }
.nb-vignette .nb-missing-note { position: absolute; z-index: 1; top: 50%; left: 50%; width: max-content; padding: 7px 9px; border: 1px solid rgba(239,113,95,.45); border-radius: 4px; color: #ffd2c7; background: rgba(48,12,22,.86); box-shadow: 0 7px 16px rgba(0,0,0,.26); font: 700 8px/1 monospace; letter-spacing: .04em; opacity: 0; transform: translate(-50%,-50%) rotate(-2deg); }
.nb-vignette .nb-giant-shadow { z-index: 1; top: 176px; left: -38%; width: 148%; height: 132px; background: rgba(0,13,25,.31); filter: blur(24px); }
.nb-vignette .nb-broken-board .nb-win-modal { position: absolute; z-index: 7; inset: auto auto 15px 50%; width: 340px; padding: 11px 18px 12px; border: 1px solid rgba(126,104,68,.28); border-radius: 9px; box-shadow: 0 12px 30px rgba(0,24,37,.3); transform: translateX(-50%); }
.nb-vignette .nb-broken-board .nb-win-modal .nb-brand-sun { display: none; }
.nb-vignette .nb-broken-board .nb-win-modal h3 { margin: 0 0 2px; font-size: 17px; }
.nb-vignette .nb-broken-board .nb-win-modal p { margin: 0; font-size: 10px; }
.nb-vignette .nb-scene-malfunction.is-visible .nb-count-old::after { animation: nb-count-strike .35s 4.15s ease-out forwards; }
.nb-vignette .nb-scene-malfunction.is-visible .nb-count-new { animation: nb-count-pop .5s 4.4s cubic-bezier(.2,.9,.2,1.3) forwards; }
.nb-vignette .nb-scene-malfunction.is-visible .nb-count-alert { animation: nb-count-alert 3.4s 4.55s ease both; }
.nb-vignette .nb-scene-malfunction.is-visible .nb-score-card-michael { animation: nb-michael-vanish .9s 3.7s cubic-bezier(.55,.05,.7,.2) forwards; }
.nb-vignette .nb-scene-malfunction.is-visible .nb-michael-slot { animation: nb-empty-slot .5s 4.35s ease forwards; }
.nb-vignette .nb-scene-malfunction.is-visible .nb-missing-note { animation: nb-missing-note 5.5s 4.65s ease-in-out infinite; }
.nb-vignette .nb-scene-malfunction.is-visible .nb-score-card-book::after { animation: nb-card-corruption 5.8s 6.1s steps(2,end) infinite; }
@keyframes nb-michael-vanish { 0%,24% { opacity:1; transform:rotate(1deg) translate(0,0); filter:none; } 46% { opacity:.75; transform:rotate(-2deg) translate(0,5px); filter:saturate(.7); } 100% { opacity:0; transform:rotate(4deg) translate(8px,72px); filter:saturate(.25); } }
@keyframes nb-empty-slot { to { border-color:rgba(239,113,95,.42); background:rgba(52,10,21,.2); box-shadow:inset 0 0 24px rgba(39,4,14,.28),0 0 0 1px rgba(239,113,95,.08); } }
@keyframes nb-count-strike { to { width:20px; } }
@keyframes nb-count-pop { 0% { opacity:0; transform:scale(.55); } 70% { opacity:1; transform:scale(1.22); } 100% { opacity:1; transform:scale(1); } }
@keyframes nb-count-alert { 0% { opacity:0; transform:translateY(-3px); } 12%,72% { opacity:1; transform:translateY(0); } 100% { opacity:.5; } }
@keyframes nb-missing-note { 0%,20%,100% { opacity:0; } 23%,71% { opacity:1; } 74% { opacity:.25; transform:translate(-48%,-50%) rotate(-1deg); } 77% { opacity:1; transform:translate(-50%,-50%) rotate(-2deg); } }
@keyframes nb-card-corruption { 0%,7%,11%,100% { width:0; opacity:0; } 8%,10% { width:46%; opacity:1; } }

/* Prevent the real menu from painting before an automatic first-visit intro. */
html.nb-first-visit-pending { background: #b7ecdf; }
html.nb-first-visit-pending body { visibility: hidden; }
html.nb-first-visit-pending .nb-vignette.is-open { visibility: visible; }
@media(max-width:800px){.nb-vignette .nb-broken-board{height:305px}.nb-vignette .nb-score-header{grid-template-columns:.8fr 1.5fr .65fr;min-height:55px;padding:6px 8px}.nb-vignette .nb-round-label b{font-size:10px}.nb-vignette .nb-score-total b{font-size:18px}.nb-vignette .nb-counter{min-height:40px;padding:4px 6px}.nb-vignette .nb-counter>span{font-size:6px}.nb-vignette .nb-counter>b{gap:4px;font-size:19px}.nb-vignette .nb-count-alert{right:4px;bottom:-10px;font-size:5px}.nb-vignette .nb-broken-slots{inset:67px 8px 67px;gap:5px}.nb-vignette .nb-broken-slots>.nb-score-slot{height:155px}.nb-vignette .nb-score-card{inset:3px;border-width:3px}.nb-vignette .nb-score-card-art{height:72px}.nb-vignette .nb-score-card-copy{padding:4px}.nb-vignette .nb-score-card-copy small{font-size:3.5px}.nb-vignette .nb-score-card-copy b{font-size:8px}.nb-vignette .nb-score-card-copy span{font-size:3.8px}.nb-vignette .nb-score-card>em{width:17px;height:17px;border-width:2px;font-size:8px}.nb-vignette .nb-broken-board .nb-win-modal{bottom:8px;width:235px;padding:7px 10px}.nb-vignette .nb-broken-board .nb-win-modal h3{font-size:13px}.nb-vignette .nb-broken-board .nb-win-modal p{font-size:7px}.nb-vignette .nb-score-card-lifeguard .nb-score-card-art i,.nb-vignette .nb-score-card-michael .nb-score-card-art i,.nb-vignette .nb-score-card-towel .nb-score-card-art i,.nb-vignette .nb-score-card-book .nb-score-card-art i{transform:translateX(-50%) scale(.68)}}