/* TideTone: luminous instrument surfaces */
:root{--paper:#aca9a7;--ink:#111113;--muted:#48474c}header{height:80px}.brand{font-weight:400;letter-spacing:-1.2px}.hero{padding-top:32px;padding-bottom:28px}.hero-heading{grid-template-columns:1fr 1fr;gap:70px;align-items:end}.hero h1{font-size:clamp(38px,4vw,58px);font-weight:350;letter-spacing:-.055em;line-height:1.07;margin-top:16px}.hero-aside{justify-self:end}.hero .intro{font-size:15px;max-width:360px;margin-bottom:18px}.hero:before{inset:0 -20% -15%;background:radial-gradient(ellipse at 18% 88%,#8b9543b8,transparent 42%),radial-gradient(ellipse at 89% 87%,#774579b8,transparent 45%),radial-gradient(ellipse at 90% 8%,#144455b5,transparent 36%),radial-gradient(ellipse at 35% 55%,#bfd2c68c,transparent 38%);filter:blur(65px)}.stage{align-items:flex-start;max-width:1050px;gap:24px;margin-top:45px;padding-bottom:55px}.phone{box-shadow:0 22px 38px -22px #0008}.phone.side{width:230px;margin-top:94px;border-width:5px;border-radius:36px;z-index:1}.phone.right{margin-top:0}.instrument{width:330px;flex-shrink:0;background:#050506;border-radius:43px;padding:23px 9px 17px;color:#f5f1f4;position:relative;z-index:2;box-shadow:0 25px 38px -20px #0008;margin-top:43px}.instrument-top{display:flex;align-items:center;justify-content:space-between;padding:0 18px 20px;font-size:19px;letter-spacing:-.7px}.tiny-orbit{width:22px;height:22px;border:1px solid #b9b3bc;border-radius:50%;position:relative}.tiny-orbit:after{content:'';position:absolute;inset:6px;border:1px solid #b9b3bc;border-radius:50%}.resin-panel{border-radius:34px;padding:24px 18px 20px;min-height:398px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 56%,#100515 0%,#1c051b 25%,#5e164e 50%,#b44e92 73%,#d89ec4 100%);box-shadow:inset 0 2px 3px #ffe3fa90,inset 0 -3px 12px #e98ecba0,inset 7px 0 14px #e688c765,inset -5px 0 14px #ffa5f165}.resin-panel:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(155deg,#ffebfc38,transparent 40%);pointer-events:none}.panel-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:11px;letter-spacing:.5px;color:#fbecf7d9}.dial{position:relative;width:100%;aspect-ratio:1;margin:28px auto 22px}.ticks{position:absolute;inset:0;border-radius:50%}.ticks i{position:absolute;left:calc(50% - .5px);top:0;width:1px;height:5px;background:#e2bcc580;transform-origin:50% 135px;transform:rotate(calc(var(--i)*6deg))}.ticks .major{height:10px;background:#f7e4f0b0}.ticks i:nth-child(23),.ticks i:nth-child(24){background:#deff71;height:14px;width:2px}.dial-track{position:absolute;inset:15%;border:1px solid #efd1e225;border-radius:50%}.tone-trigger{position:absolute;inset:28%;background:transparent;border:0;border-radius:50%;color:inherit;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:3;touch-action:manipulation;padding:0}.dot-type{display:block;width:100px;height:62px}.dot-type svg{display:block;width:100%;height:100%;fill:currentColor}.trigger-label{font-size:10px;white-space:nowrap;color:#dcc1d6}.orb-key{position:absolute;width:43px;height:43px;border:1px solid #efd9e435;background:#1808195c;color:#e5d3df;border-radius:50%;left:calc(50% - 21.5px);top:calc(50% - 21.5px);transform:rotate(calc(var(--key)*60deg - 90deg)) translateX(97px) rotate(calc(90deg - var(--key)*60deg));font-size:12px;z-index:4;transition:background .2s,box-shadow .2s,color .2s}.orb-key[aria-pressed=true]{background:#ead8e6;color:#24131f;border-color:#fff4;box-shadow:0 0 24px #f3acda65}.orb-key:hover{background:#d89bc6;color:#111}.resin-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#f1ddea}.frequency{font-variant-numeric:tabular-nums;font-size:11px;color:#e3bed7}.instrument-foot{padding:18px 14px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#c3b9c3;font-size:11px}.mini-wave{display:flex;gap:3px;height:18px;align-items:center}.mini-wave i{height:5px;width:2px;background:#dae8aa}.mini-wave i:nth-child(2){height:11px}.mini-wave i:nth-child(3){height:18px}.mini-wave i:nth-child(4){height:10px}.instrument.sounding .resin-panel{animation:resonate .85s ease-out}.instrument.sounding .mini-wave i{animation:meter .5s ease-in-out infinite alternate}.platform{border-color:#1112;font-size:11px;letter-spacing:2px}.stage-note{right:-5px;bottom:15px;font-size:11px}.section-head h2{font-weight:350;font-size:clamp(34px,3.6vw,50px)}.feature{min-height:570px;background:#09090b}.feature.dark{background:#09090b}.feature-visual{padding:45px}.feature-visual:before{inset:35px 35px;background:radial-gradient(ellipse at 50% 50%,#000b 20%,#1845349c 47%,#a5d0bda8 75%,#d8e9e58f 100%);filter:none;border-radius:38px;box-shadow:inset 0 2px 3px #f0fff790,inset 0 -2px 9px #b5e5d84f}.feature.dark .feature-visual:before{background:radial-gradient(ellipse at 50% 50%,#060815 20%,#101a6890 45%,#535ecca8 76%,#b6b5e18f 100%)}.device{width:210px;box-shadow:0 10px 30px #0005}.feature-copy{padding-left:55px}.feature h3{font-weight:350;font-size:43px}.feature-number{color:#a8a4ac}.feature p{color:#bcb8c0}.sound{background:#050506;position:relative;isolation:isolate;padding:48px;grid-template-columns:.9fr 1.25fr}.sound-console{background:radial-gradient(ellipse at 50% 47%,#040513 20%,#0c123e 44%,#3848a6 77%,#aaa9d7 100%);border-radius:35px;padding:25px;box-shadow:inset 0 2px 3px #dad5ff90,inset 0 -3px 12px #7b77d080}.sound-display{border:0;margin-bottom:20px;height:190px;background:none}.sound-display .dot-type{width:135px;height:82px;color:#e6e2f3}.sound-display svg.waveform{height:65px;width:100%}.sound-display .waveform path{stroke:#dcec82;stroke-width:.8}.notes{gap:5px}.note{height:45px;border:1px solid #efeaff45;font-size:12px;border-radius:50px;background:#07091f70;color:#f1eafa}.note:hover,.note.active{background:#ddd7e9;box-shadow:0 0 22px #9a98ef85}.caption{font-size:11px;color:#dfd9ed;margin-top:20px}.sound h3{font-weight:350}.volume-row{display:flex;align-items:center;gap:15px;margin:17px 4px 5px;font-size:11px;color:#e4dced}.volume-row input{width:100%;min-width:0;accent-color:#e2f093;height:20px;cursor:pointer}.volume-row output{min-width:28px;font-variant-numeric:tabular-nums}.learn-card h3{font-weight:400}.closing h2{font-weight:350}@keyframes resonate{0%{filter:brightness(1.35)}100%{filter:brightness(1)}}@keyframes meter{to{transform:scaleY(.35)}}html[lang=zh-Hans] .hero h1,html[lang=ja] .hero h1{font-size:clamp(36px,4vw,55px);font-weight:350}html[lang=de] .hero h1{font-size:clamp(34px,3.6vw,51px)}@media(max-width:1000px){.stage{gap:15px}.phone.side{width:195px}.instrument{width:310px}.ticks i{transform-origin:50% 125px}.orb-key{transform:rotate(calc(var(--key)*60deg - 90deg)) translateX(88px) rotate(calc(90deg - var(--key)*60deg))}.feature-copy{padding-left:35px}.sound{padding:32px;gap:25px}.sound-console{padding:20px}.feature-visual:before{inset:30px 20px}}@media(max-width:760px){.hero-heading{display:block}.hero{padding-top:30px}.hero .intro{font-size:15px;margin:18px 0}.hero h1{font-size:43px}.stage{display:grid;grid-template-columns:1fr 1fr;gap:20px 15px;max-width:440px;margin:30px auto 0;padding:0 0 20px}.instrument{grid-column:1/-1;grid-row:1;width:330px;max-width:100%;margin:0 auto;border-radius:38px}.phone.side{width:100%;max-width:178px;margin:0;justify-self:end;border-radius:27px;border-width:4px}.phone.side.right{justify-self:start;margin-top:35px}.ticks i{transform-origin:50% 135px}.orb-key{transform:rotate(calc(var(--key)*60deg - 90deg)) translateX(97px) rotate(calc(90deg - var(--key)*60deg))}.stage-note{display:none}.feature h3{font-size:34px}.feature-copy{padding:35px 28px 5px}.feature.dark .feature-copy{padding:35px 28px 5px}.feature-visual{padding:50px 35px}.feature-visual:before{inset:20px}.device{width:190px}.feature{min-height:0}.sound{padding:30px 18px;gap:20px}.sound>div:first-child{padding:0 10px}.sound-console{padding:20px 16px;border-radius:30px}.sound-display{height:170px}.note{font-size:11px;height:42px}.sound h3{font-size:38px}.section{padding-top:65px;padding-bottom:65px}.learn-section,.faq-section{padding-top:5px}html[lang=zh-Hans] .hero h1,html[lang=ja] .hero h1{font-size:40px}}@media(max-width:370px){.instrument{padding-left:7px;padding-right:7px}.resin-panel{padding-left:10px;padding-right:10px}.orb-key{transform:rotate(calc(var(--key)*60deg - 90deg)) translateX(89px) rotate(calc(90deg - var(--key)*60deg))}.ticks{display:none}.panel-meta{font-size:10px}.instrument-foot{font-size:10px}.note{font-size:10px}}@media(prefers-reduced-motion:reduce){.instrument.sounding .resin-panel,.instrument.sounding .mini-wave i{animation:none}}
.brand-logo{display:block;width:38px;height:38px;object-fit:contain;background:#111114;border-radius:10px;padding:3px}.brand{gap:11px}.instrument-brand{display:flex;align-items:center;gap:9px}.instrument-brand img{width:30px;height:30px;object-fit:contain}.footer-brand{display:flex;gap:14px;align-items:center}.footer-brand>img{width:52px;height:52px;object-fit:contain;background:#111114;border-radius:13px;padding:4px}
