:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#171d2c;background:#faf9f3;font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}em{font-style:normal}h1,h2,p{margin-top:0}
.skip-link{position:absolute;left:12px;top:-80px;z-index:20;background:white;padding:12px}.skip-link:focus{top:12px}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,80px);background:#1663cc;color:white;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:8px;font-size:23px;font-weight:800;letter-spacing:.06em;line-height:1}.brand-mark{font-size:31px;font-weight:400;line-height:.8}.brand small{display:block;font-size:9px;letter-spacing:.3em;font-weight:600;margin-top:5px}
.site-header nav{display:flex;gap:38px;margin-left:52px;font-size:12px;font-weight:700;letter-spacing:.08em}.site-header nav a{padding:15px 0;border-bottom:1px solid transparent}.site-header nav a:hover,.site-header nav a:focus-visible{border-color:currentColor}
.header-listen{border:1px solid rgba(255,255,255,.8);border-radius:100px;padding:11px 19px;font-size:11px;font-weight:700;letter-spacing:.06em}.header-listen span{margin-left:24px}
.hero{min-height:min(850px,calc(100svh - 82px));background:#1264d9;color:#fff;position:relative;overflow:hidden}
.hero-image,.hero-wash{position:absolute;inset:0}.hero-image{background-image:url('assets-generated/images/otoha-sky.jpg');background-position:center 55%;background-size:cover}.hero-wash{background:linear-gradient(90deg,rgba(0,55,140,.59) 0%,rgba(1,72,168,.4) 42%,transparent 73%),linear-gradient(0deg,rgba(7,35,81,.33),transparent 35%)}
.hero-inner{position:relative;z-index:1;min-height:inherit;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(90px,10vw,145px) clamp(24px,8vw,128px) 36px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;line-height:1.6}.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:29px}.sun-dot{width:8px;height:8px;background:#f8d858;border-radius:50%;box-shadow:0 0 0 5px rgba(248,216,88,.18)}
.hero h1{font-size:clamp(54px,7.8vw,116px);font-weight:700;letter-spacing:-.07em;line-height:1.22;margin:0 0 26px;text-shadow:0 2px 18px rgba(0,50,110,.08)}.hero h1 em{color:#fff0a4}
.hero-lead{font-size:clamp(14px,1.3vw,17px);line-height:2;letter-spacing:.11em;font-weight:600;margin-bottom:34px;text-shadow:0 1px 8px rgba(0,40,100,.3)}
.hero-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;background:#fff;color:#1465cb;border-radius:100px;min-width:220px;padding:17px 22px;font-size:12px;font-weight:800;letter-spacing:.1em;box-shadow:0 12px 30px rgba(0,31,84,.14);transition:transform .25s,box-shadow .25s}.hero-cta:hover{transform:translateY(-4px);box-shadow:0 17px 32px rgba(0,31,84,.23)}
.hero-bottom{display:flex;align-items:center;gap:20px;margin-top:auto;padding-top:80px;font-size:9px;letter-spacing:.17em;font-weight:700}.hero-rule{width:68px;height:1px;background:rgba(255,255,255,.75)}.hero-sticker{position:absolute;right:4.5vw;top:10%;z-index:2;width:90px;height:90px;border:1px solid rgba(255,255,255,.75);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transform:rotate(14deg);font-size:9px;letter-spacing:.15em;text-align:center}.hero-sticker span:first-child{font-size:19px;letter-spacing:0}
.collection{padding:115px clamp(24px,7vw,112px) 128px;background:#faf9f3}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:48px}.dark-eyebrow{color:#1465cb}.section-heading h2{font-size:clamp(38px,4.8vw,67px);line-height:1.35;letter-spacing:-.07em;margin:10px 0 0}.section-heading h2 em{color:#196bd6}.section-heading>p{font-size:13px;line-height:2;letter-spacing:.08em;margin-bottom:8px;color:#5c6470}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.scene-card{text-align:left;padding:0;background:#fff;border:1px solid #e8e8e2;position:relative;min-width:0;box-shadow:0 12px 30px rgba(22,38,60,.035);transition:transform .25s,box-shadow .25s,border-color .25s}.scene-card:hover{transform:translateY(-6px);box-shadow:0 18px 35px rgba(22,38,60,.1)}.scene-card.is-selected{border-color:#1465cb;box-shadow:0 0 0 2px #1465cb,0 18px 35px rgba(22,38,60,.09)}.scene-card:focus-visible{outline:3px solid #0c539f;outline-offset:4px}
.card-art{height:clamp(230px,24vw,385px);display:block;position:relative;overflow:hidden;background-size:cover;background-position:center}.art-meadow{background-image:linear-gradient(0deg,rgba(98,81,43,.08),transparent),url('assets-generated/images/otoha-dawn.jpg');background-color:#d8e8d6}.art-tide{background:radial-gradient(ellipse at 55% 77%,#a9d7d9 0%,transparent 32%),radial-gradient(ellipse at 73% 44%,#d9ebe3 0%,transparent 27%),linear-gradient(154deg,#a9d3f1 0%,#5c95bd 44%,#1b7294 74%,#3b6d6e 100%)}.art-tide:after{content:"";position:absolute;inset:60% -15% -10%;border:12px solid rgba(238,251,237,.6);border-radius:50%;transform:rotate(-14deg);box-shadow:0 -20px 0 -17px rgba(255,255,255,.7),0 -62px 0 -57px rgba(255,255,255,.55)}.art-night{background-image:url('assets-generated/images/otoha-night.jpg');background-color:#164c81}
.mini-disc{position:absolute;width:52%;aspect-ratio:1;border-radius:50%;left:24%;top:23%;z-index:1;background:repeating-radial-gradient(circle at center,#171b23 0 2px,#303640 3px 4px,#0e1118 5px 8px);box-shadow:12px 20px 24px rgba(4,22,39,.32),inset 12px 6px 18px rgba(255,255,255,.13);transform:rotate(-13deg)}.mini-disc:before{content:"";position:absolute;inset:34%;border-radius:50%;background:#f5dd91;border:9px solid #ebbd69}.art-tide .mini-disc:before{background:#b4d9e9;border-color:#75afcc}.art-night .mini-disc:before{background:#f0a59c;border-color:#b97192}.mini-disc:after{content:"";position:absolute;inset:48%;background:#151a24;border-radius:50%}
.card-info{min-height:150px;display:flex;flex-direction:column;padding:26px 25px 27px}.card-index{font-size:9px;font-weight:800;letter-spacing:.21em;color:#196bd6}.card-info strong{font-size:25px;letter-spacing:-.035em;margin:8px 0 7px}.card-info>span:last-child{font-size:12px;color:#68727e;letter-spacing:.04em;line-height:1.6}.card-arrow{position:absolute;right:25px;bottom:30px;color:#1766ce;font-size:20px}
.listening-room{background:#095dca;color:white;display:grid;grid-template-columns:47% 53%;position:relative;overflow:hidden}.listening-room[data-scene="tide"]{background:#277990}.listening-room[data-scene="night"]{background:#152e6d}.room-copy{padding:clamp(80px,9vw,140px) 24px 130px clamp(24px,8vw,128px);position:relative;z-index:2}.room-copy .eyebrow{color:#d9eafa;margin-bottom:26px}.room-copy h2{font-size:clamp(42px,5vw,72px);letter-spacing:-.07em;line-height:1.2;margin-bottom:22px}.room-copy>p:not(.eyebrow){max-width:390px;font-size:14px;line-height:2.2;letter-spacing:.08em;color:#e2edff}.room-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:32px}.play-button{border:0;border-radius:100px;background:#fff;color:#145abb;padding:16px 23px;display:flex;align-items:center;gap:12px;font-weight:800;font-size:12px;letter-spacing:.08em;min-width:145px}.play-button:hover{background:#fff3ba}.play-icon{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}.is-playing .play-icon{width:10px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}.text-button{border:0;background:none;color:inherit;font-size:12px;font-weight:700;padding:13px 5px;border-bottom:1px solid rgba(255,255,255,.55)}.text-button:disabled{opacity:.45;cursor:default}.text-button span{margin-left:6px}.audio-status{font-size:11px!important;color:#c9ddf3!important;margin:22px 0 0!important;min-height:22px}
.turntable{position:relative;min-height:620px;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(252,255,255,.18),transparent 60%)}.orbit{position:absolute;border:1px solid rgba(255,255,255,.25);border-radius:50%;width:72%;aspect-ratio:1}.orbit-two{width:94%;border-color:rgba(255,255,255,.13)}.record{width:min(66%,500px);aspect-ratio:1;border-radius:50%;position:relative;z-index:1;background:repeating-radial-gradient(circle at center,#10151d 0 2px,#2e3540 3px 4px,#111721 5px 8px);box-shadow:27px 32px 55px rgba(0,25,60,.35),inset 22px 13px 30px rgba(255,255,255,.1);display:grid;place-items:center}.record:before{content:"";position:absolute;inset:7%;border:1px solid rgba(255,255,255,.13);border-radius:50%}.record-label{width:34%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#f4d68b;color:#2b3239;box-shadow:0 0 0 13px #dfb973;text-align:center}.record-label span{font-size:10px;letter-spacing:.2em;font-weight:800}.record-label b{font-size:clamp(25px,4vw,47px);line-height:1}.record-label small{font-size:5px;letter-spacing:.14em}.is-playing .record{animation:spin 8s linear infinite}.needle{position:absolute;z-index:2;width:36%;height:5px;top:18%;right:-2%;background:#f6d688;transform:rotate(48deg);transform-origin:right center;border-radius:5px;box-shadow:0 3px 12px rgba(0,0,0,.25)}.needle:after{content:"";position:absolute;left:0;top:-7px;width:21px;height:19px;background:#e7c471;border-radius:3px}.turntable-caption{position:absolute;bottom:50px;right:8%;font-size:8px;letter-spacing:.22em;color:#d7e8ff}
.player-bar{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.3);min-height:83px;display:flex;align-items:center;gap:20px;padding:18px clamp(24px,8vw,128px);font-size:10px;font-weight:700;letter-spacing:.05em}.player-title{display:flex;align-items:center;gap:15px;min-width:160px}.equalizer{height:16px;display:flex;align-items:end;gap:2px}.equalizer i{display:block;width:3px;height:35%;background:#f9de86}.equalizer i:nth-child(2){height:85%}.equalizer i:nth-child(3){height:60%}.equalizer i:nth-child(4){height:95%}.is-playing .equalizer i{animation:beat .8s ease-in-out infinite alternate}.is-playing .equalizer i:nth-child(2){animation-delay:.2s}.is-playing .equalizer i:nth-child(3){animation-delay:.4s}.is-playing .equalizer i:nth-child(4){animation-delay:.1s}.progress{height:3px;background:rgba(255,255,255,.3);flex:1;min-width:50px}.progress span{display:block;height:100%;width:0;background:#f9de86}.duration{white-space:nowrap;opacity:.7}.volume-label{white-space:nowrap}#volume{width:75px;accent-color:#f9de86}
.about{background:#f5e8bd;padding:95px clamp(24px,8vw,128px);display:grid;grid-template-columns:120px 1.2fr 1fr;align-items:center;gap:40px}.about-symbol{font-size:100px;line-height:1;color:#1565ce}.about h2{font-size:clamp(31px,3.3vw,48px);line-height:1.45;letter-spacing:-.06em;margin:15px 0 0}.about>p{font-size:13px;line-height:2.3;letter-spacing:.06em;color:#444d58;margin:0;max-width:400px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#112a53;color:#fff;padding:38px clamp(24px,8vw,128px);font-size:11px;letter-spacing:.08em}.footer-brand{font-size:20px}.footer-brand small{margin-left:3px}
dialog{max-width:min(500px,calc(100vw - 32px));border:0;padding:54px 45px 39px;box-shadow:0 25px 80px rgba(0,0,0,.25);color:#1c2939}dialog::backdrop{background:rgba(8,24,47,.7)}dialog h2{font-size:35px;margin:8px 0 25px}dialog p{line-height:2;font-size:14px}.dialog-close{position:absolute;right:20px;top:14px;background:none;border:0;font-size:28px}.dialog-foot{padding-top:20px;border-top:1px solid #d8dce0;color:#607080;font-size:11px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes beat{to{height:20%}}
@media(max-width:800px){.site-header{height:70px}.site-header nav{display:none}.hero{min-height:720px}.hero-image{background-position:61% center}.hero-wash{background:linear-gradient(90deg,rgba(0,50,124,.68),rgba(0,50,124,.2) 85%),linear-gradient(0deg,rgba(0,33,85,.4),transparent 35%)}.hero-inner{padding-top:135px}.hero-sticker{right:6%;top:6%}.section-heading{align-items:start;flex-direction:column}.shelf{grid-template-columns:1fr;gap:24px}.card-art{height:330px}.mini-disc{width:220px;left:calc(50% - 110px);top:50px}.listening-room{grid-template-columns:1fr}.room-copy{padding:80px 24px 25px}.turntable{min-height:490px}.record{width:min(63%,380px)}.needle{right:6%;top:16%;width:28%}.player-bar{flex-wrap:wrap;padding:20px 24px}.player-title{flex-basis:100%}.progress{flex-basis:45%}.about{grid-template-columns:1fr 1fr}.about-symbol{display:none}.about>p{margin-top:20px}}
@media(max-width:500px){.header-listen{padding:10px 13px;font-size:10px}.header-listen span{margin-left:7px}.hero{min-height:700px}.hero-image{background-position:58% center}.hero-inner{padding-top:128px}.hero h1{font-size:clamp(47px,13vw,66px)}.hero-lead{font-size:13px}.hero-bottom{font-size:8px;gap:12px}.hero-rule{width:25px}.hero-sticker{width:64px;height:64px;font-size:7px}.hero-sticker span:first-child{font-size:14px}.collection{padding-top:80px;padding-bottom:85px}.section-heading h2{font-size:39px}.section-heading>p{font-size:12px}.card-art{height:300px}.card-info{min-height:137px;padding:21px}.card-info strong{font-size:23px}.card-arrow{right:21px;bottom:24px}.turntable{min-height:380px}.record{width:66%}.record-label{box-shadow:0 0 0 7px #dfb973}.record-label span{font-size:7px}.record-label small{font-size:4px}.needle{top:18%}.turntable-caption{bottom:22px;font-size:6px}.player-bar{gap:12px}.duration{display:none}.about{display:block;padding:75px 24px}.about>p{margin-top:27px}footer{flex-wrap:wrap;gap:25px}footer span:last-child{flex-basis:100%}dialog{padding:45px 28px 28px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}