/* dotte.ai public homepage. Colours come from theme.css_vars() (--bg, --accent ...);
   the light "chapters" section uses the local --ivory / --ink tones below. */
:root { --ivory:#f6f1ee; --ivory-2:#efe7e2; --ink:#1b1615; --ink-2:#5b4a43; --hair:rgba(243,235,231,.09);
  --hair-ink:rgba(27,22,21,.10); --max:1240px; --ease:cubic-bezier(.2,.7,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#0d0a09; color:var(--text); font:16px/1.6 Geist, Inter, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.grow { flex:1; }
.mono { font-family:"Geist Mono", ui-monospace, monospace; }

/* ---------- type */
.two { margin:0; font-weight:600; letter-spacing:-.035em; line-height:1.04; }
.two .dim { color:#7d6b64; }
h1.two { font-size:clamp(44px, 7.2vw, 96px); max-width:15ch; margin:0 auto; }
h2.two { font-size:clamp(34px, 4.6vw, 62px); max-width:22ch; }
h3.two { font-size:clamp(24px, 2.4vw, 34px); letter-spacing:-.025em; line-height:1.15; max-width:30ch; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 28px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--hair); background:rgba(255,255,255,.03); color:var(--soft-text); font-size:14px; }
.eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.lead { max-width:620px; margin:28px auto 0; color:var(--soft-text); font-size:clamp(17px, 1.5vw, 20px); }
.note { margin:18px 0 0; color:var(--muted); font-size:14px; }

/* ---------- buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 20px;
  border-radius:999px; font-weight:600; font-size:15px; border:1px solid transparent; transition:transform .2s var(--ease), background .2s, box-shadow .2s; }
.btn svg { width:18px; height:18px; }
.btn.sm { min-height:38px; padding:0 16px; font-size:14px; }
.btn.lg { min-height:56px; padding:0 28px; font-size:16px; }
.btn.block { width:100%; }
.btn.primary { background:var(--accent); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 40px -8px rgba(var(--accent-rgb),.7); }
.btn.primary:hover { background:var(--accent-hover); transform:translateY(-1px); }
.btn.ghost { border-color:var(--hair); color:var(--text); background:rgba(255,255,255,.02); }
.btn.ghost:hover { background:rgba(255,255,255,.07); }

/* ---------- nav */
.nav { position:fixed; inset:0 0 auto 0; z-index:50; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
.nav.solid { background:rgba(13,10,9,.72); backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px); border-color:var(--hair); }
.nav-in { max-width:var(--max); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:22px; }
.mark { font-weight:700; font-size:21px; letter-spacing:-.04em; }
.mark i { color:var(--accent); font-style:normal; }
.mark.sm { font-size:17px; }
.links { display:flex; gap:24px; font-size:14px; color:var(--muted); }
.links a:hover { color:var(--text); }
.lang { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; }
.lang svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
.lang select { font:inherit; color:var(--text); background:transparent; border:0; cursor:pointer; padding:6px 0;
  -webkit-appearance:none; appearance:none; border-radius:0; }   /* Safari/iOS otherwise draws a white native box */
.lang select option { color:#111; }
.lang::after { content:""; width:6px; height:6px; margin:-4px 2px 0 -2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); pointer-events:none; }

/* ---------- hero */
.hero { position:relative; padding:150px 24px 40px; text-align:center; isolation:isolate; }
.hero-glow { position:absolute; inset:-10% 0 auto 0; height:900px; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 45% at 50% 30%, rgba(var(--accent-rgb),.28), transparent 70%),
             radial-gradient(30% 30% at 20% 10%, rgba(242,165,65,.10), transparent 70%); }
.ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px; }

