:root { color-scheme: light; --ink:#252521; --soft:#6e6c66; --paper:#f7f5f1; --line:#ddd9d1; --accent:#82775e; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; }
button,select { font:inherit; }
button:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.wrap { width:min(1180px, calc(100% - 88px)); margin-inline:auto; }
.site-header { height:80px; border-bottom:1px solid #e5e1d9; }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand,.site-footer>span:first-child { font-size:18px; letter-spacing:.22em; font-weight:600; white-space:nowrap; }
.brand span { font-weight:300; }
.header-label,.eyebrow,.field-label,.card-label,.card-top,.hero-art-caption,.site-footer { font-size:10px; font-weight:700; letter-spacing:.18em; }
.header-label { color:#77726a; }
.header-nav { display:flex; gap:25px; align-items:center; }
.header-nav a { color:#67635c; text-decoration:none; font-size:13px; }
.header-nav a:hover { color:#252521; text-decoration:underline; text-underline-offset:5px; }
.language-nav { display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.08em; white-space:nowrap; }
.language-nav a { color:#67635c; text-decoration:none; }
.language-nav a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.language-nav [aria-current="page"] { color:var(--ink); font-weight:700; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:580px; align-items:center; gap:60px; padding-block:60px 76px; }
.hero-copy { max-width:540px; }
.eyebrow { display:flex; align-items:center; gap:13px; color:var(--accent); }
.eyebrow-line { width:27px; height:1px; background:var(--accent); }
.eyebrow.small { display:block; font-size:10px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
h1 { font-size:clamp(56px,6vw,87px); line-height:1.04; letter-spacing:-.065em; margin:31px 0 24px; }
h1 em { font-weight:400; }
.hero-copy p { max-width:460px; color:#615e58; line-height:1.8; font-size:16px; margin-bottom:34px; }
.primary-link { display:inline-flex; align-items:center; gap:40px; background:var(--ink); color:#fff; text-decoration:none; padding:18px 23px; font-size:12px; letter-spacing:.05em; transition:background .2s, transform .2s; }
.primary-link:hover { background:#585143; transform:translateY(-2px); }
.primary-link span { font-size:18px; line-height:10px; }
.hero-art { position:relative; height:440px; display:grid; place-items:center; background:radial-gradient(circle at 50% 43%,#f1efe9 0%,#e9e5dd 64%,#ded9d0 100%); overflow:hidden; }
.hero-diamond { display:block; width:min(84%,370px); height:auto; filter:drop-shadow(0 18px 17px rgba(54,60,65,.12)); }
.hero-art-caption { position:absolute; bottom:24px; left:27px; line-height:1.6; color:#817d75; }
.compare-section { background:#fff; padding:88px 0 80px; scroll-margin-top:20px; }
.section-intro { display:flex; align-items:end; justify-content:space-between; gap:50px; padding-bottom:43px; border-bottom:1px solid var(--line); }
.section-intro h2 { font-size:clamp(42px,4vw,61px); letter-spacing:-.05em; line-height:1.1; margin:19px 0 0; }
.section-intro p { max-width:340px; margin-bottom:4px; font-size:14px; line-height:1.7; color:var(--soft); }
.controls { display:flex; justify-content:space-between; align-items:end; gap:35px; margin:37px 0 27px; }
.control-group { min-width:0; }
.field-label { display:block; color:#68645c; margin-bottom:15px; }
.size-options { display:flex; flex-wrap:wrap; gap:7px; }
.size-button { border:1px solid #ddd9d1; padding:11px 12px; min-height:42px; min-width:55px; background:#fff; color:#4d4a44; font-size:12px; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.size-button:hover { border-color:#837a69; }
.size-button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.compare-control { flex:0 0 170px; }
.select-shell { position:relative; }
.select-shell select { appearance:none; width:100%; height:43px; border:1px solid #b6b0a6; border-radius:0; background:#fff; padding:0 36px 0 12px; color:var(--ink); cursor:pointer; }
.select-shell span { position:absolute; right:15px; top:8px; font-size:22px; pointer-events:none; }
.visual-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.visual-card { min-width:0; background:#f7f6f3; padding:25px 27px 28px; }
.card-top { color:#817b71; display:flex; justify-content:space-between; align-items:center; }
.card-mark { color:#b6afa1; font-size:17px; }
.ring-stage { height:295px; display:flex; align-items:center; justify-content:center; }
.ring-stage svg { width:min(100%,470px); height:auto; display:block; overflow:visible; }
.card-bottom { border-top:1px solid #dedbd5; padding-top:23px; display:flex; justify-content:space-between; align-items:end; gap:10px; }
.card-label { color:#817b71; font-size:9px; }
.card-bottom h3 { font-family:Georgia,'Times New Roman',serif; font-size:35px; font-weight:400; letter-spacing:-.04em; margin:8px 0 0; }
.card-bottom p { margin:0 0 3px; white-space:nowrap; font-size:14px; color:#5c5953; }
.reading-bar { border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:35px; min-height:70px; }
.reading-bar p { margin:0; font-size:13px; color:#555149; text-align:right; line-height:1.5; }
.band-key { font-size:12px; color:#555149; display:flex; align-items:center; gap:10px; }
.band-swatch { width:30px; height:9px; background:linear-gradient(#f9fafa,#a8a9a7 45%,#e8e9e6); border:1px solid #babbb8; flex:none; }
.scale-note { font-size:12px; color:#77736c; line-height:1.65; margin:20px 0 0; }
.scale-note strong { color:#514d46; font-weight:600; }
.try-section { padding:92px 0 105px; scroll-margin-top:12px; background:#eeece7; }
.try-intro { border-color:#d5d0c7; margin-bottom:32px; }
.try-layout { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(300px, .75fr); align-items:stretch; gap:32px; }
.try-camera { position:relative; width:100%; aspect-ratio:1.23; min-height:370px; overflow:hidden; background:#d9d6cf; isolation:isolate; }
.try-camera video,.try-camera #try-still { display:block; width:100%; height:100%; object-fit:cover; }
.try-camera video.mirrored { transform:scaleX(-1); }
.camera-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:20px; color:#676157; background:radial-gradient(circle at 50% 45%,#f5f3ee,#e4e0d8); }
.camera-empty span { font-family:Georgia,serif; font-size:86px; line-height:1; color:#a59b89; }
.camera-empty p { margin:0; font-size:16px; }
.try-ring { position:absolute; z-index:2; cursor:grab; touch-action:none; user-select:none; filter:drop-shadow(0 4px 3px #1d222450); transform-origin:center; }
.try-ring:active { cursor:grabbing; }
.try-ring svg { display:block; width:100%; height:auto; pointer-events:none; }
.camera-hint { position:absolute; z-index:1; bottom:16px; left:16px; padding:9px 13px; background:#ffffffdd; color:#33312e; font-size:13px; }
.try-panel { background:#fff; padding:31px 30px; display:flex; flex-direction:column; }
.try-panel-head { padding-bottom:25px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.try-panel-head h3 { font:400 48px/1 Georgia,'Times New Roman',serif; letter-spacing:-.05em; margin:20px 0 9px; }
.try-panel-head p { color:#655f57; font-size:14px; margin:0; }
.try-field,.try-adjust label { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:#4a4742; margin-bottom:10px; }
.try-panel .select-shell { margin-bottom:22px; }
.try-panel .select-shell select { height:48px; font-size:14px; }
.try-actions { display:flex; flex-wrap:wrap; gap:8px; }
.try-actions button { min-height:44px; border:1px solid #393832; padding:10px 14px; cursor:pointer; font-size:13px; }
.try-actions button:disabled { cursor:wait; opacity:.65; }
.try-primary { background:#252521; color:#fff; }
.try-secondary { background:#fff; color:#252521; }
.try-actions button:hover:not(:disabled) { box-shadow:inset 0 0 0 1px currentColor; }
.camera-status { min-height:2.7em; font-size:13px; line-height:1.5; margin:14px 0 0; color:#676159; }
.try-adjust { padding-top:13px; }
.try-adjust label { margin:13px 0 7px; }
.try-adjust label span { color:#77716a; }
.try-adjust input { width:100%; accent-color:#393832; cursor:pointer; }
.try-disclaimer { color:#716c65; font-size:12px; line-height:1.6; margin:auto 0 0; padding-top:26px; }
.guide-note { display:grid; grid-template-columns:90px 1fr 1fr; align-items:center; gap:38px; padding-block:100px; }
.note-icon { font-size:66px; color:#9c927f; font-family:Georgia,serif; }
.guide-note h2 { max-width:400px; font-size:38px; line-height:1.16; letter-spacing:-.04em; margin:18px 0 0; }
.guide-note p { max-width:460px; font-size:14px; line-height:1.85; color:#68645e; margin:0; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-block:30px; color:#79746b; }
.site-footer>span:first-child { font-size:13px; color:var(--ink); }
@media (max-width:900px) {
  .wrap { width:min(100% - 48px,760px); }
  .hero { gap:30px; min-height:520px; }
  .hero-art { height:380px; }
  .hero-diamond { width:min(82%,310px); }
  .controls { align-items:stretch; flex-direction:column; gap:22px; }
  .compare-control { flex:auto; max-width:220px; }
  .guide-note { grid-template-columns:55px 1fr; }
  .guide-note p { grid-column:2; }
  .try-layout { grid-template-columns:1fr; }
  .try-camera { max-height:530px; }
}
@media (max-width:640px) {
  .wrap { width:calc(100% - 36px); }
  .site-header { height:65px; }
  .brand { font-size:15px; }
  .header-label { font-size:8px; }
  .header-nav { gap:12px; }
  .language-nav { gap:7px; font-size:11px; }
  .header-nav a { font-size:12px; }
  .header-nav a:first-child { display:none; }
  .hero { display:flex; flex-direction:column; align-items:stretch; padding-block:63px 48px; gap:45px; }
  h1 { font-size:clamp(54px,14vw,72px); margin:27px 0 20px; }
  .hero-copy p { font-size:15px; }
  .hero-art { height:310px; }
  .hero-diamond { width:min(73%,260px); }
  .hero-art-caption { font-size:8px; bottom:16px; left:17px; }
  .compare-section { padding:65px 0; }
  .section-intro { display:block; padding-bottom:28px; }
  .section-intro h2 { font-size:44px; }
  .section-intro p { margin:17px 0 0; }
  .controls { margin:30px 0 24px; }
  .size-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .size-button { padding:10px 5px; }
  .compare-control { max-width:none; }
  .visual-pair { grid-template-columns:1fr; gap:12px; }
  .visual-card { padding:20px 20px 23px; }
  .ring-stage { height:245px; }
  .card-bottom h3 { font-size:31px; }
  .reading-bar { display:block; padding-block:22px; }
  .reading-bar p { text-align:left; margin-top:15px; }
  .guide-note { grid-template-columns:1fr; gap:14px; padding-block:70px; }
  .note-icon { font-size:48px; line-height:1; }
  .guide-note h2 { font-size:36px; }
  .guide-note p { grid-column:1; }
  .site-footer { font-size:8px; }
  .try-section { padding:64px 0 70px; }
  .try-intro { margin-bottom:25px; }
  .try-layout { gap:12px; }
  .try-camera { aspect-ratio:4/5; min-height:0; max-height:none; }
  .try-panel { padding:26px 20px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .primary-link { transition:none; } }