:root{--ivory:#e6e1d5;--bg:#111210}
:root{--six-line:#c7bba42c;--six-paper:#e7e1d5}button,a,input,select,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #e7d5ae;outline-offset:5px}.play-extra{background:linear-gradient(130deg,#282621,#161615);border:1px solid var(--six-line);box-shadow:0 20px 45px #0004,inset 0 1px #ffffff12;border-radius:8px;padding:clamp(18px,3vw,32px)}.play-line{cursor:grab;border:1px solid var(--six-line);border-left:3px solid #b4a58b;border-radius:3px;background:linear-gradient(110deg,#343029,#24231f);box-shadow:0 6px 13px #0003;margin:8px 0;padding:12px;gap:12px}.play-line:active{cursor:grabbing}.play-line button{min-width:42px;min-height:42px}.play-discovery .sheet{cursor:crosshair}.play-found{box-shadow:0 0 0 6px #dbceac33}.sound-invite{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;padding:clamp(24px,5vw,60px);margin:50px 0;background:linear-gradient(135deg,#292720,#101110);border:1px solid var(--six-line);box-shadow:0 25px 60px #0005,inset 0 1px #fff2}.sound-art{height:220px;display:flex;align-items:center;justify-content:space-evenly;padding:22px;background:repeating-linear-gradient(0deg,transparent 0 20px,#b8a98912 21px 22px),#111311;border:8px solid #262722;box-shadow:inset 0 0 45px #000;color:#b5ac99}.sound-art i{width:6%;height:50%;background:linear-gradient(#e0d8be,#4a493e);box-shadow:0 0 18px #d3bb7722}.sound-art i:nth-child(3n){height:80%}.sound-art i:nth-child(2n){height:30%}.lab-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--six-line);position:relative;z-index:10}.lab-brand{font-size:23px;letter-spacing:.1em;color:var(--six-paper);text-decoration:none}.lab-brand span{display:block;font:9px/1.8 Arial,sans-serif}.lab-top-nav{display:flex;align-items:center;gap:20px;font-size:14px}.lab-menu{position:relative}.lab-menu>nav{position:absolute;right:0;top:100%;min-width:245px;padding:16px;background:#171815;border:1px solid var(--six-line);box-shadow:0 20px 50px #000b;display:grid;gap:14px}.lab-menu:not([open])>nav{display:none}.six-challenge{margin:24px 0;padding:clamp(20px,3vw,36px);background:linear-gradient(125deg,#302c25,#191a17);border:1px solid #ae9c6c66;box-shadow:inset 0 1px #fff2,0 20px 50px #0005}.six-challenge h2{margin:10px 0}.six-challenge .actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.six-challenge p{max-width:75ch;line-height:1.65}.six-challenge li{margin:9px 0}.six-challenge details{padding:15px 0;border-top:1px solid var(--six-line)}.six-progress{font:12px/1.6 monospace;letter-spacing:.12em;color:#d4c6ac}.six-receipt{padding:20px;border-left:3px solid #ceb988;background:#ece3cc0b}.six-tool{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.six-tool button{font-size:13px;padding:10px 12px}.six-draft{font-size:12px;text-align:center;color:#bfb6a7;padding:12px;border-bottom:1px solid var(--six-line)}@media(max-width:700px){.sound-invite{grid-template-columns:1fr}.sound-art{height:150px}.lab-header{align-items:flex-start}.lab-top-nav{gap:12px;flex-wrap:wrap;justify-content:flex-end;max-width:70%}.lab-top-nav>a:first-child{display:none}.six-challenge .actions button{flex:1 1 140px}.play-line span{font-size:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.comparison-lens{margin:24px 0;padding:22px;border:1px solid var(--six-line);background:#191a18}.comparison-lens summary{cursor:pointer;font-size:19px}.comparison-lens p{max-width:65ch;line-height:1.6}.lens-art{--split:50%;position:relative;width:min(100%,500px);aspect-ratio:5/6;margin:24px auto;box-shadow:0 20px 50px #0008;touch-action:none;cursor:ew-resize}.lens-art svg{display:block;width:100%;height:100%}.lens-a,.lens-b{position:absolute;inset:0}.lens-b{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.lens-rule{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;box-shadow:0 0 6px #000}.lens-rule:after{content:'↔';position:absolute;top:50%;left:-19px;width:40px;height:40px;border-radius:50%;background:#24241f;color:#eee;text-align:center;line-height:40px}.lens-label{position:absolute;bottom:8px;left:8px;background:#151612;color:#eee;padding:7px 12px;font:12px monospace}.comparison-lens>label{display:block}.comparison-lens>input{width:min(100%,500px);display:block;margin:16px auto}.comparison-lens>output{display:block;text-align:center;color:#cdc3b0}
