/* ECHO — ClipRecall's art-led, content-first design system. */
:root{--ink:#202524;--muted:#626966;--paper:#f0efe9;--rule:#cdcec7;--night:#080d11;--snow:#f8f8f2;--ice:#beeaff;--accent:#244f69;--gutter:clamp(24px,4.4vw,80px);--reading:720px;--radius:8px;--body:Arial,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;--display:Georgia,"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0;background:var(--night);font-family:var(--body);color:var(--ink);font-size:16px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible{outline:2px solid #4f9dd0;outline-offset:6px;border-radius:2px}::selection{background:#bce4f4;color:#102a3e}p{margin:0;line-height:1.8;text-wrap:pretty}h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}img{display:block;max-width:100%}a,summary{touch-action:manipulation}.skip-link{position:absolute;z-index:50;left:20px;top:12px;padding:12px 20px;background:var(--paper);color:var(--ink);transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}
.site-header{position:absolute;z-index:10;inset:0 0 auto;padding:25px var(--gutter);display:flex;align-items:center;gap:32px;color:var(--snow);border-bottom:1px solid #ffffff1c;min-height:95px}.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:600;letter-spacing:-.7px;min-height:44px}.brand img{border-radius:7px}.main-nav{margin-left:auto;font-size:13px}.main-nav a{display:flex;gap:28px;align-items:center;min-height:44px}.main-nav a:hover{color:var(--ice)}.language-switch{display:flex;align-items:center;gap:2px;padding-left:28px;border-left:1px solid #ffffff35}.language-switch a{font-size:10px;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;position:relative;color:#b5c0c4}.language-switch a:hover{color:white;background:#ffffff0a}.language-switch a[aria-current]{color:white}.language-switch a[aria-current]:after{content:"";height:2px;position:absolute;bottom:5px;width:16px;background:var(--ice)}
.hero{min-height:780px;height:100svh;max-height:1200px;position:relative;isolation:isolate;color:var(--snow);overflow:hidden;background:var(--night)}.hero-art{position:absolute;inset:0;z-index:-3}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:56% center}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,10,13,.36),transparent 64%),linear-gradient(0deg,rgba(5,10,13,.55),transparent 42%,transparent 87%,rgba(5,10,13,.6))}.hero-copy{position:absolute;left:var(--gutter);bottom:14.5%;max-width:610px}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:500;line-height:1.7;text-transform:uppercase}.hero-copy .eyebrow{margin-bottom:28px;color:#d3dce0}.hero h1{font-family:var(--display);font-size:clamp(64px,6.3vw,104px);line-height:.98;letter-spacing:-.045em}.display-line{display:block}.hero-emphasis{font-style:italic;color:#d6e9f1}.hero-intro{font-size:14px;line-height:1.75;max-width:340px;margin-top:29px;color:#d2dadd}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:28px}.button{min-height:48px;padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;gap:30px;font-size:12px;border:1px solid transparent;border-radius:3px;font-weight:500;transition:background .18s,color .18s,transform .18s}.button:hover{transform:translateY(-2px)}.button-light{color:#15242b;background:#edf5f5}.button-light:hover{background:#ccefff}.text-link{display:inline-flex;align-items:center;gap:22px;font-size:12px;min-height:44px}.text-link:hover{color:var(--ice)}.compatibility{font-size:10px;margin-top:16px;color:#a8b7bf;letter-spacing:.015em}.hero-bottom{position:absolute;bottom:28px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.11em;color:#bec9ce;text-transform:uppercase}.scroll-link{min-height:44px;display:flex;gap:24px;align-items:center}.scroll-link:hover{color:white}.art-number{font-variant-numeric:tabular-nums}
.paper{background:var(--paper)}.section-wrap{padding-left:var(--gutter);padding-right:var(--gutter);max-width:1600px;margin:auto}.idea{padding-top:110px;padding-bottom:100px}.section-label{margin-bottom:48px;color:var(--muted)}.idea-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center}.idea h2,.privacy-section h2{font-family:var(--display);font-size:clamp(42px,4.3vw,70px);line-height:1.1;letter-spacing:-.035em}.muted-display{color:#6c7470;font-style:italic}.idea-intro>p{max-width:455px;font-size:15px;color:#525a57}.flow-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin:86px 0 0;padding:0}.flow-steps li{border-top:1px solid var(--rule);padding-top:24px}.step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.step-number{font-size:10px;color:var(--muted)}.key-combination{display:inline-flex;align-items:center;gap:0;white-space:nowrap}.key-combination>span{display:inline-flex;align-items:center}.key-plus{font-size:10px;padding:0 6px;color:var(--muted)}kbd{font-family:var(--body);display:inline-flex;justify-content:center;align-items:center;min-width:30px;height:29px;padding:0 8px;border:1px solid #bfc4bd;border-bottom-width:2px;border-radius:5px;font-size:12px;background:#f7f7f1;line-height:1}.flow-steps h3{font-size:21px;margin-bottom:10px;letter-spacing:-.02em}.flow-steps p{font-size:13px;max-width:310px;color:#59615d}.privacy-section{border-top:1px solid var(--rule);padding-top:72px;padding-bottom:90px}.privacy-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px}.privacy-grid>div{max-width:455px}.privacy-grid p{font-size:15px;color:#525a57}.ink-link{display:inline-flex;min-height:44px;align-items:center;gap:34px;font-size:12px;border-bottom:1px solid currentColor;margin-top:22px}.ink-link:hover{color:var(--accent)}.guide-invitation{padding-top:60px;padding-bottom:64px;background:#e2e6de;display:flex;justify-content:space-between;align-items:center;gap:60px;border-top:1px solid var(--rule)}.guide-invitation h2{font-family:var(--display);font-size:clamp(30px,3vw,45px);letter-spacing:-.03em;margin:14px 0}.guide-invitation p:not(.eyebrow){font-size:13px;color:#59615d}.round-link{display:flex;align-items:center;gap:36px;flex-shrink:0;font-size:12px}.circle-arrow{width:64px;height:64px;border-radius:50%;border:1px solid #8c9890;display:flex;align-items:center;justify-content:center;font-size:25px;transition:background .18s,color .18s}.round-link:hover .circle-arrow{background:var(--ink);color:var(--paper)}
.site-footer{padding:48px var(--gutter) 28px;background:var(--night);color:#c5cdcf;display:grid;grid-template-columns:1fr 1fr auto;gap:20px 36px;align-items:center}.footer-brand{font-size:25px;color:var(--snow);letter-spacing:-1px}.site-footer p{font-size:11px}.site-footer nav{display:flex;gap:28px;font-size:11px}.site-footer nav a{min-height:44px;display:flex;align-items:center;gap:8px}.site-footer nav a:hover{color:white}.copyright{grid-column:1/-1;border-top:1px solid #ffffff20;padding-top:20px;margin-top:12px;font-size:9px;color:#88979e;letter-spacing:.04em}
.guide-page{background:var(--paper)}.header-paper{position:relative;color:var(--ink);border-bottom:1px solid var(--rule)}.header-paper .main-nav a:hover{color:var(--accent)}.header-paper .language-switch{border-color:var(--rule)}.header-paper .language-switch a{color:#626966}.header-paper .language-switch a:hover{background:#dee4dc;color:#202524}.header-paper .language-switch a[aria-current]{color:var(--ink)}.header-paper .language-switch a[aria-current]:after{background:var(--accent)}.guide-heading{padding-top:100px;padding-bottom:76px}.guide-heading .eyebrow{color:var(--muted)}.guide-heading h1{font-family:var(--display);font-size:clamp(48px,6vw,86px);letter-spacing:-.045em;margin:23px 0;line-height:1.13}.guide-heading>p:not(.eyebrow){font-size:16px;color:#626966}.guide-layout{display:grid;grid-template-columns:280px minmax(0,var(--reading));justify-content:space-between;gap:80px;padding-bottom:90px}.guide-sidebar{align-self:start;position:sticky;top:32px;border-top:1px solid var(--rule);padding-top:24px}.guide-sidebar .eyebrow{color:var(--muted);margin-bottom:20px}.guide-sidebar nav{display:flex;flex-direction:column}.guide-sidebar nav a{display:flex;min-height:46px;gap:18px;align-items:center;font-size:13px}.guide-sidebar nav a span{font-size:9px;color:#6a756e}.guide-sidebar nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:5px}.guide-requirement{font-size:10px;line-height:1.8;color:var(--muted);display:block;margin-top:40px;max-width:210px}.guide-section{border-top:1px solid var(--rule);padding:28px 0 64px;scroll-margin-top:10px}.section-index{font-size:10px;color:var(--accent);letter-spacing:.1em}.guide-section h2{font-family:var(--display);font-size:37px;line-height:1.25;letter-spacing:-.02em;margin:18px 0 28px}.guide-section p{font-size:15px;color:#525a57}.guide-section h3{font-size:19px;margin:28px 0 14px;line-height:1.6}.instruction-steps{list-style:none;padding:0;margin:40px 0}.instruction-steps li{padding:20px 0;border-top:1px solid #d7d8d1}.instruction-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}.instruction-title h3{margin:0;font-size:19px}.instruction-title h3 span{color:#63716b;margin-right:8px;font-size:13px}.note{border-left:2px solid #7198a5;background:#e4e9e4;padding:22px 28px}.note h3{margin:0 0 8px;font-size:17px}.note p{font-size:14px}.keyboard-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}.keyboard-table th{font-size:10px;color:var(--muted);font-weight:400;padding-bottom:15px;text-transform:uppercase;letter-spacing:.1em}.keyboard-table td{border-top:1px solid #d7d8d1;padding:16px 0;line-height:1.6}.keyboard-table td:last-child{width:200px;padding-left:20px}.keyboard-table kbd{font-size:11px}.guide-section .small-note{font-size:12px;margin-top:20px}.settings-language-list{display:flex;flex-wrap:wrap;gap:10px 20px;border-top:1px solid #d7d8d1;margin-top:30px;padding-top:24px;color:#626966;font-size:12px}.faq details{border-top:1px solid var(--rule)}.faq details:last-child{border-bottom:1px solid var(--rule)}.faq summary{cursor:pointer;list-style:none;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:74px;padding:18px 0;line-height:1.6}.faq summary::-webkit-details-marker{display:none}.faq summary:hover{color:var(--accent)}.faq-plus{font-size:24px;font-weight:300;flex-shrink:0}.faq details[open] .faq-plus{transform:rotate(45deg)}.faq details p{padding:0 32px 26px 0;font-size:14px}.help-block{margin-top:48px}.button-dark{background:var(--ink);color:var(--paper);margin-top:22px}.button-dark:hover{background:var(--accent)}
.locale-ja{line-break:strict;word-break:normal}.locale-ja .hero h1{font-size:clamp(45px,4.4vw,70px);line-height:1.35;letter-spacing:-.055em}.locale-ja .hero-emphasis,.locale-zh .hero-emphasis,.locale-ja .muted-display,.locale-zh .muted-display{font-style:normal}.locale-ja .hero-intro{max-width:350px;line-height:2}.locale-ja .idea h2,.locale-ja .privacy-section h2{font-size:clamp(32px,3.5vw,56px);line-height:1.45}.locale-ja .eyebrow{letter-spacing:.12em;text-transform:none}.locale-ja .hero h1 .display-line,.locale-zh .hero h1 .display-line{white-space:nowrap}.locale-ja .guide-heading h1{font-size:clamp(39px,5.2vw,74px)}.locale-ja .guide-section h2{font-size:31px}.locale-ja .guide-invitation h2{font-size:32px}.locale-zh .hero h1{font-size:clamp(45px,4.6vw,76px);line-height:1.3}.locale-es .hero h1{font-size:clamp(56px,5.8vw,96px)}.locale-pt .hero h1{font-size:clamp(54px,5.4vw,90px)}
@media(min-width:1600px){.hero-copy{bottom:16%}.hero-intro{font-size:16px}.hero-actions{margin-top:32px}.hero-art img{object-position:center}}
@media(max-width:1000px){.hero{min-height:760px}.hero-art img{object-position:58% center}.hero-copy{bottom:15%}.idea-intro,.privacy-grid{gap:55px}.flow-steps{gap:28px}.guide-layout{grid-template-columns:220px minmax(0,1fr);gap:45px}.guide-sidebar nav a{font-size:12px}.guide-invitation{gap:28px}.site-footer{grid-template-columns:1fr auto}.site-footer>p{grid-column:1}.site-footer nav{grid-row:1/3;grid-column:2}.main-nav{margin-left:auto}.site-header{gap:20px}.language-switch{padding-left:16px}}
@media(max-width:700px){.site-header{padding:14px var(--gutter);min-height:116px;flex-wrap:wrap;gap:2px 16px}.brand{font-size:19px;flex:1}.brand img{width:24px;height:24px}.main-nav{font-size:12px}.language-switch{padding:0;border:0;width:100%;justify-content:flex-end;margin-top:-1px;gap:0}.language-switch a{min-height:44px;min-width:44px;font-size:9px}.hero{height:100svh;min-height:780px;max-height:1040px}.hero-art{top:105px;bottom:220px;left:-140px;right:-90px}.hero-art img{object-fit:contain;object-position:65% top}.hero-shade{background:linear-gradient(0deg,#080d11 0%,#080d11f0 25%,#080d1180 45%,transparent 64%)}.hero-copy{bottom:108px;right:var(--gutter);max-width:480px}.hero-copy .eyebrow{font-size:8px;margin-bottom:18px}.hero h1{font-size:59px;line-height:1.03}.hero-intro{font-size:13px;margin-top:22px;max-width:310px}.hero-actions{margin-top:23px;gap:24px}.hero-bottom{bottom:20px;gap:12px}.hero-bottom .art-number{display:none}.art-caption{font-size:8px;letter-spacing:.045em}.scroll-link{font-size:8px;gap:12px}.compatibility{font-size:9px}.button{font-size:11px;gap:22px;min-height:48px}.text-link{font-size:11px}.idea{padding-top:68px;padding-bottom:56px}.section-label{margin-bottom:32px}.idea-intro,.privacy-grid{grid-template-columns:1fr;gap:27px}.idea h2,.privacy-section h2{font-size:44px}.idea-intro>p,.privacy-grid p{font-size:14px;max-width:500px}.flow-steps{grid-template-columns:1fr;gap:30px;margin-top:48px}.flow-steps li{position:relative;padding-top:20px;padding-right:80px}.step-top{margin-bottom:12px}.step-top .key-combination{position:absolute;right:0;top:21px}.flow-steps h3{font-size:20px}.flow-steps p{max-width:400px}.privacy-section{padding-top:48px;padding-bottom:56px}.guide-invitation{padding-top:42px;padding-bottom:42px;flex-direction:column;align-items:flex-start;gap:26px}.round-link{width:100%;justify-content:space-between}.circle-arrow{width:52px;height:52px}.site-footer{padding-top:36px;gap:12px 16px}.site-footer nav{gap:18px}.site-footer>p{font-size:10px;max-width:170px}.footer-brand{font-size:23px}.guide-heading{padding-top:56px;padding-bottom:44px}.guide-heading h1{font-size:48px}.guide-heading>p:not(.eyebrow){font-size:14px}.guide-layout{display:block;padding-bottom:30px}.guide-sidebar{position:static;margin-bottom:42px;padding-top:20px}.guide-sidebar nav{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.guide-sidebar nav a{font-size:11px;gap:8px}.guide-sidebar .eyebrow{margin-bottom:10px}.guide-requirement{max-width:none;margin-top:20px}.guide-section{padding-top:24px;padding-bottom:44px}.guide-section h2{font-size:32px}.guide-section p{font-size:14px}.instruction-title{align-items:flex-start;gap:12px}.instruction-title h3{font-size:17px}.instruction-title kbd{font-size:10px;padding:0 5px;min-width:25px}.note{padding:19px 20px}.keyboard-table{font-size:12px}.keyboard-table td:last-child{width:145px;padding-left:12px}.keyboard-table kbd{font-size:9px;padding:0 5px;min-width:26px}.keyboard-table .key-plus{padding:0 4px}.faq summary{font-size:14px}.locale-ja .hero h1{font-size:clamp(34px,9.3vw,52px);line-height:1.4}.locale-ja .hero-intro{font-size:13px;max-width:300px}.locale-ja .idea h2,.locale-ja .privacy-section h2{font-size:33px;line-height:1.5}.locale-ja .guide-section h2{font-size:27px}.locale-ja .guide-invitation h2{font-size:28px}.locale-zh .hero h1{font-size:clamp(37px,9.7vw,55px)}.locale-es .hero h1{font-size:clamp(45px,12.2vw,68px)}.locale-pt .hero h1{font-size:clamp(40px,10.8vw,61px)}}
@media(max-width:360px){.hero{min-height:750px}.hero h1{font-size:50px}.hero-copy{bottom:96px}.hero-actions{gap:16px}.button{padding-left:14px;padding-right:14px}.site-header{gap:0 10px}.language-switch a{min-width:44px}.site-footer{display:flex;flex-wrap:wrap}.site-footer p{max-width:none;width:100%}.site-footer nav{width:100%}.copyright{width:100%}.keyboard-table td:last-child{width:135px}.locale-ja .hero h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}