/* Egypt Through Your Lens: interactive demo. Two materials: paper (the documentary desk) and glass (the app). */
:root {
  --paper: #EADFC8; --paper-2: #E0D2B3; --paper-3: #F3EBDA; --paper-edge: #CDBE9C;
  --ink: #191713; --ink-2: #4A4337; --ink-3: #625848;
  --blue: #1F3FA6; --blue-2: #142C7A; --blue-tint: #E3E8F6;
  --hi: #FFD400; --red: #D43A2C; --ochre: #C8902E; --ochre-tint: #F4E6C8;
  --glass: #FBF9F4; --glass-2: #F2EDE3; --glass-line: #E2DACB;
  --cold: #3E6FB0; --warm: #E3A72F; --hot: #E0632D; --here: #C62F25;
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --ui: 'Inter', system-ui, sans-serif;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --ar: 'Reem Kufi', 'Noto Naskh Arabic', sans-serif;
  --rail-h: 56px; --pager-h: 68px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper) url(../assets/tex/paper.png); background-size: 256px; background-blend-mode: soft-light;
  color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body::after { /* vignette */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(60, 40, 10, .16) 100%);
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
img { display: block; max-width: 100%; }

/* ---------------- frame */
#app { position: fixed; inset: 0; display: grid; grid-template-rows: var(--rail-h) minmax(0, 1fr) var(--pager-h); grid-template-columns: minmax(0, 1fr); height: 100dvh; }
.rail { display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1.5px solid rgba(25, 23, 19, .14); position: relative; z-index: 20; }
.brand { display: flex; align-items: center; gap: 8px; flex: none; text-decoration: none; color: var(--ink); }
.brand svg { width: 30px; height: 30px; }
.brand b { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.brand b small { display: block; font-weight: 600; font-size: 10px; letter-spacing: .14em; color: var(--ink-3); font-stretch: 100%; }
.line { flex: 1; min-width: 0; position: relative; height: 40px; }
.line svg { width: 100%; height: 100%; overflow: visible; }
.line .track { stroke: var(--ink); stroke-width: 3; }
.line .done { stroke: var(--blue); stroke-width: 5; stroke-linecap: round; }
.line .st { fill: var(--paper-3); stroke: var(--ink); stroke-width: 2.5; cursor: pointer; }
.line .st.on { fill: var(--blue); stroke: var(--blue); }
.line .st.now { fill: var(--hi); stroke: var(--ink); }
.line .lbl { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-2); }
.line .lbl.now { fill: var(--ink); }
.rail-btn { flex: none; border: 1.5px solid var(--ink); background: var(--paper-3); border-radius: 999px; height: 34px; padding: 0 12px; font-family: var(--ui); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.rail-btn svg { width: 16px; height: 16px; }
#stagewrap { position: relative; overflow: hidden; }
#scene { position: absolute; inset: 0; }
.pager { display: flex; align-items: center; gap: 10px; padding: 0 14px calc(env(safe-area-inset-bottom) * .5); border-top: 1.5px solid rgba(25, 23, 19, .14); position: relative; z-index: 20; }
.pager .hint { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.pbtn { height: 46px; min-width: 46px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper-3); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; font-family: var(--ui); font-weight: 700; font-size: 15px; }
.pbtn svg { width: 20px; height: 20px; }
.pbtn.next { background: var(--ink); color: var(--paper-3); padding: 0 20px 0 22px; }
.pbtn.next.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 63, 166, .0); } 50% { box-shadow: 0 0 0 7px rgba(31, 63, 166, .22); } }
.pbtn[disabled] { opacity: .35; pointer-events: none; }

