@font-face{font-family:NS Sans;src:url(/assets/fonts/dm-sans.woff2) format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:NS Grotesque;src:url(/assets/fonts/bricolage-grotesque.woff2) format('woff2');font-weight:400 800;font-display:swap}
html{scroll-behavior:smooth;background:#fbf7ec;color:#191b13}
body{margin:0}
#site{width:100%;max-width:1600px;margin-inline:auto;container-type:inline-size}
#site .skip-link{position:absolute;z-index:10;top:8px;left:16px;padding:12px 18px;background:#191b13;color:#e5fc53;transform:translateY(-160%)}
#site .skip-link:focus{transform:translateY(0)}
#site a:focus-visible{outline:3px solid currentColor;outline-offset:5px}
#site .ns-nav a,#site .ns-footer a{min-height:44px;display:inline-flex;align-items:center}
#site .play-panel a{min-height:44px}
#site .not-found{padding:70px 6% 100px;min-height:65vh}
#site .not-found h1{font-family:NS Grotesque,Arial,sans-serif;font-size:clamp(60px,10cqw,140px);font-weight:800;line-height:.95;letter-spacing:-.06em;margin-bottom:32px}
#site .not-found p{max-width:420px;font-size:18px;margin-bottom:30px}
#site .not-found a{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:6px}
#site .ns-page{box-sizing:border-box;min-height:0;display:flex;flex-direction:column;font-family:NS Sans,Arial,sans-serif;font-size:15px;line-height:1.45;position:relative;isolation:isolate}
#site .ns-page *{box-sizing:border-box}
#site :where(.ns-page h1,.ns-page h2,.ns-page h3,.ns-page p,.ns-page figure){margin:0}
#site .ns-page h1,#site .ns-page h2,#site .ns-page h3{color:inherit}
#site :where(.ns-page button,.ns-page a){font:inherit;color:inherit}
#site .ns-page a{text-decoration:none}
#site .ns-page a:hover{text-decoration:underline;text-underline-offset:5px}
#site .ns-page button{cursor:pointer}
#site .ns-page img{display:block;max-width:100%;height:auto}
#site .ns-nav{min-height:82px;padding:21px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px}
#site .ns-brand{font-size:28px;font-weight:850;letter-spacing:-1.7px;line-height:1}
#site .ns-nav nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:600}
#site .ns-nav .ns-contact{border-bottom:1px solid currentColor;padding:4px 0}
#site .ns-eyebrow{font:500 11px/1.5 NS Sans,Arial,sans-serif;text-transform:uppercase;letter-spacing:.13em}
#site .ns-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4%;font-size:12px}
#site .ns-footer nav{display:flex;gap:22px}
#site .ns-page [hidden]{display:none!important}
/* Play Mode: the product index is the hero. */
#site .ns-play{--play-bg:#e5fc53;--play-header:#fbf7ec;--play-ink:#191b13;--play-blue:#2d39f5;background:var(--play-bg);color:var(--play-ink);color-scheme:light}
#site .ns-play .ns-nav{min-height:70px;background:var(--play-header)}
#site .ns-play .ns-nav .ns-brand{font-size:23px;letter-spacing:-1px}
#site .play-masthead{padding:3px 4% 25px;background:var(--play-header)}
#site .play-masthead h1{font-family:NS Grotesque,Arial,sans-serif;font-weight:800;font-size:clamp(85px,18.8cqw,209px);line-height:.94;letter-spacing:-.065em;white-space:nowrap}
#site .play-masthead .play-descriptor{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:18px;font-size:16px;line-height:1.3}
#site .play-descriptor .play-index{font-size:11px;text-align:right;text-transform:uppercase;letter-spacing:.08em}
#site .play-product{border-top:1px solid #191b13}
#site .play-product[data-product=vectorflow]{background:#e5fc53}
#site .play-product[data-product=haptrix]{background:#f5a8d3}
#site .play-product[data-product=phonique]{background:var(--play-blue);color:#fbf7ec}
#site .play-heading{width:100%;border:0;background:transparent;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:17px;text-align:left;padding:20px 4%}
#site .play-number{font-size:12px;align-self:start;padding-top:12px}
#site .play-title{display:block;font-family:NS Grotesque,Arial,sans-serif;font-size:clamp(50px,8.5cqw,90px);font-weight:800;line-height:.9;letter-spacing:-.045em}
#site .play-label{display:flex;align-items:center;gap:20px;font-size:14px}
#site .play-panel{display:grid;grid-template-columns:1fr 1.7fr;gap:35px;padding:0 4% 27px 9.5%;align-items:end}
#site .play-panel .play-copy{padding-bottom:3px}
#site .play-panel h3{font-size:29px;font-weight:650;letter-spacing:-1px;line-height:1.05;margin-bottom:12px}
#site .play-panel p{font-size:14px;line-height:1.45;max-width:270px}
#site .play-panel a{display:inline-flex;align-items:center;gap:25px;font-size:12px;font-weight:650;margin-top:24px;border-bottom:1px solid currentColor;padding-bottom:7px}
#site .play-panel figure{min-width:0;transform:rotate(-2deg)}
#site .play-panel img{height:clamp(245px,26cqw,380px);width:100%;object-fit:contain;object-position:right bottom;filter:drop-shadow(8px 12px 0 #191b131c)}
#site .play-panel figcaption{font-size:11px;line-height:1.4;margin-top:10px;text-align:right}
#site .play-outro{padding:29px 4% 30px;border-top:1px solid #191b13;display:flex;justify-content:space-between;align-items:center;gap:30px}
#site .play-outro p{font-family:NS Grotesque,Arial,sans-serif;font-size:clamp(30px,4.4cqw,48px);font-weight:650;line-height:1;letter-spacing:-.045em;max-width:570px}
#site .play-outro a{display:flex;align-items:center;justify-content:center;flex:none;width:112px;height:112px;border-radius:50%;background:#191b13;color:#e5fc53;font-size:15px;transform:rotate(9deg);text-align:center;line-height:1.3}
#site .ns-play .ns-footer{border-top:1px solid #191b1340}
@container (max-width:700px){
 #site .ns-page{min-height:0}
 #site .ns-nav{min-height:73px}
 #site .ns-nav nav{gap:16px;font-size:12px}
 #site .ns-nav .ns-nav-note{display:none}
 #site .play-panel{grid-template-columns:1fr 1.2fr;gap:20px;padding-left:4%}
 #site .play-panel img{height:235px}
 #site .play-panel h3{font-size:25px}
 #site .play-heading{grid-template-columns:25px 1fr auto;gap:8px}
 #site .play-label{gap:8px;font-size:12px}
 #site .play-number{padding-top:3px}
 #site .play-masthead .play-descriptor{font-size:14px}
}
@container (max-width:440px){
 #site .ns-page{min-height:0}
 #site .ns-nav{padding:22px 6%;gap:14px}
 #site .ns-nav .ns-brand{font-size:24px}
 #site .ns-nav nav{gap:14px;font-size:11px}
 #site .ns-nav nav a:first-child{display:none}
 #site .ns-footer{padding:22px 6%;align-items:flex-start;flex-wrap:wrap;font-size:11px!important;gap:13px}
 #site .ns-footer nav{gap:16px}
 #site .play-masthead{padding:13px 6% 29px}
 #site .play-masthead h1{font-size:18.6cqw}
 #site .play-masthead .play-descriptor{font-size:14px;align-items:start;margin-top:21px}
 #site .play-descriptor .play-index{font-size:11px;max-width:80px}
 #site .play-heading{padding:20px 6%;grid-template-columns:21px 1fr 28px;gap:7px;position:relative}
 #site .play-title{font-size:12cqw;line-height:1;padding-bottom:21px}
 #site .play-label>span:first-child{position:absolute;left:calc(6% + 28px);bottom:16px;font-size:11px}
 #site .play-number{font-size:11px;padding-top:6px}
 #site .play-panel{grid-template-columns:1fr;padding:6px 6% 25px;gap:22px}
 #site .play-panel h3{font-size:27px;max-width:220px}
 #site .play-panel p{font-size:13px;max-width:280px}
 #site .play-panel a{margin-top:16px}
 #site .play-panel img{height:190px;object-position:center}
 #site .play-panel figcaption{font-size:11px}
 #site .play-outro{padding:30px 6%;gap:20px;align-items:flex-start}
 #site .play-outro p{font-size:30px}
 #site .play-outro a{width:83px;height:83px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#site .ns-page *{transition:none!important;scroll-behavior:auto!important}}