/* The Showcase. Palette: velvet + gold + ivory. Type: Cormorant Garamond (display), Jost (text).
   Shapes are deliberately sharp: emerald-cut frames, diamonds, hairlines. Nothing is rounded except the loupe. */
@property --lr { syntax: "<length>"; inherits: true; initial-value: 0px; }
:root {
  --velvet: #1c0910; --velvet2: #3b1420; --gold: #d9b75b; --goldlt: #f6e3a1; --golddk: #8c6b22; --ivory: #f4ead5; --ink: #2a1a10; --muted: #b79d7a;
  --foil: linear-gradient(135deg, #f6e3a1 0%, #d4af37 35%, #8c6b22 55%, #f0d78a 80%, #b08d3c 100%);
  --emerald: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  --emerald2: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  --display: "Cormorant Garamond", Georgia, serif; --text: Jost, system-ui, sans-serif;
}
/* Cursors: a small gold gem instead of the system arrow and hand. Each has a plain fallback. */
:root {
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='translate(0 0) scale(1.0)'%3E%3Cpath d='M8 5h12l5 6-11 12L3 11z' fill='%23d9b75b' stroke='%232a1a10' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 11h22M11 5l-3 6 6 12 6-12-3-6' fill='none' stroke='%232a1a10' stroke-width='1' stroke-linejoin='round' opacity='.7'/%3E%3Cpath d='M9.6 6.3h4.1l-2.3 4.2H6.4z' fill='%23fff' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") 14 13, auto;
  --cur-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='translate(2 3) scale(1.0)'%3E%3Cpath d='M8 5h12l5 6-11 12L3 11z' fill='%23f6e3a1' stroke='%232a1a10' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 11h22M11 5l-3 6 6 12 6-12-3-6' fill='none' stroke='%232a1a10' stroke-width='1' stroke-linejoin='round' opacity='.7'/%3E%3Cpath d='M9.6 6.3h4.1l-2.3 4.2H6.4z' fill='%23fff' opacity='.55'/%3E%3C/g%3E%3Cpath d='M26 1.5l1.2 3.3 3.3 1.2-3.3 1.2-1.2 3.3-1.2-3.3-3.3-1.2 3.3-1.2z' fill='%23fff' stroke='%232a1a10' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, pointer;
  --cur-drag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M7 8l-5 6 5 6' fill='none' stroke='%232a1a10' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 8l-5 6 5 6' fill='none' stroke='%23d9b75b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49 8l5 6 -5 6' fill='none' stroke='%232a1a10' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49 8l5 6 -5 6' fill='none' stroke='%23d9b75b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(14 0) scale(1.0)'%3E%3Cpath d='M8 5h12l5 6-11 12L3 11z' fill='%23d9b75b' stroke='%232a1a10' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 11h22M11 5l-3 6 6 12 6-12-3-6' fill='none' stroke='%232a1a10' stroke-width='1' stroke-linejoin='round' opacity='.7'/%3E%3Cpath d='M9.6 6.3h4.1l-2.3 4.2H6.4z' fill='%23fff' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") 28 13, grab;
  --cur-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M11 8l-5 6 5 6' fill='none' stroke='%232a1a10' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 8l-5 6 5 6' fill='none' stroke='%23d9b75b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45 8l5 6 -5 6' fill='none' stroke='%232a1a10' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45 8l5 6 -5 6' fill='none' stroke='%23d9b75b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg transform='translate(15.96 2.2) scale(0.86)'%3E%3Cpath d='M8 5h12l5 6-11 12L3 11z' fill='%23b08d3c' stroke='%232a1a10' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 11h22M11 5l-3 6 6 12 6-12-3-6' fill='none' stroke='%232a1a10' stroke-width='1' stroke-linejoin='round' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") 28 13, grabbing;
}
html { cursor: var(--cur); }
a, button, [role="button"], summary, select, input[type="range"], input[type="checkbox"], input[type="file"], label[for] { cursor: var(--cur-hover); }
button:disabled { cursor: not-allowed; }
input[type="text"], input[type="number"], textarea { cursor: text; }
* { box-sizing: border-box; margin: 0; border-radius: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { color: var(--ivory); font: 15px/1.6 var(--text); overflow: hidden; background: radial-gradient(ellipse at 50% 42%, var(--velvet2), var(--velvet) 62%, #0d0408); }
button { font: inherit; color: inherit; border: 0; background: none; text-align: left; }
a { color: inherit; }
.gold { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--foil); color: var(--ink); padding: 8px 16px; font: 500 12px var(--text); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--goldlt); outline-offset: 3px; }
.drawer :focus-visible, .qj :focus-visible, .sheet :focus-visible { outline-color: #6a4f17; }

/* ---- stage ---- */
.weave { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px); }
.cone { position: fixed; left: 50%; top: -4vh; width: min(120vmin, 1000px); height: 112vh; transform: translateX(-50%); z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(255,232,170,.26), rgba(255,232,170,.05) 62%, transparent); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); filter: blur(14px); }
#sparkles { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.plinth { position: fixed; left: 50%; bottom: 13vh; width: min(92vw, 980px); height: 140px; transform: translateX(-50%); z-index: 1; pointer-events: none; }
.plinth::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.8), transparent 68%); }
.plinth::after { content: ""; position: absolute; left: 6%; right: 6%; top: 22%; bottom: 22%; border-radius: 50%; border: 1px solid rgba(217,183,91,.55); box-shadow: 0 0 0 7px rgba(217,183,91,.06), inset 0 0 40px rgba(217,183,91,.08); }