/* ---------------- documentary scene (paper) */
.doc { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 18px 20px 10px; gap: 14px; overflow: hidden; }
.doc-copy { position: relative; z-index: 3; }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-2); margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.kicker .num { background: var(--ink); color: var(--paper-3); font-family: var(--display); font-stretch: 75%; font-weight: 800; padding: 2px 7px 1px; font-size: 13px; letter-spacing: .04em; }
.title { font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; margin: 0; font-size: clamp(54px, 16.5vw, 132px); }
.title .ln { display: block; }
.title .blue { color: var(--blue); }
.lede { font-size: clamp(18px, 4.6vw, 23px); line-height: 1.38; margin: 14px 0 0; max-width: 34ch; color: var(--ink); }
.ar { font-family: var(--ar); font-size: 22px; color: var(--ink-2); margin: 10px 0 0; direction: rtl; text-align: left; unicode-bidi: plaintext; }
mark { background: none; color: inherit; position: relative; padding: 0 .1em; white-space: nowrap; }
mark::before { content: ""; position: absolute; left: -.08em; right: -.08em; top: .14em; bottom: .02em; z-index: -1;
  background: var(--hi); transform-origin: 0 50%; transform: scaleX(var(--hl, 0)) skewX(-6deg); border-radius: 2px 6px 3px 7px; mix-blend-mode: multiply; }
