:root{
  --sky-top:#ffffff;
  --sky-mid1:#ffffff;
  --sky-mid2:#ffffff;
  --sky-bottom:#ffffff;
  --text-dark:#000;
  --text-muted:#000;
  --sans:"Geist","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* theme: home is the sky, products/detail are brutalist white */
body.theme-sky{background:#fff}
body.theme-paper{background:#ffffff}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.view{display:none}
.view.is-active{display:block}

/* ---------- top nav (flapping airplanes) ---------- */
.top-nav{position:fixed;top:1.5rem;right:2rem;display:flex;gap:1.75rem;z-index:20}
.top-nav a{font-family:var(--mono);font-size:1rem;letter-spacing:.02em;opacity:.76;cursor:pointer;transition:opacity .2s ease,color .3s ease}
.top-nav a:hover{opacity:1}
body.theme-sky .top-nav a{color:var(--text-dark)}
body.theme-paper .top-nav a{color:#000;font-family:var(--mono);opacity:.85}

/* ---------- HOME ---------- */
.view--home{position:relative;min-height:100vh}
.overlay{position:relative;z-index:2;min-height:100vh;text-align:center;padding:0 6vw}
.logo{position:absolute;top:47.5%;left:50%;width:auto;height:min(49vh,540px);max-width:min(42vw,560px);transform:translate(-50%,-50%);object-fit:contain;border:none;box-shadow:none;background:transparent;filter:grayscale(1) contrast(1.25);opacity:.88}
.brand{position:absolute;left:50%;bottom:16vh;transform:translateX(-50%);width:min(1120px,92vw);font-family:var(--mono);font-weight:400;font-size:clamp(4.3rem,5.8vw,6.35rem);letter-spacing:-.04em;color:var(--text-dark);line-height:1}
.subtitle{position:absolute;left:50%;bottom:9.6vh;transform:translateX(-50%);width:min(1500px,95vw);font-family:var(--sans);font-weight:400;font-size:clamp(1.24rem,1.5vw,1.62rem);line-height:1.32;color:var(--text-dark)}
.longterm{position:relative;z-index:2;max-width:780px;margin:0 auto;padding:4rem 1.25rem 6rem;font-family:var(--mono);color:#000;background:#fff}
.longterm p{font-size:15px;line-height:1.75;margin:0 0 1.4rem}
.longterm p:first-child::before{content:"|—— vision";display:block;margin-bottom:1.4rem}
.longterm p:last-child{margin-bottom:0}

/* ---------- PRODUCTS + DETAIL (longest levers) ---------- */
.content-container{max-width:1080px;margin:0;padding:72px 20px 64px 1.5%;font-family:var(--mono);word-wrap:break-word}
.tree{white-space:pre-wrap;font-size:21px;line-height:1.55;color:#000}
.tree .head{display:block;font-size:inherit;font-weight:400}
.tree .blank{display:block;height:1.55em}
.tree a.node{color:#000;cursor:pointer}
.tree a.node:hover{text-decoration:underline}
.tree .section{color:#000}
.tree .leaf{font-size:inherit;color:#444}
.tree a.leaf:hover{text-decoration:underline}
.tree .price{color:#000}

/* detail view, monospace */
.detail-wrap{max-width:820px;padding:64px 20px 64px 1.5%;font-family:var(--mono);color:#000}
.detail-wrap .back{font-size:14px;color:#000;cursor:pointer;display:block;margin-bottom:8px}
.detail-wrap .back:hover{text-decoration:underline}
.detail-wrap .code{font-size:14px;color:#444;margin-top:28px}
.detail-wrap h2{font-size:24px;font-weight:700;margin:6px 0 16px;letter-spacing:-.01em}
.detail-wrap .desc{font-size:15px;line-height:1.6;max-width:620px;margin-bottom:20px}
.detail-wrap ul{list-style:none;font-size:14px;line-height:1.9;margin-bottom:28px}
.detail-wrap li::before{content:"|—— "}
.detail-wrap .buy{display:flex;align-items:center;gap:20px;font-size:16px}
.detail-wrap .add{font-family:var(--mono);font-size:15px;background:#000;color:#fff;border:none;padding:8px 16px;cursor:pointer}
.detail-wrap .add:hover{background:#333}
.detail-media{margin:18px 0 24px;max-width:280px}
.detail-media img{border:1px solid #000}

/* static product protocol pages */
.doc-page{background:#fff;color:#000;font-family:var(--mono)}
.doc-shell{max-width:1100px;margin:0;padding:132px 24px 96px 2.5rem}
.doc-tree{white-space:pre-wrap;font-size:21px;line-height:1.55;color:#000}
.doc-tree .head{display:block;font-size:inherit;font-weight:400}
.doc-tree a{color:#000;text-decoration:none}
.doc-tree a:hover{text-decoration:underline}
.solid-tree,.solid-tree ul{list-style:none;margin:0;padding:0}
.solid-tree{--tree-indent:42px;--tree-line:2px solid #000;white-space:normal;margin-top:28px;border-left:var(--tree-line)}
.solid-tree ul{margin-left:var(--tree-indent);border-left:var(--tree-line)}
.solid-tree > li{margin:0}
.solid-tree a{display:inline-block;position:relative;padding-left:36px;line-height:1.05}
.solid-tree a::before{content:"";position:absolute;left:0;top:.72em;width:28px;border-top:var(--tree-line)}
.solid-tree > li > a{padding-left:36px;margin-left:0}
.solid-tree > li > a::before{width:36px}
.solid-tree > li > ul{padding-top:.15rem}
.protocol{max-width:860px;margin:0 auto;padding:120px 24px 96px;font-family:var(--mono);font-size:15px;line-height:1.5;color:#000}
.protocol h1,.protocol h2,.protocol p,.protocol ol,.protocol ul{max-width:660px}
.protocol h1{font-size:18px;line-height:1.2;margin:0 0 24px;font-weight:700}
.protocol h2{font-size:15px;line-height:1.2;margin:30px 0 14px;font-weight:700;letter-spacing:.02em}
.protocol p{margin:0 0 24px}
.protocol ul,.protocol ol{margin:0 0 24px 28px}
.protocol li{margin:0 0 8px}
.protocol a:not(.doc-back){color:#1a0dab;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.protocol a:not(.doc-back):visited{color:#681da8}
.protocol a:not(.doc-back):hover{text-decoration:none}
.protocol .dots{margin:24px 0}
.protocol .refs li{margin:0 0 16px}
.protocol-aside{float:right;width:240px;margin:0 0 28px 38px}
.protocol-aside img{width:100%;border:1px solid #000}
.research-card{border:1px solid #000;margin-top:14px;padding:16px;font-size:14px;line-height:1.5}
.research-card strong{display:block;font-size:15px;margin-bottom:6px}
.research-card .note{display:block;margin:8px 0 10px;color:#333}
.research-card .research-link{display:inline-block;color:#1a0dab;text-decoration:underline;text-underline-offset:2px}
.research-card .research-link:hover{text-decoration:none}
.buy-box{border:1px solid #000;margin-top:14px;padding:16px;font-size:14px;line-height:1.5}
.buy-box strong{font-size:15px}
.buy-box .price{display:block;font-size:18px;margin:4px 0 2px}
.buy-box .presale-tag{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #000;padding:2px 6px;margin:0 0 12px}
/* presale / reserve button — readable: solid black, bold white, full width */
.protocol .buy-box .buy-btn{display:block;width:100%;box-sizing:border-box;background:#000;color:#fff;font-family:var(--mono);font-weight:600;text-align:center;text-decoration:none;padding:12px 14px;font-size:14px;letter-spacing:.02em;border:none;cursor:pointer}
.protocol .buy-box .buy-btn:hover{background:#333;color:#fff;text-decoration:none}
.protocol .buy-box .buy-btn:visited{color:#fff}
.protocol .buy-box .buy-btn:disabled{background:#666;cursor:default}
.buy-box p{margin:12px 0 0;color:#333}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.buy-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.buy-desc{margin:4px 0 12px;font-size:12px;color:#555}

/* purchase selector — one-time vs subscribe */
.plan-select{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.opt{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:1px solid #000;padding:11px 12px;cursor:pointer;background:#fff;transition:background .12s ease}
.opt:hover{background:#f6f6f6}
.opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.opt-radio{flex:none;width:15px;height:15px;border:1px solid #000;border-radius:50%;position:relative}
.opt:has(input:checked){background:#f1f1f1;outline:2px solid #000;outline-offset:-1px}
.opt:has(input:checked) .opt-radio::after{content:"";position:absolute;inset:3px;background:#000;border-radius:50%}
.opt:has(input:focus-visible){outline:2px solid #000;outline-offset:-1px}
.opt-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.opt-sub{display:block;margin-top:4px;font-size:12px;color:#555;text-transform:none;letter-spacing:0;font-weight:400}
.opt-price{font-size:15px;font-weight:600;white-space:nowrap}
.opt-badge{font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;background:#000;color:#fff;padding:2px 5px}

/* quantity stepper */
.qty-stepper{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qty-label{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.qty-controls{display:flex;align-items:center;border:1px solid #000}
.qty-controls input{width:46px;text-align:center;border:none;border-left:1px solid #000;border-right:1px solid #000;background:#fff;color:#000;font-family:var(--mono);font-size:14px;padding:6px 0;-moz-appearance:textfield;appearance:textfield}
.qty-controls input:focus{outline:none}
.qty-controls input::-webkit-outer-spin-button,.qty-controls input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-btn{font-family:var(--mono);width:30px;height:30px;background:#fff;border:none;cursor:pointer;font-size:16px;line-height:1}
.qty-btn:hover{background:#f1f1f1}

/* note under buy button */
.buy-note{margin:10px 0 0;font-size:12px;color:#555;line-height:1.5}

/* preorder form */
.preorder-form{display:flex;flex-direction:column;gap:8px;margin:8px 0 0}
.preorder-form input{font-family:var(--mono);font-size:13px;padding:8px;border:1px solid #000;background:#fff;color:#000;width:100%;box-sizing:border-box}
.preorder-form input::placeholder{color:#666}
.preorder-form input:focus{outline:2px solid #000;outline-offset:-1px}
.preorder-form .qty-row{display:flex;align-items:center;gap:8px;font-size:13px}
.preorder-form .qty-row input{width:64px}
.preorder-msg{margin:10px 0 0;font-size:13px;line-height:1.5}
.preorder-msg.pending{display:flex;align-items:center;gap:8px;color:#000;border:1px solid #000;background:#f6f6f6;padding:10px}
.preorder-msg.ok{color:#0a5c22;border:1px solid #0a7d2c;background:#f3fbf5;padding:11px;font-weight:500}
.preorder-msg.err{color:#b00020;border:1px solid #b00020;background:#fdf3f4;padding:11px}
.spinner{flex:none;width:13px;height:13px;border:2px solid #c9c9c9;border-top-color:#000;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.doc-back{display:block;margin-bottom:28px;font-size:16px;color:#000;text-decoration:none}
.doc-back:hover{text-decoration:underline}

/* ---------- CART ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.drawer-backdrop.is-open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;height:100vh;width:min(380px,90vw);background:#fff;border-left:1px solid #000;transform:translateX(100%);transition:transform .25s ease;z-index:50;display:flex;flex-direction:column;font-family:var(--mono);color:#000}
.cart-drawer.is-open{transform:translateX(0)}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #000;font-size:16px}
.cart-head button{font-family:var(--mono);font-size:16px;background:none;border:none;cursor:pointer;color:#000}
.cart-lines{flex:1;overflow-y:auto;padding:12px 20px}
.cart-empty{font-size:14px;color:#444;padding:16px 0}
.cart-line{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid #ddd;font-size:14px}
.cart-line h3{font-size:14px;font-weight:700}
.cart-line p{color:#444;font-size:13px}
.cart-line .qty{display:flex;align-items:center;gap:10px;margin-top:6px}
.cart-line .qty button{font-family:var(--mono);width:22px;height:22px;border:1px solid #000;background:#fff;cursor:pointer;line-height:1}
.cart-line .line-total{align-self:start;text-align:right}
.cart-foot{padding:20px;border-top:1px solid #000}
.cart-subtotal{display:flex;justify-content:space-between;font-size:15px;margin-bottom:14px}
.checkout{width:100%;font-family:var(--mono);font-size:15px;background:#000;color:#fff;border:none;padding:12px;cursor:pointer}
.checkout:hover{background:#333}
.checkout-note{font-size:12px;color:#444;margin-top:10px;line-height:1.5}

@media(max-width:600px){
  .top-nav{top:1rem;right:1rem;gap:1rem}
  .tree{font-size:16px}
  .overlay{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 6vw 4.5vh;gap:.55rem}
  .logo{top:45%;width:auto;height:min(49vh,540px);max-width:86vw;min-width:0}
  .brand,.subtitle{position:static;transform:none;width:min(92vw,520px)}
  .brand{font-size:clamp(2.65rem,10.8vw,3.7rem);line-height:.98}
  .subtitle{font-size:1.2rem;line-height:1.34}
  .longterm{padding:3rem 1rem 4.5rem}
  .longterm p{font-size:14px;line-height:1.65}
  .doc-shell,.protocol{padding:96px 18px 64px;font-size:16px}
  .doc-tree{font-size:16px}
  .doc-tree .head{font-size:inherit}
  .solid-tree{--tree-indent:28px}
  .solid-tree a{padding-left:28px}
  .solid-tree a::before{width:21px}
  .solid-tree > li > a::before{width:28px}
  .protocol h1,.protocol h2{font-size:18px}
  .protocol-aside{float:none;width:100%;max-width:320px;margin:0 auto 24px}
  .research-card{font-size:14px}
  .buy-box{font-size:14px}
}