/* styles.css · WatchRec · Created by sunly on 2026/10/22. */
:root{--paper:#f7f6f2;--surface:#efeee8;--ink:#282b27;--muted:#666a62;--tea:#785b3e;--sage:#48624e;--rule:#dedfd5;--serif:"Songti SC","STSong","Noto Serif CJK SC",serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:400}a{color:inherit;text-underline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--tea);outline-offset:6px}button:disabled{cursor:wait}img{display:block;max-width:100%;height:auto}a:hover{color:var(--tea)}[hidden]{display:none!important}.wrap{width:min(1280px,calc(100% - 112px));margin:auto}.skip{position:absolute;top:8px;left:24px;transform:translateY(-180%);z-index:5;background:var(--paper);padding:12px}.skip:focus{transform:none}.site-header{border-bottom:1px solid var(--rule)}.nav{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none;flex-shrink:0}.brand img{width:45px;height:45px;mix-blend-mode:multiply}.brand-name{font:27px var(--serif);letter-spacing:.16em}.brand small{font:11px var(--sans);letter-spacing:.13em;color:var(--muted);border-left:1px solid var(--rule);margin-left:10px;padding-left:18px}.nav-links{display:flex;align-items:center;gap:30px;font-size:14px}.nav-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.nav-links [aria-current=page]{color:var(--tea);text-decoration:underline}.button{display:inline-flex;justify-content:center;align-items:center;gap:26px;width:max-content;max-width:100%;min-height:54px;border:1px solid var(--ink);border-radius:12px;background:var(--ink);color:var(--paper);padding:12px 24px;text-decoration:none;transition:background .2s,transform .2s}.button:hover{background:var(--sage);border-color:var(--sage);color:var(--paper);transform:translateY(-2px)}.button.small{min-height:44px;padding:8px 18px;font-size:14px}.button.outline{background:transparent;color:var(--ink);border-color:var(--rule)}.button.outline:hover{border-color:var(--sage)}.eyebrow{font-size:12px;letter-spacing:.12em;color:var(--sage)}.mono{font-family:ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.hero{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;min-height:730px;padding-block:46px}.hero-copy{padding-bottom:24px}.hero h1{font:clamp(48px,5.3vw,78px)/1.3 var(--serif);letter-spacing:-.035em;margin:28px 0}.hero .intro{font-size:18px;color:var(--muted);line-height:1.9;margin-bottom:32px}.release{margin-top:20px;color:var(--muted);font-size:12px;letter-spacing:.015em}.hero-art{height:630px;position:relative;isolation:isolate}.ripples{position:absolute;width:100%;height:420px;top:110px;left:0;display:grid;place-items:center;transform:rotate(-16deg);z-index:-1}.ripple{position:absolute;width:var(--w);height:var(--h);border:1px solid #48624e25;border-radius:50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity 1.2s}.is-docked .ripple{transform:scale(.72);opacity:.45}.phone{position:absolute;right:9%;top:10px;width:266px;border-radius:25px;box-shadow:0 18px 50px #282b2712;background:var(--paper)}.phone img{border-radius:25px}.art-caption{position:absolute;right:10%;bottom:7px;font-size:11px;color:var(--muted)}.sound-note{position:absolute;left:0;bottom:85px;width:270px;padding:22px 24px;background:var(--surface);border:1px solid var(--rule);box-shadow:0 8px 22px #282b2708}.note-top{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}.record-dot{height:6px;width:6px;flex-shrink:0;background:#a04036;border-radius:50%}.waveform{display:flex;align-items:center;height:48px;gap:4px;margin:12px 0}.waveform i{display:block;background:var(--sage);width:3px;height:var(--bar);border-radius:2px;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.waveform i:nth-child(n+20){background:#a5af9f}.is-docked .waveform i{transform:scaleY(.15)}.dock{background:transparent;border:0;border-top:1px solid #d7d9cf;width:100%;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 0 0;color:var(--tea);font-size:12px}.section{padding-block:85px}.section-title{font:40px/1.45 var(--serif);letter-spacing:-.025em}.section-intro{margin-top:14px;color:var(--muted);font-size:17px}.section-topline{display:flex;justify-content:space-between;align-items:end;gap:24px}.index-note{font-size:11px;color:var(--muted);letter-spacing:.1em}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:38px}.step{border-top:1px solid var(--rule);padding-top:24px}.step-number{font:12px ui-monospace,monospace;color:var(--sage)}.step h3{font:25px/1.5 var(--serif);margin:14px 0 10px}.step p{color:var(--muted);max-width:330px}.sample-section{background:var(--surface);padding-block:80px}.sample-wrap{width:min(1040px,calc(100% - 112px));margin:auto}.sample-heading{display:flex;align-items:end;justify-content:space-between;gap:24px}.sample-book{background:var(--paper);margin-top:34px;padding:34px 42px 42px;border:1px solid var(--rule);position:relative}.sample-book:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sage)}.sample-controls{display:flex;gap:26px;align-items:center;border-bottom:1px solid var(--rule);margin-bottom:26px;flex-wrap:wrap}.sample-controls button{background:none;border:0;border-bottom:2px solid transparent;min-height:52px;padding:0 2px;font-size:17px}.sample-controls button[aria-pressed=true]{color:var(--tea);border-bottom-color:var(--tea)}.sample-label{font-size:12px;color:var(--muted);margin-left:auto}.sample-panel{min-height:214px}.sample-panel h3{font:26px/1.5 var(--serif);margin-bottom:16px}.sample-panel .quote{font:26px/1.95 var(--serif);max-width:790px}.timestamp{display:block;font-size:12px;color:var(--tea);margin-bottom:12px}.sample-foot{font-size:12px;color:var(--muted);margin-top:26px}.summary-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px}.summary-grid p,.summary-grid li{font-size:17px}.summary-grid ul{margin:0;padding-left:20px}.summary-grid h4{font-size:12px;font-weight:400;letter-spacing:.12em;color:var(--sage);margin:0 0 14px}.privacy-band{background:var(--sage);color:var(--paper)}.privacy-band .eyebrow,.privacy-band p{color:#e3e8e0}.privacy-band .section-title{margin-top:16px}.privacy-points{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin:40px 0 30px}.privacy-points h3{font:24px var(--serif);margin-bottom:14px}.privacy-band a{display:inline-flex;min-height:44px;align-items:center;gap:26px;font-size:14px}.privacy-band a:hover{color:white}.closing{display:flex;align-items:center;justify-content:space-between;gap:28px}.closing p{margin-top:16px;color:var(--muted)}.site-footer{border-top:1px solid var(--rule);padding:34px 0 28px}.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer-links{display:flex;flex-wrap:wrap;gap:28px;font-size:13px}.footer-links a{min-height:44px;display:inline-flex;align-items:center}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted);margin-top:24px;letter-spacing:.03em}.footer-brand{font:22px var(--serif)}
.document-hero{padding:70px 0 44px}.document-hero h1{font:58px/1.35 var(--serif);margin:20px 0}.document-hero .subtitle{font-size:19px;color:var(--muted)}.document-meta{display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--muted);font-size:12px;margin-top:28px}.draft{border-left:2px solid var(--tea);background:var(--surface);padding:18px 22px;color:var(--tea);font-size:14px;margin:26px 0 0;max-width:880px}.document-layout{display:grid;grid-template-columns:200px minmax(0,820px);gap:72px;padding-bottom:90px}.toc{align-self:start;position:sticky;top:28px;font-size:13px}.toc p{font-size:11px;letter-spacing:.12em;color:var(--muted);margin-bottom:14px}.toc a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted)}.toc a:hover{color:var(--tea)}.toc button{margin-top:22px}.document-body{min-width:0}.document-body section{padding:32px 0;border-top:1px solid var(--rule);scroll-margin-top:24px}.document-body h2{font:26px/1.5 var(--serif);margin-bottom:18px}.document-body h3{font-size:18px;margin:24px 0 10px}.document-body p{margin:12px 0;color:var(--muted)}.document-body strong{color:var(--ink);font-weight:500}.document-body ul{padding-left:22px;color:var(--muted)}.document-body li{margin:8px 0}.document-body a{color:var(--tea)}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:12px}.facts p{font-size:14px}.facts strong{display:block;font:22px/1.4 var(--serif);margin-bottom:8px}.data-list{display:grid;grid-template-columns:130px minmax(0,1fr);margin:22px 0}.data-list dt,.data-list dd{margin:0;padding:16px 0;border-top:1px solid var(--rule)}.data-list dd{padding-left:24px;color:var(--muted)}.source-note{font-size:12px}.support-intro{max-width:780px}.support-steps{margin-top:40px;margin-bottom:54px}.support-body{max-width:900px;padding-bottom:90px}.support-body h2{font:32px var(--serif);margin:48px 0 24px}.faq{border-top:1px solid var(--rule)}.faq:last-of-type{border-bottom:1px solid var(--rule)}summary{cursor:pointer;padding:22px 36px 22px 0;font-size:18px;list-style:none;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:4px;top:20px;font-size:22px;color:var(--tea)}details[open] summary:after{content:"−"}.faq p{padding:0 28px 24px 0;max-width:780px;color:var(--muted)}.support-contact{padding:28px;background:var(--surface);margin-top:48px}.support-contact h2{margin:0 0 12px;font-size:26px}.support-contact p{color:var(--muted);margin-top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1500px){.hero{min-height:790px}.hero-art{height:650px}.phone{width:280px}.sound-note{bottom:94px}}
@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.brand small{display:none}.hero{gap:0;min-height:670px}.hero h1{font-size:56px}.hero .intro{font-size:16px}.hero-art{height:580px}.phone{width:235px;right:2%}.sound-note{width:235px;left:-4%;bottom:65px}.art-caption{right:4%}.sample-wrap{width:calc(100% - 80px)}.steps{gap:28px}.privacy-points{gap:32px}.document-layout{grid-template-columns:170px minmax(0,1fr);gap:36px}}
@media(max-width:720px){html{scroll-padding-top:12px}.wrap,.sample-wrap{width:calc(100% - 48px)}.nav{min-height:80px;gap:16px}.brand img{width:36px;height:36px}.brand-name{font-size:24px}.nav-links{gap:18px;font-size:13px}.nav-links .desktop-link{display:none}.hero{display:block;padding-top:46px;padding-bottom:28px}.hero-copy{padding:0}.hero h1{font-size:clamp(42px,9.6vw,60px);margin:24px 0;line-height:1.38}.hero .intro{font-size:16px;margin-bottom:26px}.eyebrow{font-size:11px}.hero-art{height:565px;max-width:430px;margin:38px auto 0;overflow:clip}.phone{width:230px;right:4%;top:0}.ripples{width:100%;height:330px;top:60px;overflow:hidden}.sound-note{width:224px;bottom:45px;left:0;padding:18px 20px}.art-caption{bottom:7px;right:4%}.section{padding-block:56px}.section-title{font-size:30px}.section-topline,.sample-heading{display:block}.index-note{display:block;margin-top:10px}.section-intro{font-size:16px}.steps{display:block;margin-top:28px}.step{padding:24px 0}.step p{max-width:none}.step h3{font-size:24px}.sample-section{padding-block:54px}.sample-book{margin-top:28px;padding:20px 24px 28px}.sample-controls{gap:22px;margin-bottom:24px}.sample-label{width:100%;margin:0 0 12px}.sample-panel{min-height:300px}.sample-panel .quote{font-size:23px;line-height:1.9}.sample-panel h3{font-size:22px}.summary-grid{grid-template-columns:1fr;gap:24px}.summary-grid p,.summary-grid li{font-size:16px}.privacy-points{grid-template-columns:1fr;gap:28px;margin-block:32px 20px}.privacy-points h3{font-size:23px}.closing{display:block}.closing .button{margin-top:28px}.footer-top,.footer-bottom{display:block}.footer-links{gap:22px;margin-top:18px}.footer-bottom span{display:block;margin-top:8px}.document-hero{padding:45px 0 30px}.document-hero h1{font-size:42px}.document-hero .subtitle{font-size:17px}.document-layout{display:block;padding-bottom:52px}.toc{position:static;margin:0 0 30px;border-top:1px solid var(--rule);padding-top:20px;display:flex;flex-wrap:wrap;gap:0 22px}.toc p{width:100%;margin-bottom:8px}.toc a{min-height:44px}.toc button{margin-top:10px}.document-body section{padding-block:26px}.document-body h2{font-size:24px}.facts{grid-template-columns:1fr;gap:8px}.facts strong{font-size:21px}.data-list{grid-template-columns:1fr}.data-list dt{padding-bottom:0}.data-list dd{padding:8px 0 18px;border-top:0}.support-body{padding-bottom:56px}summary{font-size:17px}.support-steps{margin-top:22px;margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover{transform:none}}
@media print{@page{margin:18mm}body{background:white;color:black;font-size:11pt}.site-header,.site-footer,.toc,.skip,.print-button{display:none!important}.wrap{width:100%;max-width:none}.document-hero{padding:0 0 16px}.document-hero h1{font-size:32pt}.document-layout{display:block;padding:0}.document-body section{padding:16px 0}.document-body h2{break-after:avoid;font-size:18pt}.document-body p,.document-body li{orphans:3;widows:3;color:#333}.draft{border:1px solid #777;background:white;color:#333}.document-body a{color:#333}.document-body a[href^="https:"]:after{content:" (" attr(href) ")";font-size:9pt;overflow-wrap:anywhere}}