.lede, .note p { position: relative; z-index: 0; isolation: isolate; }
.cut { position: relative; margin: 0; z-index: 2; align-self: center; justify-self: center; width: min(92%, 520px); max-height: 100%; }
.cut .print { position: relative; background: #f6efdf; padding: 8px 8px 30px; box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 14px 24px -12px rgba(60, 40, 10, .55); transform: rotate(var(--r, -2deg)); }
.cut img { width: 100%; height: auto; max-height: 42dvh; object-fit: cover; filter: sepia(.12) contrast(1.02); }
.cut figcaption { position: absolute; left: 10px; right: 10px; bottom: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cut .tape { position: absolute; width: 92px; height: 26px; background: rgba(240, 226, 180, .78); top: -12px; left: 50%; transform: translateX(-50%) rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.ring { position: absolute; pointer-events: none; overflow: visible; z-index: 4; }
.ring path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; }
.scribble { position: absolute; pointer-events: none; z-index: 4; overflow: visible; }
.scribble path { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; }
.margin-note { font-family: var(--mono); font-size: 13px; color: var(--red); position: absolute; z-index: 5; max-width: 200px; line-height: 1.3; transform: rotate(-3deg); background: var(--paper-3); padding: 4px 7px; box-shadow: 0 2px 6px -3px rgba(60, 40, 10, .5); }
.stamp-mark { position: absolute; z-index: 5; font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; color: var(--red); border: 3px solid var(--red); padding: 4px 10px 2px; font-size: 18px; letter-spacing: .06em; transform: rotate(-8deg); mix-blend-mode: multiply; opacity: .9; }

/* title scene */
.doc.titlecard { grid-template-rows: 1fr auto; align-items: end; }
.titlecard .postcard { position: absolute; top: 4%; right: -6%; width: min(78vw, 520px); transform: rotate(6deg); z-index: 1; }
.titlecard .postcard .print { padding: 8px; background: #f6efdf; }
.titlecard .postcard img { max-height: none; filter: grayscale(.2) sepia(.2); }
.titlecard .presents { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
.titlecard .seen { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 7vw, 40px); margin: 0 0 6px; }
.titlecard .title { font-size: clamp(50px, 15vw, 128px); }
.start-btn { margin-top: 18px; height: 54px; border-radius: 999px; border: 0; background: var(--blue); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 17px; padding: 0 26px; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 6px 0 var(--blue-2); }
.start-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--blue-2); }
.tiny { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 12px; }

/* ---------------- app scene (glass) */
.appwrap { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.phone { position: relative; overflow: hidden; background: var(--glass); }
.screen.leaving { pointer-events: none; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--ui); color: var(--ink); background: var(--glass); }
.sbar { flex: none; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--glass-line); background: #fff; }
.sbar svg.mk { width: 26px; height: 26px; }
.sbar .t { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar .chip { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--blue-tint); color: var(--blue); }
.sbody { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 16px 20px; -webkit-overflow-scrolling: touch; position: relative; }
.sfoot { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom) * .3); border-top: 1px solid var(--glass-line); background: #fff; }
.h1 { font-weight: 800; font-size: 26px; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 6px; }
.sub { color: var(--ink-3); font-size: 14.5px; line-height: 1.45; margin: 0 0 16px; }
.btn { width: 100%; height: 52px; border-radius: 14px; border: 0; background: var(--blue); color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s, background .2s; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--glass-2); color: var(--ink); }
.btn.dark { background: var(--ink); }
.btn[disabled] { background: #B9B2A4; }
.btn svg { width: 20px; height: 20px; }
.moods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mood { height: 64px; border-radius: 14px; border: 1.5px solid var(--glass-line); background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-weight: 650; font-size: 15.5px; text-align: left; }
.mood i { width: 30px; height: 30px; border-radius: 50%; background: var(--glass-2); display: grid; place-items: center; font-style: normal; flex: none; }
.mood i svg { width: 18px; height: 18px; }
.mood.sel { border-color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.idea { display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: #fff; border: 1.5px solid var(--glass-line); border-radius: 16px; padding: 10px; margin-bottom: 10px; text-align: left; width: 100%; align-items: center; }
.idea img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.idea b { display: block; font-size: 16px; margin-bottom: 3px; }
.idea span { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.idea .price { font-weight: 800; color: var(--ink); margin-top: 6px; font-size: 14.5px; }
.idea.pick { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 10px 20px -14px rgba(31, 63, 166, .6); }
.idea .why { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--blue); background: var(--blue-tint); padding: 3px 7px; border-radius: 5px; }
.hero { position: relative; margin: -18px -16px 14px; height: 210px; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero .tag { position: absolute; left: 12px; bottom: 12px; background: rgba(25, 23, 19, .78); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 7px; }
.row { display: flex; gap: 10px; align-items: center; }
.host { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; border: 1.5px solid var(--glass-line); margin: 12px 0; }
.host .av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.host b { display: block; font-size: 15px; }
.host span { font-size: 12.5px; color: var(--ink-3); }
.vetted { margin-left: auto; font-size: 11px; font-weight: 800; color: #1E7A3F; background: #E2F2E7; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.slots { display: flex; gap: 8px; margin: 6px 0 14px; }
.slot { flex: 1; height: 44px; border-radius: 10px; border: 1.5px solid var(--glass-line); background: #fff; font-weight: 700; font-size: 14px; }
.slot.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.pricebox { background: #fff; border: 1.5px solid var(--glass-line); border-radius: 14px; padding: 12px 14px; }
.pricebox .l { display: flex; justify-content: space-between; font-size: 14.5px; padding: 4px 0; }
.pricebox .l b { font-weight: 800; }
.pricebox .split { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--glass-line); display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #1E7A3F; font-weight: 700; }
.pricebox .split small { display: block; color: var(--ink-3); font-weight: 500; font-size: 12px; }
.confirm { text-align: center; padding-top: 6px; }
.confirm .tick { width: 64px; height: 64px; border-radius: 50%; background: #E2F2E7; display: grid; place-items: center; margin: 0 auto 12px; }
.confirm .tick svg { width: 34px; height: 34px; stroke: #1E7A3F; }
.pass-qr { width: 190px; margin: 14px auto 8px; background: #fff; padding: 12px; border-radius: 16px; border: 1.5px solid var(--glass-line); }
.pass-qr svg { width: 100%; height: auto; display: block; }
.code { font-family: var(--mono); font-size: 18px; letter-spacing: .08em; font-weight: 700; }
.wa { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: 14px; background: #E7F4EC; border-radius: 14px; padding: 12px; font-size: 13.5px; line-height: 1.4; }
.wa svg { width: 22px; height: 22px; flex: none; color: #1E7A3F; }

/* pass ticket */
.ticket { position: relative; border-radius: 18px; background: var(--blue); color: #fff; padding: 18px 18px 16px; overflow: hidden; box-shadow: 0 16px 30px -18px rgba(20, 44, 122, .9); }
.ticket::before { content: ""; position: absolute; inset: 0; background: url(../assets/tex/paper.png); background-size: 200px; mix-blend-mode: overlay; opacity: .35; }
.ticket .tt { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.ticket .big { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 46px; line-height: .86; text-transform: uppercase; }
.ticket .meta { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 16px; font-size: 13px; }
.ticket .meta b { display: block; font-size: 15px; }
.ticket .perf { position: relative; margin: 14px -18px; border-top: 2px dashed rgba(255, 255, 255, .5); }
.ticket .holes { position: relative; display: flex; gap: 10px; }
.ticket .hole { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); }
.ticket .hole.punched { background: var(--glass); border-color: var(--glass); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.ticket .mk { width: 38px; height: 38px; }
.incl { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.incl li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; background: #fff; border: 1.5px solid var(--glass-line); border-radius: 12px; padding: 10px 12px; }
.incl svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
.phase { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ochre); background: var(--ochre-tint); padding: 3px 7px; border-radius: 5px; text-transform: uppercase; white-space: nowrap; }
.routeline { position: relative; margin: 6px 0 12px; padding-left: 30px; }
.routeline .stn { position: relative; padding: 9px 0; font-size: 15px; }
.routeline .stn::before { content: ""; position: absolute; left: -22px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #C7472F; z-index: 2; }
.routeline .stn.end::before { width: 16px; height: 16px; left: -24px; top: 11px; background: #C7472F; }
.routeline .bar { position: absolute; left: 12px; top: 18px; bottom: 18px; width: 6px; background: #C7472F; border-radius: 3px; transform-origin: top; }
.routeline .stn small { color: var(--ink-3); margin-left: 6px; }
.runs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.run { flex: none; width: 150px; background: #fff; border: 1.5px solid var(--glass-line); border-radius: 14px; padding: 10px 12px; font-size: 13px; }
.run b { display: block; font-size: 18px; }

/* finder */
.finder { position: absolute; inset: 0; display: flex; flex-direction: column; background: #EFE7D6; }
.fmap { position: relative; flex: 1; overflow: hidden; touch-action: none; }
.fmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-bld { fill: #DCCFB2; }
.m-park { fill: #CBD7B4; }
.m-water { fill: #9EC3D8; }
.m-minor { fill: none; stroke: #FBF6EA; stroke-linecap: round; stroke-linejoin: round; }
.m-major { fill: none; stroke: #FFFDF7; stroke-linecap: round; stroke-linejoin: round; }
.m-major-c { fill: none; stroke: #CDBF9F; stroke-linecap: round; stroke-linejoin: round; }
.m-path { fill: none; stroke: #B5A585; stroke-dasharray: 3 4; }
.zone { fill: rgba(31, 63, 166, .10); stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 9 7; }
.zone-lbl { font-family: var(--ui); font-weight: 800; font-size: 12px; fill: var(--blue); paint-order: stroke; stroke: #EFE7D6; stroke-width: 4px; }
.walker-halo { fill: rgba(31, 63, 166, .18); }
.walker { fill: var(--blue); stroke: #fff; stroke-width: 3.5; }
.trail { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .6; }
.target { opacity: 0; }
.target.show { opacity: 1; }
.fpanel { flex: none; background: #fff; border-top: 1px solid var(--glass-line); padding: 14px 16px calc(14px + env(safe-area-inset-bottom) * .3); }
.meter { border-radius: 16px; padding: 14px 16px; color: #fff; background: var(--cold); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; transition: background .25s; }
.meter .band { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 44px; line-height: .85; text-transform: uppercase; }
.meter .dist { font-weight: 800; font-size: 22px; text-align: right; }
.meter .trend { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; opacity: .95; display: flex; align-items: center; gap: 6px; min-height: 18px; }
.meter .scale { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.meter .scale span { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.meter .scale span.on { background: #fff; }
.meter .scale-l { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.frow { display: flex; gap: 8px; margin-top: 10px; }
.frow .btn { height: 46px; font-size: 14.5px; }
.sim { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .9); padding: 4px 8px; border-radius: 6px; color: var(--ink-2); font-family: var(--ui); }
.mapcredit { position: absolute; right: 8px; bottom: 6px; font-size: 9.5px; color: var(--ink-3); font-family: var(--ui); background: rgba(239, 231, 214, .8); padding: 1px 4px; border-radius: 3px; }

/* scan */
.scan { position: absolute; inset: 0; background: #0E0D0B; display: flex; flex-direction: column; z-index: 5; }
.scan .cam { position: relative; flex: 1; overflow: hidden; }
.scan .cam .wall { position: absolute; inset: 0; background: #8F8167 url(../assets/tex/paper.png); background-size: 220px; background-blend-mode: multiply; }
.scan .plaque { position: absolute; left: 50%; top: 46%; width: 54%; transform: translate(-50%, -50%) rotate(-2deg); background: #F5EEDD; border-radius: 10px; padding: 12px; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); }
.scan .plaque svg { width: 100%; height: auto; display: block; }
.scan .plaque .pl { font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; text-align: center; font-size: 15px; margin-top: 8px; letter-spacing: .05em; }
.scan .plaque .pc { font-family: var(--mono); text-align: center; font-size: 13px; color: var(--ink-2); }
.scan .vf { position: absolute; left: 50%; top: 46%; width: 66%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.scan .vf i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.scan .vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.scan .vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.scan .vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.scan .vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.scan .vf.ok i { border-color: #4ADE80; }
.scan .bar { flex: none; padding: 16px; color: #fff; text-align: center; font-size: 14.5px; background: #0E0D0B; }
.scan .bar b { display: block; font-size: 17px; margin-bottom: 4px; }

/* stamp + souvenir */
.stampbig { width: 200px; height: 200px; margin: 20px auto 10px; position: relative; }
.inkstamp { width: 100%; height: 100%; color: var(--red); }
.collect-line { text-align: center; font-size: 14px; color: var(--ink-3); }
.flipwrap { perspective: 1200px; width: min(300px, 82%); margin: 8px auto 12px; aspect-ratio: 5 / 7; cursor: pointer; }
.flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; overflow: hidden; }
.face.front { background: var(--ochre-tint); border: 2px solid var(--ink); display: flex; flex-direction: column; }
.face.back { transform: rotateY(180deg); background: var(--blue); color: #fff; padding: 18px; display: flex; flex-direction: column; }
.khay { height: 26px; flex: none; }
.face.front .art { flex: 1; display: grid; place-items: center; }
.face.front .art svg { width: 62%; }
.face.front .lab { padding: 10px 16px 14px; text-align: center; }
.face.front .lab b { display: block; font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 40px; line-height: .9; text-transform: uppercase; }
.face.front .lab span { font-family: var(--mono); font-size: 13px; }
.face.back h4 { margin: 0; font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 32px; text-transform: uppercase; line-height: .9; }
.face.back dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; }
.face.back dt { opacity: .7; }
.face.back dd { margin: 0; font-weight: 700; }
.face.back .mini { margin-top: auto; }
.fliphint { text-align: center; font-size: 12.5px; color: var(--ink-3); }

/* collection */
.passport { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pslot { aspect-ratio: 1 / 1.08; border-radius: 12px; border: 1.5px dashed #CFC5B2; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-3); position: relative; padding: 4px; text-align: center; }
.pslot svg { width: 32px; height: 32px; color: #B9AF9C; }
.pslot.got { border: 2px solid var(--ink); background: var(--ochre-tint); color: var(--ink); }
.pslot.got svg { color: var(--ink); }
.pslot.got::after { content: "✓"; position: absolute; top: 5px; right: 7px; font-size: 13px; color: #1E7A3F; }
.pslot.event { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; justify-content: flex-start; padding: 12px; gap: 12px; border: 2px solid var(--ink); background: #1A1712; color: #fff; text-align: left; }
.pslot.event svg { color: var(--hi); width: 40px; height: 40px; }
.pslot.event b { display: block; font-size: 14px; }
.pslot.event span { font-weight: 500; font-size: 12px; opacity: .8; }
.counter { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.counter b { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 52px; line-height: .8; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .18); padding: 10px 16px 18px; z-index: 6; transform: translateY(105%); }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #D7CFBF; margin: 0 auto 12px; }
.sheet img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }

/* share & tips */
.sharecard { border-radius: 18px; overflow: hidden; background: var(--ink); color: #fff; position: relative; }
.sharecard img { width: 100%; height: 190px; object-fit: cover; opacity: .92; }
.sharecard .sc { padding: 14px 16px 16px; }
.sharecard .sc b { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 34px; text-transform: uppercase; line-height: .9; display: block; }
.sharecard .sc span { font-size: 13px; opacity: .8; }
.link { display: flex; align-items: center; gap: 8px; margin-top: 12px; background: var(--glass-2); border-radius: 12px; padding: 10px 12px; font-family: var(--mono); font-size: 13px; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.field .in { background: #fff; border: 1.5px solid var(--glass-line); border-radius: 12px; padding: 12px; font-size: 15px; min-height: 46px; }
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.pipeline div { background: #fff; border: 1.5px solid var(--glass-line); border-radius: 12px; padding: 10px 6px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.pipeline div b { display: block; font-size: 20px; color: var(--ink); font-weight: 800; }
.pipeline div.now { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }

/* operator */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { background: #fff; border: 1.5px solid var(--glass-line); border-radius: 14px; padding: 12px; }
.kpi b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.kpi span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.splitbar { display: flex; height: 40px; border-radius: 10px; overflow: hidden; margin: 8px 0 6px; }
.splitbar div { display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.legend { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sect { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 8px; }
.phases { display: grid; gap: 8px; }
.phz { background: #fff; border: 1.5px solid var(--glass-line); border-radius: 14px; padding: 12px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.phz .n { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; }
.phz b { display: block; font-size: 14.5px; }
.phz span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.money div { background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 10px; }
.money b { display: block; font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 30px; line-height: .9; }
.money span { font-size: 11.5px; opacity: .8; line-height: 1.3; display: block; margin-top: 4px; }

/* stand */
.standart { display: block; width: 100%; max-width: 300px; margin: 0 auto; }

/* ---------------- desk notes (paper commentary beside or over the app) */
.note { position: relative; background: var(--paper-3); padding: 18px 18px 16px; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 16px 26px -16px rgba(60, 40, 10, .6); font-family: var(--serif); }
.note .layer { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.note .layer .num { background: var(--blue); color: #fff; font-family: var(--display); font-stretch: 75%; font-weight: 800; padding: 2px 7px 1px; font-size: 12px; }
.note h3 { font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 40px; line-height: .88; margin: 10px 0 8px; }
.note p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.42; }
.note .who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.note .who span { font-family: var(--ui); font-size: 11.5px; font-weight: 700; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 9px; }
.note .src { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
.notechip { position: absolute; z-index: 8; right: 12px; bottom: 12px; height: 38px; border-radius: 999px; border: 2px solid var(--ink); background: var(--hi); font-family: var(--ui); font-weight: 800; font-size: 13px; padding: 0 14px; display: none; align-items: center; gap: 6px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.notesheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; padding: 0 10px 10px; transform: translateY(110%); }
.notesheet .note { border-radius: 4px; }
.notesheet .close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-family: var(--ui); font-weight: 800; font-size: 13px; }
.scrim { position: absolute; inset: 0; background: rgba(25, 23, 19, .35); z-index: 8; opacity: 0; pointer-events: none; }
.scrim.on { pointer-events: auto; }

/* honesty panel */
#honest { position: fixed; inset: 0; z-index: 60; display: none; }
#honest.on { display: block; }
#honest .bg { position: absolute; inset: 0; background: rgba(25, 23, 19, .45); }
#honest .panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow: auto; background: var(--paper-3); padding: 22px 20px 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
#honest h2 { font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 38px; line-height: .9; margin: 0 0 12px; }
#honest h4 { font-family: var(--ui); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 4px; }
#honest ul { margin: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.45; }
#honest .x { position: absolute; top: 12px; right: 12px; }

/* ---------------- end */
.endgrid { display: grid; gap: 10px; margin-top: 16px; grid-template-columns: repeat(4, 1fr); max-width: 520px; }
.endgrid button { height: 54px; border: 2px solid var(--ink); background: var(--paper-3); font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; gap: 3px; }
.endgrid button small { font-family: var(--mono); font-stretch: 100%; font-weight: 400; font-size: 10px; text-transform: none; }

/* ---------------- desktop: the desk */
@media (min-width: 900px) {
  :root { --rail-h: 64px; --pager-h: 72px; }
  .rail { padding: 0 28px; gap: 22px; }
  .brand b { font-size: 17px; }
  .pager { padding: 0 28px; }
  .doc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; padding: 3vh 6vw; gap: 4vw; }
  .title { font-size: clamp(80px, 9.2vw, 150px); }
  .lede { font-size: 23px; max-width: 30ch; }
  .cut { width: min(100%, 560px); }
  .cut img { max-height: 60dvh; }
  .doc.titlecard { grid-template-columns: 1fr; align-items: end; padding-bottom: 5vh; }
  .titlecard .postcard { width: min(46vw, 640px); top: 6%; right: 5%; }
  .appwrap { grid-template-columns: minmax(0, 1fr) 410px minmax(0, 1fr); align-items: center; padding: 2vh 3vw; gap: 3vw; }
  .phone { grid-column: 2; height: min(calc(100dvh - var(--rail-h) - var(--pager-h) - 4vh), 860px); aspect-ratio: auto; border-radius: 44px; border: 10px solid #15130F; box-shadow: 0 0 0 2px #3A352C, 0 40px 60px -30px rgba(40, 25, 5, .75); }
  .phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 92px; height: 24px; border-radius: 14px; background: #15130F; transform: translateX(-50%); z-index: 30; }
  .screen .sbar { padding-top: 14px; height: 66px; }
  .desk-l { grid-column: 1; justify-self: end; width: 100%; max-width: 360px; }
  .desk-r { grid-column: 3; justify-self: start; width: 100%; max-width: 380px; }
  .desk-l .cut { width: 100%; }
  .desk-l .cut img { max-height: 46dvh; }
  .notechip, .notesheet { display: none !important; }
}
@media (max-width: 899px) {
  .desk-l { display: none; }
  .desk-r { display: none; }
  .notechip { display: inline-flex; top: 9px; bottom: auto; right: 10px; height: 34px; padding: 0 11px; font-size: 12px; }
  .screen .sbar .chip { display: none; }
  .screen .sbar { padding-right: 150px; }
  .stamp-mark { top: auto !important; bottom: 8%; right: 7% !important; }
  .endgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .endgrid button { font-size: 12px; height: 50px; }
  .titlecard .postcard.endmark { width: 40vw; top: 2%; right: 4%; }
  .line .lbl { display: none; }
  .brand b { display: none; }
  .rail-btn span { display: none; }
  .rail-btn { padding: 0 9px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .title { font-size: clamp(46px, 13vw, 90px); }
  .lede { font-size: 17px; margin-top: 10px; }
  .cut img { max-height: 32dvh; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }