:root{--night:#141922;--paper:#f2eee4;--orange:#df6a49;--mint:#a9d6be;--line:#d4cdbf;--selected:#e9dfcc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--night);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}header{height:76px;padding:0 max(22px,5vw);display:flex;align-items:center;justify-content:space-between;background:var(--paper);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.logo{font-weight:950;font-size:21px;letter-spacing:.08em;color:var(--night);text-decoration:none}.logo span{color:var(--orange)}nav{display:flex;align-items:center;gap:24px}nav a{color:var(--night);text-decoration:none}nav button{padding:10px 17px;border:1px solid var(--night);border-radius:50px;background:none}.hero{min-height:660px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;padding:70px max(24px,7vw);gap:5vw;overflow:hidden}.hero>div:first-child{max-width:620px}.eyebrow{color:var(--orange);font-size:12px;letter-spacing:.16em;font-weight:900}h1{font-family:Georgia,serif;font-size:clamp(52px,8vw,100px);line-height:.9;margin:18px 0 28px;font-weight:500}.hero p{font-size:19px}.primary{display:inline-block;padding:14px 22px;background:var(--orange);color:#fff;border:0;border-radius:50px;text-decoration:none;font-weight:800;cursor:pointer}.tonnetz-bg{height:540px;transform:rotate(-8deg);background:radial-gradient(circle at 50% 50%,var(--orange) 0 8px,transparent 9px),linear-gradient(30deg,transparent 46%,#252b35 47% 49%,transparent 50%),linear-gradient(-30deg,transparent 46%,#252b35 47% 49%,transparent 50%),linear-gradient(90deg,transparent 46%,#252b35 47% 49%,transparent 50%);background-size:100px 58px;border-radius:50%;mask-image:radial-gradient(circle,#000 20%,transparent 68%)}.config{display:grid;grid-template-columns:minmax(320px,.68fr) minmax(480px,1.32fr);min-height:800px;background:#fff}.controls{padding:75px max(25px,6vw)}.controls h2,.explain h2,.formats h2,.real h2,.closing h2{font:500 clamp(38px,5vw,65px)/1.04 Georgia,serif}.controls label{display:block;font-size:13px;font-weight:800;margin:16px 0}.controls select{display:block;width:100%;padding:13px;margin-top:5px;background:#fff;border:1px solid var(--line);font:inherit}fieldset{border:1px solid var(--line);margin:18px 0;padding:12px 18px}fieldset label{font-weight:500;margin:9px 0}.controls small{display:block;color:#777;margin-top:13px}.viewer{display:flex;flex-direction:column;background:#cbd0c9}.viewer-head,.summary{display:flex;justify-content:space-between;padding:20px 25px}.viewer-head{font-size:12px;letter-spacing:.12em}.viewer-head button{border:0;background:none;text-decoration:underline}.board-scene{flex:1;min-height:590px;display:grid;place-items:center;position:relative;perspective:900px;overflow:hidden}.board{width:min(580px,75%);aspect-ratio:1.25;position:relative;border:13px solid #8f897e;border-radius:22px;background-color:var(--selected);background-image:linear-gradient(30deg,transparent 46%,#958e82 47% 49%,transparent 50%),linear-gradient(-30deg,transparent 46%,#958e82 47% 49%,transparent 50%),linear-gradient(90deg,transparent 46%,#958e82 47% 49%,transparent 50%);background-size:90px 52px;transform:rotateX(55deg) rotateZ(-20deg);box-shadow:42px 55px 25px #2224;transition:.5s}.board.rotated{transform:rotateX(55deg) rotateZ(18deg)}.notes{position:absolute;inset:0;background:radial-gradient(circle,var(--night) 0 5px,transparent 6px);background-size:90px 52px}.chord{position:absolute;width:120px;height:105px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#df6a49cc}.chord.one{left:25%;top:22%}.chord.two{right:20%;bottom:17%;background:#66a88dcc}#sizeBadge{position:absolute;right:7%;bottom:8%;background:var(--night);color:#fff;padding:8px 12px;font-size:12px;letter-spacing:.12em}.summary{background:#fff}.summary span{color:#716e68}.explain{padding:100px max(24px,7vw);background:var(--night);color:#fff}.explain>div:first-child{max-width:700px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px}.cards article{border-top:1px solid #59606c;padding:25px 0}.cards b{color:var(--mint)}.formats{padding:100px max(24px,7vw);text-align:center}.formats div{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border:1px solid var(--line)}.formats span{padding:40px 12px;border-right:1px solid var(--line);font-weight:800}.real{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;padding:90px max(24px,7vw);background:#fff}.media-placeholder{min-height:410px;display:grid;place-items:center;border:1px dashed #777;background:linear-gradient(135deg,#e5ddd0,#faf8f3);font-weight:900;color:#777}.closing{text-align:center;padding:110px max(24px,14vw);background:var(--mint)}.closing h2{max-width:900px;margin:0 auto 35px}#orderPanel{position:fixed;right:-430px;top:0;width:min(430px,100%);height:100vh;padding:30px;background:#fff;z-index:50;transition:.25s;overflow:auto}#orderPanel.open{right:0}.close{float:right;border:0;background:none;font-size:30px}.order-line{padding:15px 0;border-bottom:1px solid var(--line)}.order-line button{border:0;background:none;color:#a22}.notice{padding:14px;background:#fff0c8;margin-top:30px}#veil{display:none;position:fixed;inset:0;background:#0008;z-index:40}#veil.open{display:block}footer{padding:35px max(24px,5vw);display:flex;justify-content:space-between;background:var(--night);color:#aaa}footer .logo{color:#fff}@media(max-width:760px){nav a{display:none}.hero,.config,.real{grid-template-columns:1fr}.hero{padding-top:50px}.tonnetz-bg{height:390px}.controls{padding:55px 24px}.viewer{min-height:650px}.board{width:82%}.cards,.formats div{grid-template-columns:1fr}.formats span{border-right:0;border-bottom:1px solid var(--line)}.summary{display:block}.summary span{display:block}footer{display:block}}