:root { --night:#07090d; --surface:#0d1118; --line:#29323d; --text:#eef4ff; --muted:#9da9b9; --acid:#67adff; }
* { box-sizing:border-box; }
html { background:var(--night); scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; background:var(--night); color:var(--text); font-family:"Avenir Next",Avenir,ui-sans-serif,system-ui,sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; text-underline-offset:.2em; }.site-header,main,footer { width:min(1160px,calc(100% - 3rem)); margin:auto; }
.site-header { display:flex; min-height:88px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:.7rem; font-weight:750; letter-spacing:-.04em; text-decoration:none; }.brand-mark { display:grid; width:2rem; height:2rem; place-items:center; border:1px solid var(--acid); border-radius:50%; color:var(--acid); font-size:.85rem; font-weight:800; }nav { display:flex; gap:1.35rem; font-size:.85rem; font-weight:700; letter-spacing:.02em; }nav a { color:var(--muted); text-decoration:none; }nav a:hover,.product-link:hover { color:var(--acid); }
.hero { position:relative; display:grid; min-height:620px; grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr); align-items:end; gap:4rem; padding:7rem 0 5rem; border-bottom:1px solid var(--line); }.hero::before { position:absolute; inset:0 calc(50% - 50vw); z-index:0; background-image:linear-gradient(rgba(183,255,85,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(183,255,85,.055) 1px,transparent 1px); background-size:54px 54px; content:""; mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent); }.hero-copy,.equation { position:relative; z-index:1; }
.kicker,.eyebrow { margin:0; color:var(--acid); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.status-dot { display:inline-block; width:.55rem; height:.55rem; margin-right:.4rem; border-radius:50%; background:var(--acid); box-shadow:0 0 1.1rem var(--acid); vertical-align:.03rem; }h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.06em; line-height:.93; }h1 { max-width:10ch; margin:1.35rem 0 2rem; font-size:clamp(4rem,9.2vw,8rem); }h1 span { color:var(--acid); }.hero-copy > p:last-child { max-width:38rem; margin:0; color:var(--muted); font-size:clamp(1.1rem,2vw,1.3rem); }
.equation { justify-self:end; width:min(100%,390px); padding:2rem 0; color:var(--text); text-align:right; }.equation-base { color:var(--acid); font-size:clamp(3.25rem,7vw,5.8rem); font-weight:300; letter-spacing:-.1em; }.equation sup { position:relative; top:-2.6em; margin-left:.35em; color:var(--text); font-size:1rem; font-weight:800; }.equation p { margin:1rem 0 0; color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.method,.work { padding:7rem 0; }.method { border-bottom:1px solid var(--line); }.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:2rem; }h2 { font-size:clamp(2.75rem,5vw,5rem); text-align:right; }.method-copy { max-width:42rem; margin:4rem 0; color:var(--muted); font-size:clamp(1.25rem,2.3vw,1.7rem); line-height:1.3; letter-spacing:-.025em; }.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.principles article { min-height:210px; padding:1.5rem 1.5rem 0 0; border-right:1px solid var(--line); }.principles article + article { padding-left:1.5rem; }.principles article:last-child { border-right:0; }.principles span { color:var(--acid); font-size:.76rem; font-weight:800; letter-spacing:.1em; }.principles h3 { margin:2.4rem 0 .6rem; font-size:1.7rem; }.principles p { max-width:19rem; margin:0; color:var(--muted); }
.work { padding-bottom:8rem; }.work .section-heading { margin-bottom:2.3rem; }.product-card { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2rem; overflow:hidden; padding:2.2rem; border:1px solid var(--line); background:var(--surface); }.product-card::after { position:absolute; right:-2rem; bottom:-4rem; color:rgba(183,255,85,.06); content:"27"; font-size:15rem; font-weight:800; line-height:1; letter-spacing:-.15em; }.product-mark { display:grid; width:3rem; height:3rem; place-items:center; border-radius:.75rem; background:var(--acid); color:var(--night); font-size:1.45rem; font-weight:800; }.product-content { position:relative; z-index:1; max-width:40rem; }.product-content h3 { margin:.65rem 0 .9rem; font-size:clamp(2.6rem,5vw,4.5rem); }.product-content p:not(.eyebrow) { margin:0; color:var(--muted); font-size:1.1rem; }.product-link { display:inline-block; margin-top:1.7rem; color:var(--acid); font-weight:750; }.product-index { z-index:1; align-self:start; margin:0; color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.12em; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem 0 3rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; font-weight:650; letter-spacing:.04em; }footer span:nth-child(2) { color:var(--acid); }
.method-copy { margin-bottom:1.25rem; }.method-note { max-width:42rem; margin:0 0 4rem; color:var(--muted); font-size:.95rem; }.method-note strong { color:var(--text); font-weight:650; }
.hero::before { background-image:linear-gradient(rgba(103,173,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(103,173,255,.055) 1px,transparent 1px); }.product-card::after { color:rgba(103,173,255,.06); content:"³"; }
.not-found-main { min-height:calc(100vh - 174px); }.not-found { position:relative; min-height:calc(100vh - 174px); padding:clamp(4rem,10vw,9rem) 0 5rem; overflow:hidden; }.not-found::before { position:absolute; inset:0 calc(50% - 50vw); background-image:linear-gradient(rgba(103,173,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(103,173,255,.07) 1px,transparent 1px); background-size:54px 54px; content:""; mask-image:radial-gradient(circle at 52% 50%,black,transparent 68%); }.not-found-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.65fr); align-items:end; gap:4rem; }.not-found-code { position:absolute; top:-.28em; left:-.07em; z-index:-1; margin:0; color:rgba(103,173,255,.08); font-size:clamp(10rem,26vw,24rem); font-weight:800; letter-spacing:-.15em; line-height:.8; }.not-found h1 { position:relative; max-width:11ch; margin:0 0 2rem; font-size:clamp(3.75rem,9vw,8.5rem); }.not-found h1 span { color:var(--acid); }.not-found-copy { position:relative; max-width:39rem; margin:0; color:var(--muted); font-size:clamp(1.1rem,2vw,1.35rem); }.not-found-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem; }.not-found-button { display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.05rem; border:1px solid var(--line); color:var(--text); font-size:.88rem; font-weight:750; text-decoration:none; }.not-found-button:hover { border-color:var(--acid); color:var(--acid); }.not-found-button.primary { border-color:var(--acid); background:var(--acid); color:var(--night); }.not-found-button.primary:hover { background:var(--text); border-color:var(--text); color:var(--night); }.not-found-equation { justify-self:end; width:min(100%,300px); padding:1.5rem 0 1.5rem 1.5rem; border-left:1px solid var(--line); color:var(--acid); text-align:right; }.not-found-equation span { font-size:clamp(2.7rem,6vw,4.6rem); font-weight:300; letter-spacing:-.1em; }.not-found-equation sup { position:relative; top:-2.25em; margin-left:.3em; color:var(--text); font-size:.82rem; font-weight:800; }.not-found-equation p { margin:1rem 0 0; color:var(--muted); font-size:.76rem; font-weight:750; letter-spacing:.12em; line-height:1.7; text-transform:uppercase; }
@media (max-width:720px) { .site-header,main,footer { width:min(100% - 2rem,1160px); }.hero { min-height:auto; grid-template-columns:1fr; gap:2rem; padding:5.5rem 0 4rem; }.equation { justify-self:start; padding:0; text-align:left; }.equation-equals { vertical-align:.8em; }.method,.work { padding:5rem 0; }.section-heading { align-items:start; flex-direction:column; }h2 { text-align:left; }.method-copy { margin:2.7rem 0; }.principles { grid-template-columns:1fr; }.principles article,.principles article + article { min-height:auto; padding:1.5rem 0; border-right:0; border-bottom:1px solid var(--line); }.principles h3 { margin-top:1.4rem; }.product-card { grid-template-columns:auto 1fr; gap:1.2rem; padding:1.5rem; }.product-index { display:none; }footer { flex-wrap:wrap; } }

