:root{--paper:#f5f2e9;--ink:#242820;--line:#d4d4c8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{background:var(--paper);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline-offset:5px;outline:3px solid #7154d8}header,main,footer{max-width:1320px;margin:auto;padding-left:48px;padding-right:48px}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:100px;display:flex}.brand{letter-spacing:-1.5px;align-items:center;gap:10px;font-size:27px;font-weight:900;display:flex}.brand-icon{font-size:39px}.brand small{letter-spacing:0;margin-left:7px;font-size:11px;font-weight:500}nav{gap:30px;font-size:13px;font-weight:700;display:flex}.hero{grid-template-columns:1fr 310px;align-items:center;padding:80px 0 88px;display:grid}.eyebrow{letter-spacing:1px;font-family:monospace;font-size:11px;font-weight:600}.dot{background:var(--ink);border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}h1{letter-spacing:-4px;margin:26px 0;font-size:clamp(42px,5.4vw,72px);line-height:1.03}h1 em{font-family:Georgia,serif;font-weight:500}.intro{color:#64675e;font-size:17px;line-height:1.7}.cta{background:var(--ink);color:#fff;border-radius:40px;align-items:center;gap:40px;margin-top:20px;padding:15px 22px;font-size:13px;font-weight:700;display:inline-flex}.cta span{font-size:20px}.hero-art{height:290px;position:relative}.spark{color:#8061ca;text-shadow:3px 3px 0 var(--ink);font-size:225px;line-height:1.2;position:absolute;top:-20px;left:20px;transform:rotate(12deg)}.orbit{border:1px solid #bcbab1;border-radius:50%;width:300px;height:185px;position:absolute;top:65px;transform:rotate(-30deg)}.sticker{border:2px solid var(--ink);text-align:center;background:#dcfa69;border-radius:50%;place-content:center;width:124px;height:124px;font-size:18px;font-weight:800;line-height:1.15;display:grid;position:absolute;bottom:20px;right:-5px;transform:rotate(12deg)}.tiny-note{font:12px monospace;position:absolute;bottom:-15px;right:5px;transform:rotate(6deg)}.section-title{justify-content:space-between;align-items:center;margin:0 0 23px;display:flex}.section-title h2{letter-spacing:-1px;margin:0;font-size:25px}.section-title h2 span{border:1px solid var(--line);vertical-align:middle;border-radius:20px;margin-left:9px;padding:4px 8px;font:12px monospace}.section-title p{color:#65675e;font-size:12px}.gallery{grid-template-columns:repeat(3,1fr);gap:22px;display:grid}.card{border:1px solid var(--line);text-align:left;color:inherit;cursor:pointer;background:0 0;border-radius:16px;padding:0;transition:transform .2s;overflow:hidden}.card:hover{transform:translateY(-5px)}.card.selected{outline:2px solid var(--ink);outline-offset:4px}.card-art{border-bottom:1px solid var(--line);place-items:center;height:220px;display:grid;position:relative}.pink .card-art{background:#edd5d6}.purple .card-art{background:#dcd4ed}.lime .card-art{background:#e2edbd}.status{letter-spacing:.6px;background:#fff5;border:1px solid #24282055;border-radius:20px;padding:4px 8px;font:9px monospace;position:absolute;top:17px;left:17px}.card-body{padding:20px}.card-body .eyebrow{color:#686a60;font-size:9px}.card h3{letter-spacing:-1px;margin:6px 0;font-size:25px}.card h3 span{float:right;font-size:20px}.card-body>p:last-child{color:#64675e;margin:7px 0;font-size:13px}.balls{width:200px;height:115px;margin-top:30px;position:relative}.balls span{border:2px solid var(--ink);background:#fff8e9;border-radius:50%;place-items:center;width:67px;height:67px;font-size:29px;font-weight:800;display:grid;position:absolute;transform:rotate(-18deg);box-shadow:3px 4px #20231f30}.balls span:nth-child(2){background:#dbfa6c;top:-20px;left:65px;transform:rotate(16deg)}.balls span:nth-child(3){background:#b3a0d7;top:15px;left:129px;transform:rotate(24deg)}.balls span:nth-child(4){top:46px;left:65px;transform:rotate(-8deg)}.loop{color:#4c376f;margin-top:10px;font:700 170px/.7 Georgia;position:relative;transform:rotate(-12deg)}.loop span{white-space:nowrap;color:var(--ink);font:12px monospace;position:absolute;bottom:-28px;left:17px;transform:rotate(12deg)}.gym{align-items:center;margin-top:10px;display:flex;position:relative;transform:rotate(-15deg)}.gym i{border:2px solid var(--ink);background:#5d7042;border-radius:6px;width:18px;height:75px}.gym i:nth-child(2),.gym i:nth-child(4){background:#a4bb7b;width:26px;height:110px}.gym b{background:var(--ink);width:88px;height:15px}.gym span{white-space:nowrap;font:9px monospace;position:absolute;bottom:-38px;left:6px;transform:rotate(15deg)}.lab{margin-top:75px}.bench{border:1px solid var(--line);border-radius:18px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.demo{background:#fffdf5;padding:35px}.demo h3{letter-spacing:-1px;margin:20px 0;font-size:31px;line-height:1.1}.demo>p{color:#67695f;max-width:380px;font-size:13px}.probe-stage{align-items:center;min-height:115px;display:flex}.demo .demo-note{min-height:40px;font-size:12px}.text-button{cursor:pointer;background:0 0;border:0;padding:0;font-size:12px;text-decoration:underline}.code{color:#edf0e6;background:#242820;min-width:0;padding:25px 30px}.code-tabs{align-items:center;gap:8px;display:flex}.code-tabs button{color:#aeb5a2;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:7px 12px;font-size:12px}.code-tabs button[aria-pressed=true]{color:#e1f7ac;background:#414738}.code-tabs span{color:#a8b49b;margin-left:auto;font:8px monospace}.code pre{color:#dfefbd;min-height:270px;padding-top:15px;font-size:12px;line-height:1.9;overflow:auto}.code>p{color:#abb49e;border-top:1px solid #51564a;padding-top:20px;font:10px monospace}.docs{grid-template-columns:1fr 1fr;gap:70px;padding:75px 0;display:grid}.docs h2{letter-spacing:-1.4px;font-size:32px;line-height:1.2}.docs p{color:#64675e;max-width:420px;font-size:13px}.doc-links{padding-top:30px}.doc-links a{border-bottom:1px solid var(--line);align-items:center;gap:20px;padding:17px 0;font:12px monospace;display:flex}.doc-links strong{flex:1;font:600 14px Arial}.doc-links p{font-size:11px}footer{border-top:1px solid var(--line);justify-content:space-between;align-items:center;padding-top:25px;padding-bottom:25px;display:flex}footer .brand{font-size:20px}footer p{color:#67695f;font-size:12px}footer>span{font:9px monospace}.example{padding-top:60px;padding-bottom:70px}.example>button{border:1px solid var(--ink);cursor:pointer;background:#fff9eb;border-radius:8px;padding:9px}.example h1{font-size:55px}.example h2{margin-top:40px}@media (width<=800px){header,main,footer{padding-left:22px;padding-right:22px}header{height:80px}.brand{font-size:23px}.brand small{display:none}nav{gap:16px;font-size:11px}.hero{grid-template-columns:1fr;padding:50px 0}.hero-art{display:none}h1{letter-spacing:-2.4px}.intro{font-size:15px}.gallery{grid-template-columns:1fr}.card-art{height:210px}.section-title{align-items:flex-start;gap:15px}.section-title p{max-width:140px;margin-top:4px}.bench,.docs{grid-template-columns:1fr}.demo{padding:25px}.code{padding:22px}.docs{gap:5px;padding:50px 0}.doc-links{padding-top:0}.lab{margin-top:50px}footer p{display:none}footer{gap:12px}.desktop-break{display:none}.code pre{font-size:11px}.example h1{font-size:42px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}.doc-links details{border-bottom:1px solid var(--line);padding:17px 0}.doc-links summary{cursor:pointer;font-size:14px;font-weight:600}.doc-links pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#fffdf5;max-height:440px;padding:12px;font:12px/1.7 monospace;overflow:auto}.loto-demo{background:#fffcf2;min-width:0;padding:24px}.infinity-demo{background:#f8f2e8;min-width:0;padding:24px}.volume-demo{background:#f3f7eb;min-width:0;padding:24px}.volume-intro{background:#e7f0d8;border:1px solid #c4d4bb;border-radius:17px;align-items:center;gap:14px;margin-bottom:19px;padding:17px 20px;display:flex}.volume-intro-icon{color:#dcfa78;background:#18362d;border-radius:12px;flex:none;place-items:center;width:42px;height:42px;font-size:26px;font-weight:900;display:grid}.volume-intro small{letter-spacing:1px;font:10px monospace}.volume-intro p{margin:3px 0;font-size:16px;font-weight:700}.volume-intro div>span{color:#59705c;font-size:11px}.volume-demo-controls,.audio-actions{flex-wrap:wrap;align-items:center;gap:9px;display:flex}.volume-demo-controls{margin-top:22px}.volume-demo-controls button,.audio-actions button{cursor:pointer;background:#fffdf5;border:1px solid #9eaf96;border-radius:23px;min-height:41px;padding:8px 14px;font-size:12px;font-weight:700}.volume-demo-controls label{border:1px solid #9eaf96;border-radius:23px;align-items:center;gap:4px;min-height:41px;padding:0 12px;font-size:12px;display:inline-flex}.audio-preview{background:#e4f0d2;border:1px solid #a5b79a;border-radius:17px;margin-top:22px;padding:18px}.audio-preview>div:first-child{flex-direction:column;gap:4px;display:flex}.audio-preview strong{letter-spacing:1px;font:800 11px monospace}.audio-preview span{color:#4c6957;font-size:11px}.audio-actions{margin-top:13px}.audio-actions button:first-child{background:#d8ff66;border-color:#274335}.audio-actions button[aria-pressed=true]{color:#fff;background:#223d33}.audio-actions button:disabled{opacity:.48;cursor:not-allowed}.audio-preview p{color:#45604c;margin:11px 0 0;font-size:11px}.infinity-message{background:#eae0cc;border:1px solid #d2c4a5;border-radius:17px;align-items:center;gap:16px;margin-bottom:20px;padding:17px 20px;display:flex}.infinity-message>span{color:#f5d185;background:#28213d;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;font-size:23px;display:grid}.infinity-message small{letter-spacing:1px;font:10px monospace}.infinity-message p{margin:4px 0;font-size:14px}.infinity-message strong{letter-spacing:4px;font-size:23px}.infinity-message em{color:#675e54;font-size:11px;font-style:normal}.loto-bench{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.received-message{background:#e8eedc;border:1px solid #d0d9c0;border-radius:16px;align-items:center;gap:14px;margin-bottom:20px;padding:18px;display:flex}.message-icon{font-size:27px}.received-message small{letter-spacing:1px;font:10px monospace}.received-message p{margin:3px 0;font-size:14px}.received-message strong{letter-spacing:3px;font-size:23px}.received-message div>span{color:#68715b;font-size:10px}.message-time{white-space:nowrap;align-self:flex-start;margin-left:auto;font-size:10px}.demo-controls{flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;display:flex}.demo-controls button,.demo-controls select{cursor:pointer;background:#fffdf5;border:1px solid #bbb8a5;border-radius:20px;min-height:40px;padding:9px 13px;font:12px system-ui}.demo-controls label{align-items:center;gap:6px;font-size:12px;display:flex}.loto-footnote{color:#717466;font:11px/1.6 monospace}.loto-example{max-width:740px;margin:0 auto 60px}.loto-example h2{font-size:27px}.loto-example code{overflow-wrap:anywhere}.loto-bench .code pre{white-space:pre-wrap;overflow-wrap:anywhere}.loto-bench .code{flex-direction:column;display:flex}.loto-bench .code>p{margin-top:auto}@media (width<=900px){.loto-bench{grid-template-columns:1fr}.loto-demo{padding:12px}.received-message{gap:10px;padding:12px}.message-time{display:none}}