/* ---- header ---- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 16px 30px; }
.top::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.top .brand { font: italic 700 28px var(--display); text-decoration: none; letter-spacing: .01em; }
.top small { font: 500 11px var(--text); color: var(--muted); letter-spacing: .24em; text-transform: uppercase; }
.top .grow { flex: 1; }
.btn { border: 1px solid var(--gold); padding: 8px 16px; font: 500 11px var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--goldlt); transition: background .25s, color .25s; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); white-space: nowrap; }
a.btn { text-decoration: none; display: inline-block; }
.go small { opacity: .7; letter-spacing: .04em; text-transform: none; font-size: 11px; margin-left: 2px; }
.btn:hover, .btn[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
kbd { font: 500 10px var(--text); border: 1px solid rgba(217,183,91,.5); padding: 0 5px; letter-spacing: .08em; }

/* ---- carousel ---- */
.scene { position: fixed; inset: 0; z-index: 5; perspective: 1500px; display: grid; place-items: center; cursor: var(--cur-drag); }
.scene:active { cursor: var(--cur-grab); }
.ring { position: relative; margin-top: -6vh; }
.card { position: absolute; inset: 0; user-select: none; }
.box { position: absolute; inset: 0; clip-path: var(--emerald); background: var(--foil); }
.card:not(.front) .box { filter: saturate(.7); }
.inner { position: absolute; inset: 2px; clip-path: var(--emerald2); background: linear-gradient(170deg, #2a0e17, #17070d); display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; }
.win { position: relative; flex: 1.25; min-height: 0; margin: 12px 12px 0; background: #0e0408; box-shadow: inset 0 0 0 1px rgba(217,183,91,.45); }
.win canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.win .big { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c); }
.win .big svg { width: 42%; height: 42%; }
.gem { position: absolute; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.g1 { left: -5px; top: -5px; } .g2 { right: -5px; top: -5px; } .g3 { left: -5px; bottom: -5px; } .g4 { right: -5px; bottom: -5px; }
.plq { padding: 12px 16px 16px; text-align: center; }
.hm { display: inline-block; border: 1px solid rgba(217,183,91,.6); color: var(--goldlt); font: 500 9.5px var(--text); letter-spacing: .2em; padding: 1px 8px; }
.plq h2 { font: italic 700 clamp(21px, 8cqw, 28px)/1 var(--display); margin: 8px 0 4px; }
.plq .k { font: 400 12px/1.35 var(--text); color: #cdb994; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.stone { margin-top: 6px; font: 500 10px var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--c); }
.stone::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--c); transform: rotate(45deg); margin-right: 8px; vertical-align: 1px; }
.card .open { position: absolute; left: 50%; top: -1px; transform: translateX(-50%); z-index: 3; background: var(--foil); color: var(--ink); font: 600 9.5px var(--text); letter-spacing: .22em; padding: 3px 14px; opacity: 0; transition: opacity .3s; white-space: nowrap; text-transform: uppercase; }
.card.front .open { opacity: 1; }

/* the loupe */
.lp { position: absolute; inset: 0; z-index: 4; background: #120408; clip-path: circle(var(--lr) at var(--lx, 50%) var(--ly, 50%)); transition: --lr .25s ease; pointer-events: none; }
.lp-in { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); transform: translate(-50%, -50%); width: 128px; text-align: center; }
.lp small { font: 500 9px var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.lp .lpt { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 9px; margin-top: 8px; }
.lp .lpt span { font: italic 600 15px/1.15 var(--display); border-bottom: 1px solid var(--gold); color: var(--goldlt); padding: 0 2px; }
.card.front.lensing .lp { --lr: 74px; }
.lens { position: fixed; width: 156px; height: 156px; margin: -78px 0 0 -78px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 0 1px #6a4f17, inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.5); pointer-events: none; z-index: 9; opacity: 0; transition: opacity .2s; }
.lens::after { content: ""; position: absolute; left: 100%; top: 100%; width: 46px; height: 9px; background: var(--foil); transform-origin: left center; transform: translate(-14px, -6px) rotate(45deg); }
.lens.on { opacity: 1; }
.lens::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--gold); border: 1.5px solid #2a1a10; transform: rotate(45deg); }
.card.lensing, .card.lensing * { cursor: none; }

/* label + controls */
.label { position: fixed; left: 0; right: 0; bottom: calc(4.5vh + 58px); text-align: center; z-index: 20; pointer-events: none; }
.label .pc { font: 500 10.5px var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.label .ttl { font: italic 700 clamp(28px, 4.2vw, 46px)/1.05 var(--display); margin-top: 2px; }
.label .hint { font: 400 11.5px var(--text); color: #a58d6d; margin-top: 2px; letter-spacing: .06em; }
.nav { position: fixed; bottom: 4.5vh; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 26px; }
.arrow { width: 40px; height: 40px; border: 1px solid var(--gold); transform: rotate(45deg); display: grid; place-items: center; transition: background .25s, color .25s; color: var(--goldlt); }
.arrow:hover { background: var(--gold); color: var(--ink); }
.arrow svg { width: 20px; height: 20px; } #prev svg { transform: rotate(-180deg); }
.dots { display: flex; gap: 14px; align-items: center; }
.dots button { width: 8px; height: 8px; border: 1px solid var(--gold); transform: rotate(45deg); padding: 0; transition: all .3s; }
.dots button.on { width: 12px; height: 12px; background: var(--gold); }

/* ---- certificate drawer ---- */
.veil { position: fixed; inset: 0; z-index: 40; background: rgba(8,2,5,.78); opacity: 0; pointer-events: none; transition: opacity .35s; }
.veil.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; left: 50%; top: 50%; width: min(920px, 94vw); height: min(90vh, 860px); z-index: 50; background: var(--ivory); color: var(--ink); border: 9px double #a8842f; opacity: 0; pointer-events: none; transform: translate(-50%, -46%); transition: opacity .35s, transform .5s cubic-bezier(.2,.85,.25,1); display: flex; flex-direction: column; box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.drawer.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.dh { display: flex; align-items: center; gap: 14px; padding: 12px 26px; border-bottom: 1px solid rgba(42,26,16,.3); font: 500 11px var(--text); letter-spacing: .24em; text-transform: uppercase; color: #6a5130; }
.dh .grow { flex: 1; } .dh .btn { border-color: #6a5130; color: var(--ink); } .dh .btn:hover { background: var(--ink); color: var(--ivory); }
#db { overflow-y: auto; padding: 24px clamp(18px, 4vw, 46px) 56px; }
.d-viz { position: relative; height: clamp(190px, 32vh, 300px); background: #17070d; box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 4px var(--ivory), 0 0 0 5px #a8842f; }
.d-viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* shared content styles (drawer + plain page) */
.d-kick { font: 500 11.5px var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--golddk); margin-top: 26px; }
.d-title { font: italic 700 clamp(40px, 7vw, 72px)/.95 var(--display); margin: 6px 0 8px; }
.d-tag { font: italic 500 clamp(20px, 3vw, 27px)/1.25 var(--display); color: #6a4f17; margin-bottom: 10px; }
.d-sum { font-size: 18px; line-height: 1.65; max-width: 720px; margin: 10px 0 14px; }
.d-p { max-width: 720px; margin: 10px 0; font-size: 16.5px; }
.award { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--goldlt); font: 500 11px var(--text); letter-spacing: .14em; text-transform: uppercase; padding: 4px 13px; margin: 6px 0 4px; }
.award svg { width: 14px; height: 14px; }
.d-facts { display: flex; flex-wrap: wrap; margin: 18px 0 8px; border-top: 1px solid rgba(42,26,16,.3); border-bottom: 1px solid rgba(42,26,16,.3); }
.fact { flex: 1 1 130px; padding: 12px 16px; border-left: 1px solid rgba(42,26,16,.25); } .fact:first-child { border-left: 0; padding-left: 0; }
.fact b { display: block; font: italic 700 32px/1.05 var(--display); } .fact span { font: 500 10.5px/1.35 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #6a5130; }
.d-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; margin-top: 18px; }
.d-cols h4, .d-box h4 { font: 500 10.5px var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--golddk); margin-bottom: 6px; }
ul { padding-left: 20px; } .d-cols li, .proj li { margin: 8px 0; } li::marker { content: "◆  "; font-size: 8px; color: #a8842f; }
.d-box { border-top: 1px solid rgba(42,26,16,.35); padding: 12px 0; margin-top: 10px; }
.d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tg { font: 500 11.5px var(--text); border: 1px solid rgba(42,26,16,.5); padding: 1px 10px; letter-spacing: .04em; }
.d-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.go { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--ink); color: var(--goldlt); font: 500 12px var(--text); letter-spacing: .16em; text-transform: uppercase; padding: 11px 22px; border: 1px solid var(--ink); }
.go.alt { background: none; color: var(--ink); } .go:hover { background: var(--gold); color: var(--ink); } .go svg { width: 16px; height: 16px; }
.d-sub { border-top: 1px solid rgba(42,26,16,.35); margin-top: 28px; padding-top: 18px; }
.d-sub > h3 { font: italic 700 34px var(--display); }
.job { margin-top: 6px; } .job h4, .proj h3 { font: italic 700 26px/1.15 var(--display); margin-top: 2px; } .job + .job { border-top: 1px solid rgba(42,26,16,.18); margin-top: 18px; padding-top: 2px; }
.d-shops { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 14px; } .shop { font: italic 700 27px var(--display); border-bottom: 2px solid #a8842f; padding: 0 2px; }
.d-first { font: italic 500 23px/1.4 var(--display); color: #5b4326; margin: 6px 0 4px; }
.d-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 14px 0; border-top: 1px solid rgba(42,26,16,.2); }
.d-pair span { display: block; font: 500 10px var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--golddk); margin-bottom: 3px; }
.d-sub h3 + .d-pair { margin-top: 8px; }
.d-chart { margin: 24px 0 4px; } .d-chart figcaption { font: 500 10.5px var(--text); letter-spacing: .24em; text-transform: uppercase; color: var(--golddk); margin-bottom: 4px; }
.d-chart svg { width: 100%; height: auto; display: block; } .d-chart text { fill: #5b4326; font: 11px var(--text); } .d-chart .gl { stroke: rgba(42,26,16,.15); }
.d-chart .pt { fill: #5b4326; opacity: .55; } .d-chart .pt.pick { fill: #a8842f; opacity: 1; } .d-chart .ring { fill: none; stroke: #a8842f; stroke-width: 1.5; } .d-chart .lbl.pick { font-weight: 600; fill: var(--ink); }

/* quick jump */
.qj { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(8,2,5,.78); } .qj.on { display: block; }
.qj > div { position: absolute; left: 50%; top: 16vh; transform: translateX(-50%); width: min(520px, 92vw); background: var(--ivory); color: var(--ink); border: 6px double #a8842f; }
.qj input { width: 100%; padding: 16px 22px; font: italic 600 23px var(--display); background: none; border: 0; border-bottom: 1px solid rgba(42,26,16,.35); outline: 0; color: var(--ink); }
.qj .res { max-height: 44vh; overflow-y: auto; }
.qj .r { display: block; width: 100%; padding: 10px 22px; font: 500 15px var(--text); } .qj .r.on { background: var(--ink); color: var(--goldlt); }
.qj .r small { opacity: .6; margin-left: 10px; font: 400 11px var(--text); letter-spacing: .06em; } .qj .none { padding: 16px 22px; color: #6a5130; }

/* ---- read as a page ---- */
#plain { position: relative; z-index: 10; height: 100dvh; overflow-y: auto; padding: 78px 16px 60px; outline: 0; }
.sheet { max-width: 820px; margin: 0 auto; background: var(--ivory); color: var(--ink); border: 9px double #a8842f; padding: clamp(22px, 5vw, 56px); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sheet section { border-top: 1px solid rgba(42,26,16,.35); margin-top: 34px; padding-top: 20px; }
.sheet h2 { font: italic 700 38px var(--display); } .proj { margin-top: 26px; } .proj + .proj { border-top: 1px solid rgba(42,26,16,.18); padding-top: 4px; }
body.plain #qjb, body.plain #cvbtn, body.plain .scene, body.plain .label, body.plain .nav, body.plain .plinth, body.plain .cone, body.plain #sparkles, body.plain .lens { display: none; }


/* ---- miniature demos (inside the certificate) ---- */
.demo-wrap { border-top: 1px solid rgba(42,26,16,.35); margin-top: 30px; padding-top: 18px; }
.demo-wrap > h3 { font: italic 700 34px var(--display); margin-bottom: 10px; }
.go.try { margin-top: 12px; }
.dm { border: 1px solid #a8842f; background: #fbf5e6; padding: 0 0 16px; position: relative; }
.dm-top { padding: 7px 16px; background: var(--ink); color: var(--goldlt); font: 400 11.5px var(--text); letter-spacing: .06em; } .dm-top b { font-weight: 600; letter-spacing: .24em; text-transform: uppercase; margin-right: 10px; }
.dm > *:not(.dm-top) { margin-left: 16px; margin-right: 16px; }
.dm-lead { margin-top: 14px; max-width: 640px; }
.dm-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin-top: 14px; }
.dm-f { min-width: 150px; } .dm label, .dm-lab { display: block; font: 500 10.5px var(--text); letter-spacing: .16em; text-transform: uppercase; color: #6a5130; margin-bottom: 4px; } .dm output { color: var(--ink); font-weight: 600; letter-spacing: .04em; }
.dm input[type=range] { accent-color: #8c6b22; width: 100%; min-width: 140px; } .dm select, .dm input[type=text], .dm input[type=number] { font: 500 14px var(--text); padding: 6px 8px; border: 1px solid var(--ink); background: #fffaf0; color: var(--ink); min-width: 150px; }
.dm-b { border: 1px solid var(--ink); padding: 7px 14px; font: 500 11px var(--text); letter-spacing: .14em; text-transform: uppercase; background: none; color: var(--ink); white-space: nowrap; } .dm-b:hover:not(:disabled), .dm-b.on { background: var(--ink); color: var(--goldlt); } .dm-b:disabled { opacity: .4; cursor: not-allowed; } .dm-b.sm { padding: 3px 9px; font-size: 10px; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; } .dm-chip { border: 1px solid rgba(42,26,16,.55); padding: 2px 10px; font: 500 11.5px var(--text); background: none; color: var(--ink); } .dm-chip[aria-pressed="true"] { background: var(--ink); color: var(--goldlt); }
.dm-sum { margin-top: 12px; font-size: 16px; max-width: 700px; } .dm-small { font: 400 12.5px/1.5 var(--text); color: #6a5130; margin-top: 12px; max-width: 700px; }
.dm-legend { margin-top: 14px; font: 500 11px var(--text); color: #6a5130; letter-spacing: .06em; } .dm-legend span { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 12px; vertical-align: -1px; } .dm-legend .k1 { background: #8e7c5d; margin-left: 0; } .dm-legend .k2 { background: #b3282e; }
.dm-svg { width: calc(100% - 32px); height: auto; display: block; margin-top: 6px; } .dm-svg text { fill: #5b4326; font: 11px var(--text); } .dm-svg .cap { font-weight: 500; letter-spacing: .06em; } .dm-svg .ax { stroke: rgba(42,26,16,.4); } .dm-svg .b1 { fill: #8e7c5d; } .dm-svg .b2 { fill: #b3282e; }
.dm-t { width: calc(100% - 32px); border-collapse: collapse; font-size: 13.5px; margin-top: 12px; } .dm-t th { font: 500 10px var(--text); letter-spacing: .16em; text-transform: uppercase; color: #6a5130; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--ink); } .dm-t td { padding: 6px 8px; border-bottom: 1px solid rgba(42,26,16,.18); vertical-align: middle; }
.dm-ok { color: #1f6b45; font-weight: 600; } .dm-bad { color: #9b2335; font-weight: 600; } .dm-warn { color: #8a5a00; font-weight: 600; }
.dm-box { border: 1px solid rgba(42,26,16,.4); padding: 10px 14px; margin-top: 12px; background: #fffaf0; } .dm-steps { list-style: none; padding: 0; } .dm-steps li { padding: 5px 0; border-bottom: 1px dashed rgba(42,26,16,.2); } .dm-steps li::marker { content: ""; }
.dm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; } .dm-tile { border: 1px solid rgba(42,26,16,.4); padding: 8px 12px; background: #fffaf0; } .dm-tile b { display: block; font: italic 700 26px/1.1 var(--display); } .dm-tile span { font: 500 10px var(--text); letter-spacing: .14em; text-transform: uppercase; color: #6a5130; }
.dm canvas { display: block; width: calc(100% - 32px); background: #17070d; margin-top: 12px; }
.dm-map { width: calc(100% - 32px); display: block; margin-top: 12px; background: #efe5cc; border: 1px solid rgba(42,26,16,.5); cursor: crosshair; touch-action: manipulation; }
.dm-gates { display: flex; gap: 0; margin-top: 14px; flex-wrap: wrap; } .dm-gate { flex: 1 1 150px; border: 1px solid rgba(42,26,16,.45); padding: 8px 12px; margin-left: -1px; background: #fffaf0; transition: background .3s, color .3s; } .dm-gate small { display: block; font: 500 10px var(--text); letter-spacing: .14em; text-transform: uppercase; color: #6a5130; } .dm-gate b { font: italic 700 19px var(--display); } .dm-gate.run { background: #efe0b4; } .dm-gate.hit { background: var(--ink); color: var(--goldlt); } .dm-gate.hit small { color: #cdb994; } .dm-gate.pass { background: #e4efdc; } .dm-gate.skip { opacity: .45; }
.dm-tt { display: grid; grid-template-columns: 52px repeat(5, 1fr); gap: 2px; margin-top: 12px; font: 500 11px var(--text); } .dm-tt div { min-height: 30px; padding: 3px 5px; background: #fffaf0; border: 1px solid rgba(42,26,16,.15); } .dm-tt .h { background: none; border: 0; color: #6a5130; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; } .dm-tt .blk { background: #d9b75b; border-color: #a8842f; color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .dm-t { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .dm-t td, .dm-t th { white-space: nowrap; } .dm-f { min-width: 100%; } .dm > *:not(.dm-top) { margin-left: 12px; margin-right: 12px; } .dm-svg, .dm-t, .dm canvas, .dm-map { width: calc(100% - 24px); } }

.nojs { position: fixed; inset: 0; z-index: 200; overflow: auto; background: var(--velvet); padding: 28px 18px; } .nojs .sheet { margin: 0 auto; }

@media (max-width: 760px) {
  .d-cols, .d-pair { grid-template-columns: 1fr; gap: 8px; } .top { padding: 14px 18px; } .top::after { left: 18px; right: 18px; } .top small, .label .hint.fine, .lens { display: none; }
  .top .brand { font-size: 24px; white-space: nowrap; } #qjb, #cvbtn, .go small { display: none; } .top { gap: 10px; flex-wrap: nowrap; } .btn { padding: 7px 12px; letter-spacing: .12em; } .dh { padding: 10px 16px; gap: 10px; } #dtitle { font-size: 10px; letter-spacing: .14em; line-height: 1.4; } .cone { opacity: .7; } .btn kbd { display: none; } .fact:nth-child(odd) { padding-left: 0; border-left: 0; } .sheet { border-width: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; animation: none !important; } }
@media print { body { overflow: visible; background: #fff; color: #000; } .scene, .nav, .label, .plinth, .cone, #sparkles, .top, .lens, .drawer, .veil { display: none !important; } #plain { display: block !important; height: auto; overflow: visible; padding: 0; } .sheet { border: 0; box-shadow: none; } }