/* Shared blue / violet studio treatment. Product-specific PillBoy styles stay independent. */
:root { --night:#090914; --surface:#111124; --line:#ffffff24; --text:#f1f0ff; --muted:#b0afc5; --acid:#a3b9ff; }
body { background:radial-gradient(ellipse 75% 600px at 90% 0%,#542a8b33,transparent),radial-gradient(ellipse 65% 800px at 0% 25%,#193b7433,transparent),var(--night); }
.site-header { min-height:90px; }.brand-mark { border-color:#b5a0ff; color:#c2adff; background:#b5a0ff0a; }.hero { align-items:center; min-height:660px; padding:5rem 0; gap:3rem; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }.hero::before { opacity:.45; }.hero h1 { font-size:clamp(3.8rem,7.8vw,6.8rem); line-height:.98; }.hero h1 span { color:#b9a1ff; }.hero-copy > p:not(.kicker) { max-width:33rem; color:var(--muted); font-size:1.2rem; }
.studio-button { display:inline-flex; align-items:center; gap:1.5rem; margin-top:1.4rem; padding:.9rem 1.25rem; border:1px solid #c4b5ff66; border-radius:6px; background:linear-gradient(110deg,#647ce433,#9a60d633); color:var(--text); font-size:.85rem; font-weight:700; text-decoration:none; }.studio-button:hover { background:#b5a0ff33; border-color:#c4b5ff; }
.signal-window { position:relative; z-index:1; display:block; min-width:0; padding:1.4rem; overflow:hidden; border:1px solid #b5a0ff3d; border-radius:1.5rem; background:linear-gradient(140deg,#222543aa,#120e25cc); box-shadow:0 25px 100px #56329524; backdrop-filter:blur(18px); text-decoration:none; }.signal-label { display:flex; align-items:center; color:#c4b7e8; font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; }.signal-label > span:last-child { margin-left:auto; color:var(--muted); }.signal-label .status-dot { flex:none; width:.4rem; height:.4rem; }.signal-window img { display:block; width:min(100%,384px); height:auto; margin:1rem auto; mix-blend-mode:screen; }.signal-caption { display:flex; align-items:center; justify-content:space-between; font-size:1.4rem; font-weight:700; letter-spacing:-.04em; }.signal-caption strong { color:#c3a6ff; font-weight:450; }.signal-caption small { display:block; margin-top:.4rem; color:var(--muted); font-size:.75rem; font-weight:400; letter-spacing:0; }.signal-arrow { display:grid; width:2.5rem; height:2.5rem; place-items:center; border:1px solid #b5a0ff55; border-radius:50%; color:#c3b3ff; }.signal-window:hover { border-color:#c5afff99; }
.product-card { border-radius:1rem; background:linear-gradient(120deg,#23233b88,#101224cc); backdrop-filter:blur(12px); }.product-card + .product-card { margin-top:1.4rem; }.sound-product { border-color:#a38bd657; background:radial-gradient(ellipse at 90% 60%,#58327c38,transparent 65%),linear-gradient(120deg,#20283d99,#181024cc); }.product-card::after { color:#b89cff0a; }.product-icon { width:3rem; height:3rem; background:#000; border:1px solid #b5a0ff3d; }.beta-label { display:inline-block; margin-left:.65rem; padding:.25rem .5rem; border:1px solid #b5a0ff40; border-radius:3px; color:#c6b2ff; font-size:.6rem; letter-spacing:.04em; }.principles span { color:#c3a6ff; }footer a { color:var(--muted); }
:focus-visible { outline:2px solid #bcb4ff; outline-offset:5px; }.skip-link { position:fixed; z-index:10; top:1rem; left:1rem; padding:.8rem 1rem; background:var(--text); color:var(--night); transform:translateY(-200%); }.skip-link:focus { transform:translateY(0); }
@media (max-width:720px) { .hero { grid-template-columns:1fr; min-height:auto; padding:4rem 0; gap:3rem; }.hero h1 { font-size:clamp(3.3rem,11vw,5rem); }.signal-window { width:min(100%,440px); justify-self:center; }.signal-window img { max-width:320px; }.product-card { grid-template-columns:1fr; }.product-content h3 { font-size:clamp(2.4rem,9vw,4rem); }.beta-label { margin-left:.4rem; }.method-note { margin-bottom:2.5rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }