:root { color-scheme: light; --bg: #fdfbfc; --surface: #fff; --surface-soft: #f5f2f4; --surface-accent: #f7ebef; --text: #292428; --muted: #6e646a; --subtle: #796d73; --line: #e6dfe3; --brand: #9f2945; --brand-hover: #81223a; --accent-text: #8e2440; --stage: #f1f3f4; --shadow: 0 18px 55px rgba(66, 43, 54, .08); --header: rgba(253,251,252,.92); --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --ease: cubic-bezier(.2,.7,.2,1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg:#1a171a; --surface:#262126; --surface-soft:#302a2f; --surface-accent:#38282e; --text:#f5eff2; --muted:#c4b8be; --subtle:#b5a7ae; --line:#493d43; --brand:#df8299; --brand-hover:#f1a0b3; --accent-text:#f1a2b5; --stage:#f1f3f4; --shadow:0 20px 60px rgba(0,0,0,.22); --header:rgba(26,23,26,.94); } } :root[data-theme="dark"] { color-scheme: dark; --bg:#1a171a; --surface:#262126; --surface-soft:#302a2f; --surface-accent:#38282e; --text:#f5eff2; --muted:#c4b8be; --subtle:#b5a7ae; --line:#493d43; --brand:#df8299; --brand-hover:#f1a0b3; --accent-text:#f1a2b5; --stage:#f1f3f4; --shadow:0 20px 60px rgba(0,0,0,.22); --header:rgba(26,23,26,.94); } *,*::before,*::after { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:94px; scrollbar-gutter:stable; } body { margin:0; background:var(--bg); color:var(--text); font:15px/1.75 var(--font); -webkit-font-smoothing:antialiased; } body.dialog-open { overflow:hidden; } button,input { font:inherit; } button { color:inherit; cursor:pointer; } a { color:inherit; text-decoration:none; } button,a { -webkit-tap-highlight-color:transparent; } a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid var(--brand); outline-offset:4px; } img { display:block; max-width:100%; } h1,h2,h3,p { margin:0; } button { -webkit-appearance:none; appearance:none; } [hidden] { display:none !important; } .container { width:min(1200px,calc(100% - 88px)); margin-inline:auto; } .icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; } .skip-link { position:fixed; top:10px; left:10px; z-index:100; padding:8px 14px; background:var(--surface); transform:translateY(-160%); } .skip-link:focus { transform:none; } .site-header { position:sticky; top:0; z-index:20; background:var(--header); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } .header-inner { min-height:76px; display:flex; align-items:center; gap:24px; } .brand { display:inline-flex; align-items:center; gap:10px; flex:none; } .brand-name { color:var(--brand); font:700 28px/1.1 "Songti SC","STSong","SimSun",serif; letter-spacing:3px; } .brand-caption { margin-left:5px; padding-left:17px; border-left:1px solid var(--line); color:var(--subtle); font:600 10px/1.5 var(--font); letter-spacing:.15em; } .desktop-nav { display:flex; gap:35px; align-items:center; margin-left:auto; } .desktop-nav a { padding:10px 0; font-size:13px; font-weight:500; color:var(--muted); transition:color .2s; } .desktop-nav a:hover { color:var(--accent-text); } .header-actions { display:flex; gap:9px; align-items:center; margin-left:25px; } .button,.icon-button,.tool-button { display:inline-flex; align-items:center; justify-content:center; border:0; } .button { min-height:54px; padding:0 24px; gap:22px; border-radius:9px; font-size:14px; font-weight:650; white-space:nowrap; transition:transform .2s var(--ease),background-color .2s,color .2s,box-shadow .2s; } .button:hover { transform:translateY(-2px); box-shadow:0 9px 22px rgba(107,33,53,.18); } .button:active { transform:translateY(0); } .button-primary { background:#9f2945; color:#fff; } .button-primary:hover { background:#81223a; } .button-small { min-height:42px; padding-inline:17px; gap:12px; font-size:13px; } .button-small .icon { width:17px; height:17px; } .icon-button,.tool-button { width:44px; height:44px; padding:0; border-radius:9px; background:transparent; color:var(--muted); transition:background-color .2s,color .2s,transform .2s; } .icon-button:hover,.tool-button:hover { background:var(--surface-soft); color:var(--accent-text); } .theme-sun,.menu-close-icon { display:none; } :root[data-theme="dark"] .theme-moon { display:none; } :root[data-theme="dark"] .theme-sun { display:block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-moon { display:none; } :root:not([data-theme="light"]) .theme-sun { display:block; } } .menu-toggle,.mobile-nav { display:none; } .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,7vw,100px); align-items:center; padding-block:48px 64px; } .hero-copy { padding-bottom:16px; } .eyebrow,.section-label { font-size:11px; font-weight:700; letter-spacing:.13em; color:var(--accent-text); } .eyebrow { margin-bottom:24px; } h1 { font-size:clamp(43px,4.9vw,64px); line-height:1.3; letter-spacing:-.045em; font-weight:760; margin-bottom:25px; } h1 em { color:var(--brand); font-style:normal; } .hero-description { color:var(--muted); font-size:16px; line-height:1.95; margin-bottom:31px; } .hero-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; } .text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:3px 0; border:0; background:transparent; border-bottom:1px solid var(--line); color:var(--text); font-size:13px; font-weight:600; transition:color .2s,border-color .2s; } .text-link:hover { color:var(--accent-text); border-color:var(--brand); } .text-link .icon { width:17px; height:17px; transition:transform .2s var(--ease); } .text-link:hover .icon { transform:translateX(4px); } .studio { max-width:540px; min-width:0; width:100%; justify-self:end; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; scroll-margin-top:100px; } .studio-header { min-height:69px; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .studio-kicker { color:var(--subtle); font-size:9px; letter-spacing:.14em; font-weight:700; line-height:1.3; } .studio-header h2 { margin-top:3px; font-size:16px; line-height:1.3; font-weight:700; } .studio-badge { flex:none; padding:5px 9px; border-radius:5px; color:var(--accent-text); background:var(--surface-accent); font-size:11px; font-weight:600; } .ear-stage { position:relative; isolation:isolate; height:clamp(280px,27vw,340px); overflow:hidden; display:grid; place-items:center; background:var(--stage); } .stage-image { height:100%; width:auto; max-width:82%; aspect-ratio:4/5; position:relative; } .ear-art { position:absolute; inset:0; transition:transform .38s var(--ease); } .ear-art.is-mirrored { transform:scaleX(-1); } .ear-base { width:100%; height:100%; object-fit:cover; } .jewelry-layer { position:absolute; inset:0; transition:opacity .2s ease; } .jewelry-layer.is-hidden { opacity:0; pointer-events:none; } .jewel { position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); width:calc(var(--piece-width) * 1%); min-width:12px; padding:0; border:0; background:transparent; touch-action:none; cursor:grab; transform:translate(calc(-50% + var(--drag-x,0px)),calc(-50% + var(--drag-y,0px))) rotate(var(--angle)) scale(var(--scale)); transition:filter .18s; } .jewel::after { content:""; position:absolute; left:50%; top:50%; width:max(44px,130%); height:max(44px,130%); transform:translate(-50%,-50%); border:1px solid transparent; border-radius:50%; } .jewel:hover::after,.jewel.is-selected::after,.jewel:focus-visible::after { border-color:rgba(159,41,69,.72); } .jewel.is-selected { z-index:2; } .jewel.is-dragging { cursor:grabbing; z-index:3; filter:drop-shadow(0 4px 4px #392b2d55); } .jewel img { width:100%; height:auto; pointer-events:none; filter:drop-shadow(1px 2px 1px #332d3550); } .jewel:focus-visible { outline:none; } .stage-tools { position:absolute; display:flex; right:14px; bottom:14px; gap:5px; } .tool-button { width:40px; height:40px; border:1px solid #d7d3d6; background:rgba(255,255,255,.94); color:#51494d; box-shadow:0 2px 7px #2820200a; } .tool-button:hover { background:#fff; color:#9f2945; } .tool-button[aria-pressed="true"] { background:#9f2945; border-color:#9f2945; color:#fff; } .tool-button .icon { width:19px; height:19px; } .image-error { position:absolute; inset:0; display:grid; place-items:center; padding:30px; text-align:center; background:var(--surface-soft); color:var(--muted); font-size:13px; } .studio-controls { padding:15px 18px 14px; } .style-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; border-radius:9px; background:var(--surface-soft); } .style-choice { min-height:40px; padding:6px 5px; display:flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; transition:background-color .2s,color .2s,box-shadow .2s; } .style-choice:hover { color:var(--accent-text); } .style-choice.is-active { color:var(--accent-text); background:var(--surface); box-shadow:0 1px 5px #2a1d2514; } .swatch { width:10px; height:10px; border-radius:50%; border:1px solid #b5aeb1; flex:none; } .swatch-silver { background:linear-gradient(130deg,#f5f6f7,#a8adb4,#edf0f3); } .swatch-pearl { background:#efe5d8; border-color:#d2c6b5; } .swatch-bold { background:#60545f; border-color:#60545f; } .adjust-toggle { display:flex; align-items:center; gap:6px; min-height:40px; padding:0; border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:600; } .adjust-toggle:hover { color:var(--accent-text); } .adjust-toggle .icon { width:16px; height:16px; } .adjust-toggle .adjust-chevron { transition:transform .2s; } .adjust-toggle[aria-expanded="true"] .adjust-chevron { transform:rotate(180deg); } .adjust-panel { padding:0 0 4px; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; } .adjust-panel p { grid-column:1/-1; font-size:12px; color:var(--muted); } .piece-picker { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .piece-picker button { min-height:44px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--muted); font-size:12px; font-weight:600; } .piece-picker button:hover,.piece-picker button[aria-pressed="true"] { border-color:var(--brand); background:var(--surface-accent); color:var(--accent-text); } .adjust-panel label { display:grid; gap:7px; color:var(--muted); font-size:12px; } .adjust-panel label span { display:flex; justify-content:space-between; gap:8px; } .adjust-panel output { color:var(--accent-text); font-variant-numeric:tabular-nums; } .adjust-panel input { width:100%; margin:0; accent-color:#9f2945; cursor:pointer; } .demo-caption { min-height:21px; color:var(--subtle); font-size:11px; line-height:1.6; } .studio-note { color:var(--muted); font-size:11px; line-height:1.7; } .intro-line { border-block:1px solid var(--line); } .intro-line .container { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .intro-line p { color:var(--muted); font-size:15px; } .intro-line strong { color:var(--text); font-weight:650; } .intro-line .text-link { flex:none; color:var(--accent-text); } .section { padding-block:120px; } .section-top { max-width:690px; margin-bottom:50px; } .section-label { margin-bottom:18px; } .section h2,.collection-copy h2,.closing-inner h2 { font-size:clamp(34px,3.5vw,49px); letter-spacing:-.045em; line-height:1.3; font-weight:720; } .section-top > p:last-child,.collection-copy > p:not(.section-label),.faq-intro > p:last-child { color:var(--muted); margin-top:20px; font-size:15px; line-height:1.9; } .diy-features { display:grid; grid-template-columns:1.08fr 1fr; gap:24px; } .diy-feature { min-width:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); scroll-margin-top:100px; } .diy-media-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:24px 24px 18px; background:var(--surface-soft); } .diy-media-pair figure { min-width:0; margin:0; } .media-frame { display:block; width:100%; height:290px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#f4f4f4; cursor:zoom-in; } .media-frame img { width:100%; height:100%; object-fit:contain; transition:transform .28s var(--ease); } .media-frame:hover img { transform:scale(1.025); } .media-frame:active img { transform:scale(1); } .media-frame:focus-visible { outline-offset:3px; } .media-frame-ui { background:#fcfafb; } .media-frame:disabled { cursor:default; } .media-fallback { display:grid; place-items:center; height:100%; padding:18px; font-size:12px; line-height:1.8; color:#6e646a; } .diy-media-pair figcaption { margin-top:10px; font-size:12px; color:var(--muted); text-align:center; } .media-source-note { display:flex; align-items:center; flex-wrap:wrap; gap:5px 14px; margin-top:22px; color:var(--subtle); font-size:12px; } .media-source-note a { display:inline-flex; align-items:center; min-height:44px; gap:5px; color:var(--accent-text); border-bottom:1px solid var(--line); } .media-source-note .icon { width:15px; height:15px; } .diy-feature-copy { padding:30px 34px 27px; } .diy-feature h3 { font-size:25px; line-height:1.45; letter-spacing:-.025em; } .diy-feature-copy > p { margin-top:12px; color:var(--muted); font-size:14px; line-height:1.9; } .diy-flow { display:flex; flex-wrap:wrap; list-style:none; gap:8px 12px; padding:0; margin:23px 0 16px; color:var(--accent-text); font-size:12px; font-weight:650; } .diy-flow li:not(:last-child)::after { content:"→"; color:var(--subtle); margin-left:12px; } .diy-feature .text-link { color:var(--accent-text); } .collection-section { padding-block:120px; background:var(--surface-soft); } .collection-layout { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:100px; } .collection-copy ul { list-style:none; margin:25px 0 26px; padding:0; display:grid; gap:12px; color:var(--muted); font-size:13px; } .collection-copy li::before { content:"✓"; margin-right:12px; color:var(--brand); font-weight:700; } .collection-copy .text-link { color:var(--accent-text); } .app-preview { width:100%; max-width:350px; margin:0 auto; } .app-preview-frame { height:auto; aspect-ratio:388/688; border-radius:16px; box-shadow:var(--shadow); } .app-preview-frame img { height:auto; } .app-preview figcaption { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; color:var(--muted); font-size:11px; } .app-preview figcaption span { display:inline-flex; align-items:center; gap:5px; color:var(--accent-text); white-space:nowrap; } .app-preview figcaption .icon { width:15px; height:15px; } .faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; } .faq-list { border-top:1px solid var(--line); } .faq-list details { border-bottom:1px solid var(--line); } .faq-list summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; font-weight:650; font-size:14px; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary .icon { color:var(--subtle); transition:transform .2s; } .faq-list details[open] summary .icon { transform:rotate(180deg); } .faq-list details > p { max-width:60ch; color:var(--muted); font-size:13px; line-height:1.9; padding:0 30px 23px 0; } .closing-section { padding-bottom:50px; } .closing-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:52px 56px; border-radius:16px; background:var(--surface-accent); } .closing-inner .section-label { margin-bottom:14px; } .closing-inner h2 { font-size:clamp(30px,3vw,42px); } .closing-inner > div > p:last-child { color:var(--muted); margin-top:11px; font-size:14px; } .site-footer { min-height:100px; display:flex; align-items:center; gap:22px; border-top:1px solid var(--line); } .footer-brand .brand-name { font-size:23px; } .site-footer > p,.site-footer > span { font-size:12px; color:var(--subtle); } .site-footer > span { margin-left:auto; } .back-top { width:44px; height:44px; display:grid; place-items:center; border-radius:9px; color:var(--muted); } .back-top:hover { background:var(--surface-soft); color:var(--brand); } dialog { width:min(450px,calc(100% - 36px)); max-height:calc(100dvh - 36px); overflow:auto; position:fixed; border:1px solid var(--line); border-radius:18px; padding:40px 32px 29px; background:var(--surface); color:var(--text); text-align:center; box-shadow:0 28px 90px #1b10165c; } dialog::backdrop { background:#221820a6; } dialog[open] { animation:dialog-in .24s var(--ease) both; } @keyframes dialog-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } } .dialog-close { position:absolute; top:11px; right:11px; } .dialog-logo { margin:0 auto 22px; } dialog .section-label { margin-bottom:12px; } dialog h2 { font-size:29px; line-height:1.4; letter-spacing:-.04em; } #wechat-description { color:var(--muted); margin:17px 0 23px; font-size:14px; } .copy-feedback { min-height:22px; color:var(--subtle); margin-top:14px; font-size:12px; } .media-dialog { width:min(700px,calc(100% - 32px)); padding:25px 25px 20px; } .media-dialog h2 { margin:0 30px 18px; font-size:19px; line-height:1.5; } .media-dialog-image { min-height:160px; display:grid; place-items:center; } .media-dialog-image img { width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 200px); object-fit:contain; border-radius:8px; } .media-dialog-image p { padding:32px 16px; color:var(--muted); font-size:14px; } #media-description { margin-top:17px; font-size:11px; line-height:1.8; color:var(--muted); } @media (max-width:1000px) { .container { width:calc(100% - 64px); } .brand-caption { display:none; } .desktop-nav { gap:24px; } .header-actions { margin-left:8px; } .hero { gap:42px; } h1 { font-size:clamp(35px,4.9vw,49px); } .hero-description { font-size:15px; } .diy-media-pair { padding:18px 18px 15px; gap:12px; } .media-frame { height:250px; } .app-preview-frame { height:auto; } .diy-feature-copy { padding:26px; } .collection-layout,.faq-section { gap:55px; } } @media (max-width:740px) { html { scroll-padding-top:82px; } .container { width:calc(100% - 40px); } .header-inner { min-height:68px; gap:8px; } .brand > img { width:25px; height:30px; } .brand-name { font-size:26px; } .desktop-nav { display:none; } .header-actions { margin-left:auto; gap:2px; } .header-actions .button-small { padding-inline:12px; gap:5px; font-size:12px; } .theme-toggle,.menu-toggle { width:40px; height:42px; } .menu-toggle { display:inline-flex; } .menu-toggle[aria-expanded="true"] .menu-open-icon { display:none; } .menu-toggle[aria-expanded="true"] .menu-close-icon { display:block; } .mobile-nav { display:grid; padding:4px 20px 14px; background:var(--surface); border-top:1px solid var(--line); } .mobile-nav a { min-height:52px; display:flex; align-items:center; justify-content:space-between; color:var(--text); font-weight:600; font-size:14px; border-bottom:1px solid var(--line); } .mobile-nav a:last-child { border-bottom:0; } .mobile-nav a span { color:var(--brand); } .hero { grid-template-columns:1fr; gap:33px; padding-block:46px 50px; } .hero-copy { padding:0; } .eyebrow { margin-bottom:18px; } h1 { font-size:clamp(37px,10.6vw,58px); margin-bottom:19px; } .hero-description { font-size:14px; line-height:1.85; margin-bottom:23px; } .hero-actions { gap:18px; } .hero-actions .button { min-height:50px; padding-inline:19px; gap:12px; font-size:13px; } .hero-actions .text-link { font-size:12px; gap:7px; } .studio { max-width:500px; justify-self:center; } .studio-header { min-height:63px; padding:12px 16px; } .ear-stage { height:clamp(280px,79vw,360px); } .studio-controls { padding-inline:14px; } .intro-line .container { min-height:92px; flex-wrap:wrap; gap:0; padding-block:14px; } .intro-line p { font-size:13px; } .intro-line .text-link { min-height:36px; font-size:12px; } .section,.collection-section { padding-block:80px; } .section h2,.collection-copy h2 { font-size:clamp(32px,8vw,42px); } .section-top { margin-bottom:34px; } .section-top > p:last-child,.collection-copy > p:not(.section-label),.faq-intro > p:last-child { font-size:14px; } .diy-features { grid-template-columns:1fr; gap:24px; } .diy-media-pair { padding:18px 16px 15px; gap:12px; } .media-frame { height:clamp(190px,55vw,265px); } .diy-media-pair figcaption { font-size:11px; } .media-source-note { margin-top:17px; font-size:11px; } .diy-feature-copy { padding:25px 24px; } .diy-feature h3 { font-size:23px; } .diy-feature-copy > p { font-size:13px; } .collection-layout { grid-template-columns:1fr; gap:38px; } .app-preview { max-width:320px; } .app-preview-frame { height:auto; } .media-dialog { padding:27px 16px 20px; } .media-dialog h2 { margin-inline:26px; font-size:17px; } .faq-section { grid-template-columns:1fr; gap:30px; } .faq-list summary { min-height:64px; font-size:13px; } .closing-section { padding-bottom:40px; } .closing-inner { padding:35px 26px; display:grid; gap:25px; } .closing-inner .button { justify-self:start; } .site-footer { min-height:86px; gap:12px; } .site-footer > p { font-size:11px; } .site-footer > span { font-size:11px; } .back-top { width:38px; } } @media (max-width:360px) { .container { width:calc(100% - 30px); } .hero-actions { gap:10px; } .hero-actions .button { padding-inline:14px; } .hero-actions .text-link { font-size:11px; } .style-choice { font-size:11px; gap:4px; } .site-footer > p { display:none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } .studio-note a { display:inline-flex; align-items:center; gap:5px; min-height:44px; color:var(--accent-text); } .guide-list { border-top:1px solid var(--line); } .guide-row { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:27px 4px; border-bottom:1px solid var(--line); transition:color .2s,background-color .2s; } .guide-row h3 { font-size:20px; line-height:1.5; font-weight:650; letter-spacing:-.025em; } .guide-row p { margin-top:8px; color:var(--muted); font-size:14px; } .guide-row > .icon { flex:none; width:22px; height:22px; color:var(--accent-text); transition:transform .2s var(--ease); } .guide-row:hover { color:var(--accent-text); background:var(--surface-soft); } .guide-row:hover > .icon { transform:translate(3px,-3px); } .guides-all { margin-top:22px; } .footer-links { display:flex; flex-wrap:wrap; gap:10px 28px; padding-block:20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; } .footer-links a { min-height:44px; display:inline-flex; align-items:center; } .footer-links a:hover,.article-body a:hover { color:var(--accent-text); } .breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px; color:var(--muted); font-size:12px; margin:27px 0 38px; } .breadcrumbs a { min-height:44px; display:inline-flex; align-items:center; border-bottom:1px solid transparent; } .breadcrumbs a:hover { color:var(--accent-text); border-bottom-color:var(--line); } .breadcrumbs [aria-current] { color:var(--text); } .article-page { max-width:1180px; } .guide-article { max-width:780px; margin:0 auto 85px; } .article-header { padding-bottom:34px; border-bottom:1px solid var(--line); } .article-header h1 { font-size:clamp(30px,4vw,46px); line-height:1.4; letter-spacing:-.04em; margin-bottom:24px; } .article-lead { color:var(--muted); font-size:17px; line-height:1.95; } .article-meta { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:22px; color:var(--subtle); font-size:12px; } .article-body { font-size:16px; line-height:1.95; } .article-body section { margin-top:45px; } .article-body h2 { font-size:25px; line-height:1.55; letter-spacing:-.025em; margin-bottom:18px; } .article-body h3 { font-size:18px; margin-bottom:9px; line-height:1.65; } .article-body p + p { margin-top:16px; } .article-body p,.article-body li { color:var(--muted); } .article-body ol { padding-left:24px; } .article-body li { padding-left:5px; margin:9px 0; } .article-body .text-link { margin-top:13px; color:var(--accent-text); } .article-options { display:grid; gap:28px; } .article-options > div { padding-left:22px; border-left:2px solid var(--line); } .article-comparison { display:grid; grid-template-columns:1fr 1fr; gap:27px; } .article-comparison > div { padding:23px; border:1px solid var(--line); border-radius:12px; background:var(--surface); } .article-figure { margin:30px 0; } .article-figure-pair { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; padding:22px; border-radius:12px; background:var(--surface-soft); } .article-figure img { width:100%; max-height:420px; object-fit:contain; } .article-figure figcaption { grid-column:1/-1; color:var(--muted); font-size:12px; text-align:center; } .article-faq details { border-bottom:1px solid var(--line); } .article-faq summary { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:64px; padding-block:12px; cursor:pointer; list-style:none; font-weight:650; font-size:15px; } .article-faq summary::-webkit-details-marker { display:none; } .article-faq summary .icon { flex:none; width:18px; } .article-faq details[open] summary .icon { transform:rotate(180deg); } .article-faq details p { padding-bottom:22px; font-size:14px; } .article-cta { margin-top:48px; padding:30px; background:var(--surface-accent); border-radius:12px; } .article-cta h2 { font-size:24px; } .article-cta .button { margin-top:20px; } .related-guides { margin-bottom:85px; } .related-guides > h2 { font-size:26px; margin-bottom:24px; } .guide-index { max-width:940px; padding-bottom:95px; } .guide-index .article-header { border:0; max-width:760px; padding-bottom:28px; } .guide-index .guide-row { padding-block:32px; } .guide-index .control-help { margin-top:24px; color:var(--muted); font-size:13px; } .faq-list p a { color:var(--accent-text); text-decoration:underline; text-underline-offset:4px; } @media (max-width:740px) { .guide-row { gap:18px; padding-block:23px; } .guide-row h3 { font-size:18px; } .guide-row p { font-size:13px; } .breadcrumbs { margin:16px 0 27px; font-size:11px; gap:3px 8px; } .article-header h1 { font-size:30px; } .article-lead { font-size:15px; } .article-body { font-size:15px; } .article-body h2 { font-size:23px; } .article-body section { margin-top:36px; } .article-comparison { grid-template-columns:1fr; gap:14px; } .article-figure-pair { padding:15px; gap:13px; } .article-figure img { max-height:330px; } .article-cta { padding:26px 22px; } .guide-article { margin-bottom:60px; } .related-guides { margin-bottom:60px; } }