/* product window */
.window { position:relative; max-width:1180px; margin:72px auto 0; border-radius:22px; text-align:left;
  background:linear-gradient(180deg, #1d1716, #141010); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.18), 0 50px 140px -30px rgba(var(--accent-rgb),.55), 0 30px 60px -30px #000; }
.window::before { content:""; position:absolute; inset:-1px; border-radius:23px; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,160,120,.55), transparent 30%, transparent 70%, rgba(255,110,66,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.win-bar { display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--hair); color:var(--muted); font-size:13px; }
.win-bar i { width:11px; height:11px; border-radius:50%; background:#3a2e2a; }
.win-bar span { margin-left:12px; }
.win-body { display:grid; grid-template-columns:220px 1fr 260px; min-height:560px; }
.win-side, .win-panel { padding:18px; display:flex; flex-direction:column; gap:8px; }
.win-side { border-right:1px solid var(--hair); }
.win-panel { border-left:1px solid var(--hair); gap:14px; }
.win-h { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:6px; }
.order { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:10px 12px; border-radius:10px; font:inherit; font-size:14px; color:var(--text); background:none; border:1px solid transparent; cursor:pointer; transition:background .2s, border-color .2s; }
.order:hover { background:rgba(255,255,255,.04); }
.order small { color:var(--muted); font-size:12px; }
.order.on { background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.35); }
.win-stage { position:relative; background:radial-gradient(60% 60% at 50% 45%, #241411, #0b0908 75%); overflow:hidden; }
.win-stage canvas { position:absolute; inset:0; width:100%; height:100%; cursor:grab; }
.win-stage canvas:active { cursor:grabbing; }
.chips { position:absolute; top:14px; left:14px; display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-size:12px; padding:5px 10px; border-radius:999px; background:rgba(19,16,16,.7); border:1px solid var(--hair); color:var(--soft-text); backdrop-filter:blur(6px); }
.chip.ok::before { content:"✓ "; color:var(--ok); }
.hint { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--muted); }
.field { display:flex; flex-direction:column; gap:6px; font-size:14px; }
.field small { color:var(--muted); font-size:12px; }
.seg { display:inline-flex; padding:3px; border-radius:999px; background:#0e0b0a; border:1px solid var(--hair); width:max-content; font-size:13px; }
.seg span { padding:4px 14px; border-radius:999px; color:var(--muted); }
.seg span.on { background:var(--surface-2); color:var(--text); }
.seg.light { background:#fff; border-color:var(--hair-ink); }
.seg.light span.on { background:var(--ink); color:#fff; }
.slider { height:6px; border-radius:6px; background:#2a211f; overflow:hidden; }
.slider i { display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-hover)); }
.win-panel .btn { margin-top:auto; }

/* ---------- facts grid (hairline cells) */
.facts { max-width:1180px; margin:96px auto 0; padding:0 24px; }
.facts-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); border:1px solid var(--hair); border-radius:18px; overflow:hidden; }
.facts-grid > div { padding:26px 22px; border-right:1px solid var(--hair); display:flex; flex-direction:column; gap:6px; }
.facts-grid > div:last-child { border-right:0; }
.facts-grid small { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.facts-grid b { font-size:22px; font-weight:600; letter-spacing:-.02em; }
.facts-grid em { font-style:normal; font-size:12px; color:var(--warn); }

/* ---------- AI / speed */
.ai { max-width:var(--max); margin:0 auto; padding:150px 24px 0; }
.ai-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px; margin-top:56px; }
.ai-grid > div { border-top:1px solid var(--hair); padding-top:22px; }
.ai-grid small { color:var(--accent-hover); font-size:13px; }
.ai-grid h3 { margin:12px 0 8px; font-size:22px; letter-spacing:-.02em; }
.ai-grid p { margin:0; color:var(--muted); font-size:16px; max-width:36ch; }

/* ---------- glass panels */
.glass { max-width:var(--max); margin:0 auto; padding:160px 24px 120px; }
.panels { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:20px; margin-top:64px; }
.panel { position:relative; border-radius:26px; padding:26px; min-height:460px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.panel h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.02em; }
.panel p { margin:0; font-size:15px; line-height:1.55; }
.panel .art { position:absolute; inset:22px 22px auto 22px; height:56%; border-radius:16px; overflow:hidden; }
.panel .art svg { width:100%; height:100%; display:block; }
.p1 { background:linear-gradient(160deg, #ff7a45, #b8401c 70%); color:#fff; }
.p1 p { color:rgba(255,255,255,.85); }
.p1 .art { background:#160c09; }
.art.zoom canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.art.zoom .ztag { position:absolute; right:12px; top:10px; font:500 13px "Geist Mono", monospace; color:#ffd2bd;
  background:rgba(22,12,9,.7); padding:4px 9px; border-radius:999px; }
.art.zoom .zcap { position:absolute; left:12px; bottom:10px; font-size:13px; color:#fff1e8; opacity:0; transition:opacity .4s;
  background:rgba(22,12,9,.75); padding:4px 10px; border-radius:999px; }
.art.zoom .zcap.on { opacity:1; }
.p2 { background:linear-gradient(160deg, #2a1f1c, #161110); border:1px solid var(--hair); }
.p2 p { color:var(--muted); }
.p2 .art { background:#0b0908; }
.p3 { background:linear-gradient(160deg, #f6e1d3, #e9c9b6); color:var(--ink); }
.p3 p { color:var(--ink-2); }

/* ---------- chapters (light) */
.chapters { background:var(--ivory); color:var(--ink); border-radius:36px 36px 0 0; padding:130px 24px 140px; }
.chapters .two .dim { color:#a3928a; }
.ch-head { max-width:var(--max); margin:0 auto 80px; }
.ch-grid { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:260px 1fr; gap:72px; }
.ch-nav { position:sticky; top:120px; align-self:start; }
.ch-nav ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; border-left:1px solid var(--hair-ink); }
.ch-nav a { display:flex; gap:14px; padding:10px 18px; margin-left:-1px; border-left:2px solid transparent; color:#a3928a; font-size:17px; font-weight:500; transition:color .25s, border-color .25s; }
.ch-nav a span { font-family:"Geist Mono", monospace; font-size:13px; padding-top:3px; }
.ch-nav a.on { color:var(--ink); border-color:var(--accent); }
.ch-list { display:flex; flex-direction:column; gap:140px; }
.ch { scroll-margin-top:120px; }
#product, #how, #pricing, #faq { scroll-margin-top:84px; } #machines { scroll-margin-top:120px; }   /* nav jumps land below the fixed header */
.ch h3 { margin-bottom:32px; }
.card { background:#fff; border:1px solid var(--hair-ink); border-radius:22px; padding:22px; box-shadow:0 30px 60px -40px rgba(27,22,21,.35); }
.card svg { width:100%; height:auto; display:block; }
.cap { font:500 14px Geist, sans-serif; fill:#5b4a43; }
.cap.light { fill:#b39a90; }
.ui-upload { display:flex; flex-direction:column; gap:16px; }
.drop { display:flex; flex-direction:column; align-items:center; gap:8px; padding:56px 20px; border:2px dashed #d6c8c0; border-radius:16px; background:var(--ivory); }
.drop svg { width:34px; height:34px; fill:none; stroke:var(--accent); stroke-width:1.8; }
.drop small, .file small { color:var(--ink-2); }
.file { display:flex; align-items:center; gap:14px; padding:12px; border-radius:14px; border:1px solid var(--hair-ink); }
.file > div:not(.seg) { flex:1; display:flex; flex-direction:column; font-size:14px; }
.thumb { width:48px; height:48px; border-radius:10px; background:linear-gradient(135deg, #b3a49c, #6e3d2c); }
.ui-depth, .ui-edit { background:#151110; border-color:#2a211f; }
.ui-edit { position:relative; padding:0; overflow:hidden; }
.ui-edit .tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px; border-bottom:1px solid var(--hair); color:var(--soft-text); font-size:13px; }
.ui-edit .tools span:not(.grow) { white-space:nowrap; padding:6px 12px; border-radius:8px; background:#1f1917; border:1px solid var(--hair); }
.ui-edit .tools span.on { background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.5); color:#fff; }
.ui-edit .tools small { color:var(--muted); }
.ui-edit .tools .slider { width:110px; }
.ui-edit canvas { display:block; width:100%; height:360px; }
.ui-edit .lasso { position:absolute; width:150px; height:110px; margin:-55px 0 0 -75px; border-radius:48% 52% 45% 55% / 55% 45% 55% 45%;
  border:2px dashed var(--accent-hover); background:rgba(var(--accent-rgb),.10); pointer-events:none; left:-999px; top:0; transform:rotate(-8deg); }
.ui-edit .lasso::after { content:"⌫"; position:absolute; right:-14px; top:-14px; width:26px; height:26px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:12px; display:grid; place-items:center; }
.ui-fit { display:grid; grid-template-columns:1.3fr 1fr; gap:22px; }
.shapes { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.shape { font:inherit; font-size:13px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 8px; border-radius:14px;
  border:1px solid var(--hair-ink); background:var(--ivory); color:var(--ink-2); cursor:default; }
.shape svg { width:60px; height:80px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.shape svg path:not(.back) { fill:rgba(var(--accent-rgb),.06); }
.shape svg .back { opacity:.35; }
.shape.on { border-color:var(--accent); color:var(--ink); background:#fff; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15); }
.ui-fit .fields { display:flex; flex-direction:column; gap:14px; }
.ui-fit .field small { color:var(--ink-2); }
.ui-export { display:flex; flex-direction:column; gap:0; padding:8px 22px; }
.ui-export .row { display:flex; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid var(--hair-ink); }
.ui-export .row b { width:56px; font-size:18px; }
.ui-export .row small { flex:1; color:var(--ink-2); font-size:14px; }
.ui-export .row em { font-style:normal; font-size:12px; color:#9a5b00; }
.tick { color:#2f7a35; font-weight:700; }
.pay { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0 12px; color:var(--ink-2); font-size:14px; }

/* ---------- kinetic list */
.kinetic { background:var(--ivory); color:var(--ink); padding:40px 24px 160px; text-align:center; }
.kinetic .eyebrow { border-color:var(--hair-ink); background:#fff; color:var(--ink-2); }
.kinetic ul { list-style:none; margin:20px 0 0; padding:0; }
.kinetic li { font-size:clamp(36px, 6vw, 84px); font-weight:600; letter-spacing:-.04em; line-height:1.12; color:var(--ink); opacity:.15; transition:opacity .2s linear; }

/* ---------- pricing */
.pricing { max-width:var(--max); margin:0 auto; padding:160px 24px 120px; }
.nums { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:64px; }
.nums > div { container-type:inline-size; padding:34px; border-radius:24px; border:1px solid var(--hair); background:linear-gradient(180deg, rgba(255,255,255,.035), transparent); }
.nums b { display:block; font-size:clamp(80px, 10vw, 150px); font-size:min(150px, 34cqi); line-height:1; /* 34cqi = sized to the card, so $2.99 always fits (5 Nov) */ letter-spacing:-.06em; font-weight:600;
  background:linear-gradient(180deg, #ffb08f, var(--accent) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nums b.tbc { font-size:clamp(48px, 6vw, 88px); padding:clamp(16px, 2vw, 31px) 0; letter-spacing:-.03em; }
.nums span { display:block; margin-top:14px; color:var(--soft-text); font-size:17px; }

/* ---------- coming soon */
.soon { max-width:var(--max); margin:0 auto; padding:40px 24px 120px; }
.soon-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:48px; }
.soon-grid > div { padding:24px; border-radius:20px; border:1px dashed var(--hair); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
.soon-grid .tag { display:inline-block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-hover);
  border:1px solid currentColor; border-radius:999px; padding:3px 10px; }
.soon-grid h3 { margin:16px 0 8px; font-size:20px; letter-spacing:-.02em; }
.soon-grid p { margin:0; color:var(--muted); font-size:15px; }
@media (max-width:1100px) { .soon-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .soon-grid { grid-template-columns:1fr; } .soon { padding-left:16px; padding-right:16px; } }

/* ---------- faq */
.faq { max-width:var(--max); margin:0 auto; padding:60px 24px 140px; display:grid; grid-template-columns:1fr 1.4fr; gap:72px; }
.faq-l h2.two { position:sticky; top:120px; }
.faq details { border-bottom:1px solid var(--hair); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:24px 0; font-size:18px; font-weight:500; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent-hover); font-size:22px; line-height:1; transition:transform .25s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:-6px 0 24px; color:var(--muted); max-width:60ch; }

/* ---------- final + footer */
.final { position:relative; isolation:isolate; text-align:center; padding:160px 24px 180px; overflow:hidden; }
.final h2.two { margin:0 auto 40px; }
.foot { border-top:1px solid var(--hair); }
.foot-in { max-width:var(--max); margin:0 auto; padding:26px 24px; display:flex; align-items:center; gap:12px 24px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.foot-in a:hover { color:var(--text); }

/* ---------- reveal on scroll */
.rv { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; } .rv { opacity:1; transform:none; transition:none; } .kinetic li { opacity:1; }
}

/* ---------- responsive */
@media (max-width:1080px) {
  .win-body { grid-template-columns:1fr 240px; } .win-side { display:none; }
  .facts-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .facts-grid > div:nth-child(3) { border-right:0; } .facts-grid > div:nth-child(-n+3) { border-bottom:1px solid var(--hair); }
  .panels { grid-template-columns:1fr 1fr; } .p1 { grid-column:1 / -1; }
}
@media (max-width:820px) {
  .links { display:none; }
  .hero { padding-top:120px; }
  .win-body { grid-template-columns:1fr; } .win-panel { display:none; } .win-stage { min-height:420px; }
  .facts-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .facts-grid > div { border-right:0; border-bottom:1px solid var(--hair); } .facts-grid > div:nth-child(odd) { border-right:1px solid var(--hair); }
  .panels { grid-template-columns:1fr; } .panel { min-height:420px; }
  .ai-grid { grid-template-columns:1fr; gap:28px; }
  .ch-grid { grid-template-columns:minmax(0,1fr); gap:0; }   /* minmax: the scrolling step tabs must not widen the page */
  .ch-nav { top:64px; z-index:5; background:var(--ivory); padding:10px 0; margin-bottom:40px; overflow-x:auto; scrollbar-width:none; }
  .ch-nav::-webkit-scrollbar { display:none; }
  .ch-nav ol { flex-direction:row; border-left:0; gap:6px; }
  .ch-nav a { border-left:0; border-bottom:2px solid transparent; padding:8px 12px; white-space:nowrap; font-size:15px; }
  .ch-nav a.on { border-color:var(--accent); }
  .ch-list { gap:96px; }
  .ui-fit { grid-template-columns:1fr; } .shapes { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .nums { grid-template-columns:1fr; }
  .faq { grid-template-columns:1fr; gap:24px; } .faq-l h2.two { position:static; }
  .nav-in { gap:12px; padding:12px 16px; } .nav .btn.ghost { display:none; }
}
@media (max-width:480px) {
  .hero, .glass, .pricing, .faq, .final, .chapters, .kinetic, .facts { padding-left:16px; padding-right:16px; }
  .lang select { max-width:84px; }
  .foot a { padding:10px 4px; }
}

/* ---------- real sample imagery (glass panel 3 + workflow steps) */
.art.cmp3 { background:#0b0908; cursor:ew-resize; touch-action:pan-y; }
.art.cmp3 canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.art.cmp3 .ph { position:absolute; background-size:100% 100%; background-repeat:no-repeat; }
.art.cmp3 .bar { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.4); }
.art.cmp3 .bar i { position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.35); }
.art.cmp3 .bar i::before { content:"‹ ›"; position:absolute; inset:0; display:grid; place-items:center; color:#1b1615; font:600 13px Geist, sans-serif; letter-spacing:2px; }
.art.cmp3 .lbl { position:absolute; bottom:10px; font-size:12px; padding:3px 9px; border-radius:999px; background:rgba(19,16,16,.7); color:#f3ebe7; }
.art.cmp3 .lbl.l { left:10px; } .art.cmp3 .lbl.r { right:10px; }
img.thumb { object-fit:cover; }
.ui-cut .pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ui-cut figure { margin:0; position:relative; border-radius:14px; overflow:hidden; background:#9b8a82; aspect-ratio:4/5; }
.ui-cut figure.chk { background:repeating-conic-gradient(#efe8e4 0 25%, #e2d7d1 0 50%) 0 0 / 22px 22px; }
.ui-cut figure img { width:100%; height:100%; object-fit:cover; display:block; }
.ui-cut figcaption { position:absolute; left:10px; bottom:10px; font-size:13px; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.85); color:#1b1615; }
.ui-depth { padding:14px; }
.ui-depth img.views { width:100%; display:block; border-radius:12px; }
.ui-depth .vcap { display:flex; justify-content:space-around; color:#b39a90; font-size:13px; padding-top:10px; }
.ui-depth .views2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ui-depth .views2 canvas { width:100%; aspect-ratio:4/5; display:block; border-radius:12px; background:#0b0908; }
.sample-dl { display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:center; padding:22px; border-radius:22px;
  background:#1b1615; color:var(--text); box-shadow:0 30px 60px -40px rgba(27,22,21,.5); }
.sample-dl .sd-art { border-radius:14px; overflow:hidden; background:#0b0908; aspect-ratio:8/5; }
.sample-dl .sd-art img { width:100%; height:100%; object-fit:cover; display:block; }
.sample-dl small { color:var(--accent-hover); font-size:12px; letter-spacing:.12em; }
.sample-dl h3.two { margin:8px 0 14px; font-size:clamp(20px, 2vw, 26px); }
.sample-dl .two .dim { color:#9c8a82; }
.sample-dl .sd-fmt { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; font-size:13px; }
.sample-dl .sd-fmt span { padding:4px 10px; border-radius:999px; border:1px solid var(--hair); font-weight:600; }
.sample-dl .sd-fmt em { font-style:normal; color:var(--muted); }
@media (max-width:820px) { .sample-dl { grid-template-columns:1fr; } }
.ui-depth canvas.stepcloud { width:100%; aspect-ratio:16/10; display:block; border-radius:12px; background:#2a2a2e; }

/* accessibility + no-WebGL fallback (2026-10-29) */
.skip { position:fixed; left:16px; top:-60px; z-index:100; padding:10px 16px; border-radius:10px; background:var(--accent); color:#fff; font-weight:600; transition:top .2s; }
.skip:focus { top:12px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.lang:focus-within { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.lang select:focus-visible { outline:none; }
.no3d-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#0b0908; }
.no3d canvas { visibility:hidden; }
.no3d .hint, .no3d .lasso { display:none; }
.no3d .art.zoom::after, .no3d .ui-depth::after, .no3d .ui-edit::after { content:attr(data-no3d); position:absolute; inset:0; display:grid; place-items:center;
  padding:24px; text-align:center; color:var(--muted); font-size:14px; }
.no3d .ui-depth { position:relative; }

/* Japanese: break headings between phrases, not inside words (browsers without support ignore it) */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break:auto-phrase; }

/* ---------- blog (2026-11-03): homepage "latest 3" + /blog pages */
.blog { max-width:var(--max); margin:0 auto; padding:40px 24px 120px; }
.blog-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px 40px; flex-wrap:wrap; margin-bottom:40px; }
.blog-head .all { color:var(--accent-hover); font-weight:600; font-size:15px; white-space:nowrap; }
.blog-head .all:hover { color:var(--text); }
.cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; }
.post { display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,.02); transition:border-color .25s, transform .25s var(--ease); }
.post:hover { border-color:rgba(var(--accent-rgb),.45); transform:translateY(-2px); }
.post .pic { aspect-ratio:16/9; background:#0b0908; overflow:hidden; }
.post .pic img { width:100%; height:100%; object-fit:cover; display:block; }
.post .txt { padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post small { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.post h3 { margin:0; font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:600; text-wrap:balance; }
.post p { margin:0; color:var(--soft-text); font-size:15px; }
.post .more { margin-top:auto; padding-top:6px; color:var(--accent-hover); font-weight:600; font-size:14px; }
.tag-soon { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:12px;
  background:rgba(var(--accent-rgb),.14); color:var(--accent-hover); }
.blog-page { padding-top:120px; }
.blog-page h1.two { font-size:clamp(38px, 5.4vw, 64px); max-width:20ch; margin:0; }
.blog-page .lead { margin:18px 0 0; text-align:left; }
.empty-note { color:var(--muted); padding:30px 0; }
.article { max-width:720px; margin:0 auto; padding:130px 24px 80px; }
.article .crumb { color:var(--muted); font-size:14px; }
.article .crumb a:hover { color:var(--text); }
.article h1.two { font-size:clamp(36px, 5vw, 58px); max-width:none; margin:18px 0 14px; text-wrap:balance; }
.article .meta { color:var(--muted); font-size:14px; margin-bottom:34px; }
.article .cover { border-radius:18px; overflow:hidden; margin:0 0 40px; background:#0b0908; aspect-ratio:16/9; }
.article .cover img { width:100%; height:100%; object-fit:cover; display:block; }
.prose { color:var(--soft-text); font-size:17px; line-height:1.75; }
.prose h2 { color:var(--text); font-size:28px; letter-spacing:-.025em; line-height:1.2; margin:52px 0 14px; text-wrap:balance; }
.prose h3 { color:var(--text); font-size:21px; margin:36px 0 10px; }
.prose p { margin:0 0 18px; }
.prose strong { color:var(--text); font-weight:600; }
.prose a { color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover { color:var(--text); }
.prose ul, .prose ol { margin:0 0 22px; padding-left:1.3em; }
.prose li { margin:6px 0; }
.prose li::marker { color:var(--accent-hover); }
.prose hr { border:0; border-top:1px solid var(--hair); margin:40px 0; }
.article .back { display:inline-block; margin-top:48px; color:var(--accent-hover); font-weight:600; }
@media (max-width:1080px) { .cards { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px) { .cards { grid-template-columns:1fr; } .article { padding-top:110px; } .prose { font-size:16px; } }