.form-page{--paper:#efefe9;--ink:#252825;--accent:#ed6239;--shell:#c4c7c4;--shell-light:#f0f2ed;--shell-dark:#8f9590;background:var(--paper);color:var(--ink)}
.form-page button,.form-page a,.form-page input{accent-color:var(--accent)}.form-page button:focus-visible,.form-page a:focus-visible,.form-page input:focus-visible,.form-page [tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.form-page h1,.form-page h2,.form-page h3{letter-spacing:-.065em;line-height:1.1}.form-header{height:90px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #25282525}.form-logo{font-size:28px;font-weight:900;letter-spacing:-.07em}.form-logo span{font-size:12px;vertical-align:top}.form-header .nav{gap:28px;font-size:11px;font-weight:600}.form-page .back-link{font-size:11px}.form-page .micro{font-size:10px;letter-spacing:.13em;font-weight:700}.form-hero{position:relative;padding:28px 5% 35px;overflow:hidden}.hero-top,.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.hero-top{font-size:9px;letter-spacing:.12em;color:#6e756c}.form-hero h1{position:absolute;top:130px;left:5%;font-size:clamp(45px,5.5vw,88px);font-weight:800;z-index:2;pointer-events:none}.form-hero h1 span{color:#a0a79a}.product-stage{height:640px;position:relative;display:grid;place-items:center;perspective:1000px;cursor:grab;touch-action:pan-y;user-select:none}.product-stage:active{cursor:grabbing}.product-word{font-size:clamp(170px,28vw,430px);font-weight:900;line-height:1;letter-spacing:-.075em;color:#e1e3db;position:absolute;top:29%;left:30%;pointer-events:none}.headphone{width:510px;position:relative;left:10%;transform:rotateY(var(--turn,0deg)) rotateZ(-12deg);will-change:transform;pointer-events:none}.headphone svg{display:block;width:100%;height:auto}.product-shadow{position:absolute;width:300px;height:30px;background:#2226;border-radius:50%;filter:blur(20px);bottom:66px;left:calc(60% - 150px)}.drag-cue{position:absolute;right:3%;bottom:50px;font-size:10px;letter-spacing:.1em}.drag-cue small{display:block;color:#838b80;font-size:10px;margin-top:7px;letter-spacing:0}.hero-bottom{border-top:1px solid #25282525;padding-top:25px;font-size:11px}.hero-bottom p{line-height:1.8;color:#6e756c}.hero-bottom>a{font-size:9px;letter-spacing:.07em}.hero-colors{display:flex;align-items:center;gap:11px}.hero-colors button{width:24px;height:24px;border-radius:50%;background:var(--swatch);border:2px solid var(--paper);outline:1px solid transparent}.hero-colors button[aria-pressed=true]{outline-color:#252825}.hero-colors span{font-size:9px;letter-spacing:.1em;margin-left:10px;min-width:90px}.design-story{display:grid;grid-template-columns:1fr 1fr;background:#232723;color:#e9ede3;padding:0 7%;gap:12%}.story-sticky{height:100svh;min-height:600px;position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.story-sticky h2{font-size:clamp(35px,4vw,64px);margin-top:25px;min-height:140px}.story-orbit{position:relative;width:220px;height:220px;margin:35px auto;display:grid;place-items:center}.story-orbit span{font-size:115px;font-weight:900;color:#ed6239;letter-spacing:-.1em}.story-orbit i{position:absolute;inset:0;border:1px solid #677361;border-radius:50%;transform:rotate(var(--orbit,0deg)) scaleX(.45)}.story-orbit i:nth-of-type(2){transform:rotate(calc(var(--orbit,0deg) + 60deg)) scaleX(.45)}.story-orbit i:nth-of-type(3){transform:rotate(calc(var(--orbit,0deg) + 120deg)) scaleX(.45)}.story-progress{height:2px;background:#58604f;width:100%;margin-top:20px}.story-progress i{display:block;height:100%;width:33.33%;background:#ed6239;transition:width .5s}.story-counter{font-size:10px;letter-spacing:.15em;margin-top:15px;color:#a0aa95}.story-chapters article{min-height:100svh;display:flex;flex-direction:column;justify-content:center}.story-chapters article>span{color:#ed6239;font-size:10px;letter-spacing:.12em}.story-chapters h3{font-size:36px;line-height:1.3;margin:24px 0}.story-chapters p{font-size:15px;color:#a4ad9c;line-height:2;max-width:350px;word-break:keep-all}.sound-section{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:130px 7%;background:#e3e5db}.form-page .section-copy{font-size:13px;line-height:1.9;color:#707967;margin:24px 0;word-break:keep-all}.sound-section h2,.config-panel h2{font-size:clamp(38px,4vw,60px);margin-top:24px}.sound-presets{display:flex;flex-wrap:wrap;gap:7px;margin-top:35px}.sound-presets button,.config-colors button{padding:11px 16px;border:1px solid #a3ac98;background:transparent;border-radius:30px;font-size:10px}.sound-presets button[aria-pressed=true],.config-colors button[aria-pressed=true]{background:#252825;color:#efefe9;border-color:#252825}.sound-lab{align-self:center}.waveform{height:190px;display:flex;align-items:center;gap:5px;overflow:hidden}.waveform i{flex:1;height:var(--bar);background:#ed6239;border-radius:8px;transition:height .4s;transform-origin:center}.waveform.is-playing i{animation:form-wave 1.2s ease-in-out infinite alternate;animation-delay:var(--delay)}@keyframes form-wave{to{transform:scaleY(.45)}}.sound-lab>p{font-size:11px;color:#727c67;min-height:35px;margin:18px 0 32px}.intensity-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em}.sound-lab input[type=range]{width:100%;margin:20px 0}.sound-lab>button{font-size:11px;border:0;background:none;padding:8px 0;border-bottom:1px solid #252825}.configure-section{display:grid;grid-template-columns:1fr 1fr}.config-art{background:#ed6239;position:relative;padding:65px 10%;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:680px}.config-art>span{font-size:clamp(55px,7vw,110px);font-weight:900;line-height:.85;letter-spacing:-.07em;position:relative;z-index:1}.config-art>small{font-size:9px;letter-spacing:.1em;position:relative;z-index:1}.config-disc{position:absolute;width:400px;height:400px;border-radius:50%;top:25%;left:20%;background:linear-gradient(145deg,var(--shell-light),var(--shell-dark));box-shadow:20px 40px 45px #7a28183d;transform:rotate(-20deg);transition:background .4s}.config-disc i{position:absolute;inset:45px;border-radius:50%;border:3px solid var(--shell);box-shadow:inset 3px 5px 20px #2225}.config-disc b{position:absolute;inset:0;display:grid;place-items:center;font-size:120px;letter-spacing:-.1em;color:#252825}.config-panel{padding:70px 12%;background:#f6f6f0}.config-panel fieldset{border:0;padding:0;margin:28px 0}.config-panel legend{font-size:10px;letter-spacing:.12em;width:100%;margin-bottom:18px}.config-panel legend span{float:right;color:#6e756c}.config-colors{display:flex;gap:10px}.accessory{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #25282520;padding:20px 0}.accessory strong{font-size:13px}.accessory small{display:block;font-size:11px;color:#838b80;margin-top:6px}.accessory>span:last-child{font-size:11px;white-space:nowrap}.accessory input{width:16px;height:16px;vertical-align:middle;margin-left:12px}.config-total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #252825;padding:25px 0}.config-total span{font-size:9px;letter-spacing:.1em}.config-total strong{font-size:28px;letter-spacing:-.03em}.form-page .order-button{width:100%;display:flex;justify-content:space-between;padding:20px;background:#252825;color:#f6f6f0;border:0;font-size:13px}.form-page .order-button:hover{background:#434b3c}.form-page .demo-note{font-size:10px;color:#838b80;line-height:1.9;margin-top:18px;word-break:keep-all}.form-footer{padding:45px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px}.form-footer>span{font-size:9px;color:#838b80;line-height:1.9}.form-footer>a:last-child{font-size:11px}.form-page dialog{background:#f6f6f0;color:#252825}.form-page dialog h2{font-size:30px;margin:25px 0}.form-page #order-summary p{padding:15px 0;border-bottom:1px solid #ddd;font-size:13px}.form-page #order-summary strong{font-size:24px;display:block;margin-top:20px}.form-page dialog .order-button{margin-top:25px}
@media(max-width:900px){.headphone{width:450px;left:9%}.product-stage{height:570px}.form-hero h1{font-size:55px;top:95px}.design-story{gap:8%;padding:0 5%}.story-chapters h3{font-size:28px}.sound-section{gap:6%;padding:90px 5%}.config-panel{padding:55px 8%}.config-disc{width:330px;height:330px;left:10%}.config-art{min-height:680px}}
@media(max-width:700px){.form-header{height:70px;position:relative}.form-header .nav{position:absolute;top:70px;left:0;right:0;background:#efefe9;z-index:10;padding:25px 5%;font-size:13px}.form-header .back-link{display:none}.form-header .menu-toggle{display:block}.hero-top{font-size:7px;gap:8px}.form-hero{padding-top:22px}.form-hero h1{position:relative;top:auto;left:auto;margin-top:40px;font-size:48px}.product-stage{height:360px;margin-top:-15px}.headphone{width:min(370px,105vw);left:0}.product-word{font-size:180px;top:22%;left:3%}.product-shadow{left:calc(50% - 100px);width:200px;bottom:35px}.drag-cue{bottom:5px;font-size:8px;right:0}.drag-cue small{font-size:8px}.hero-bottom{flex-wrap:wrap;padding-top:20px;gap:22px}.hero-bottom p{font-size:10px}.hero-bottom>a{width:100%;padding-top:12px;border-top:1px solid #25282520}.hero-colors{gap:8px}.hero-colors span{min-width:0;margin-left:3px;font-size:8px}.design-story{display:block;padding:60px 6%}.story-sticky{position:relative;min-height:0;height:auto}.story-sticky h2{min-height:0;font-size:38px}.story-orbit{width:150px;height:150px;margin:25px auto}.story-orbit span{font-size:85px}.story-progress,.story-counter{display:none}.story-chapters article{min-height:0;padding:45px 0;border-top:1px solid #67736166}.story-chapters h3{font-size:30px;margin:18px 0}.story-chapters p{max-width:none;font-size:13px}.sound-section{grid-template-columns:1fr;padding:70px 6%;gap:45px}.sound-section h2,.config-panel h2{font-size:40px}.waveform{height:150px}.configure-section{grid-template-columns:1fr}.config-art{min-height:410px;padding:40px 6%}.config-art>span{font-size:70px}.config-disc{width:280px;height:280px;top:20%;left:calc(50% - 100px)}.config-disc b{font-size:90px}.config-panel{padding:55px 6%}.form-footer{flex-wrap:wrap}.form-footer>span{width:60%;text-align:right}.form-footer>a:last-child{width:100%;border-top:1px solid #ccc;padding-top:20px}}
