:root{
  --ink:#15120E; --ink2:#221D17; --line:#3A3128; --parch:#F2EADB; --body:#D2C6B1; --muted:#A89B85;
  --brass:#C9913F; --poppy:#A8322A;
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'IBM Plex Sans', Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--parch);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font-family:inherit}
[hidden]{display:none !important}

/* ---------- PIN gate ---------- */
.gate{position:fixed;inset:0;display:flex;flex-direction:column;padding:clamp(88px,14vh,150px) clamp(20px,6vw,112px) clamp(20px,5vh,64px);overflow:auto}
.gate-bg{position:fixed;z-index:0;inset:0;background:
  linear-gradient(90deg, rgba(21,18,14,.97) 0%, rgba(21,18,14,.84) 44%, rgba(21,18,14,.2) 100%),
  url('/cover.jpg') center/cover no-repeat;}
@media (max-width:760px){ .gate-bg{background:linear-gradient(180deg, rgba(21,18,14,.35) 0%, rgba(21,18,14,.9) 55%, rgba(21,18,14,.98) 100%), url('/cover.jpg') 30% center/cover no-repeat} }
.gate-logo{position:fixed;left:clamp(24px,6vw,112px);top:clamp(24px,5vw,80px);width:44px;height:auto;z-index:1}
.gate-inner{position:relative;margin-top:auto;max-width:1040px;display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);padding-bottom:clamp(28px,5vh,64px)}
.eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
.gate h1{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(40px,min(7.2vw,12vh),112px);line-height:.98;color:var(--parch)}
.lead{margin:0;font-size:clamp(17px,1.6vw,22px);line-height:1.45;color:var(--body);max-width:620px}
#pin-form{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.pin{display:flex;gap:10px}
.pin input{width:clamp(46px,6vw,64px);height:clamp(54px,min(7.4vw,12vh),78px);border-radius:10px;border:1px solid rgba(242,234,219,.28);
  background:rgba(21,18,14,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--parch);
  font:600 clamp(26px,3vw,34px)/1 var(--sans);text-align:center;caret-color:var(--brass);outline:none;transition:border-color .2s, box-shadow .2s}
.pin input:focus{border-color:var(--brass);box-shadow:0 0 0 4px rgba(201,145,63,.18)}
.pin.shake{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.btn{height:56px;padding:0 28px;border:0;border-radius:10px;background:var(--brass);color:var(--ink);font-weight:600;font-size:16px;cursor:pointer;transition:filter .2s, opacity .2s}
.btn:hover{filter:brightness(1.08)} .btn:disabled{opacity:.45;cursor:default}
.btn.small{height:44px;padding:0 20px}
.msg{flex-basis:100%;margin:0;min-height:22px;font-size:15px;color:#F0A89E}
.msg.ok{color:var(--brass)}
.fine{margin:4px 0 0;font-size:13px;color:var(--muted)}
.gate-foot{position:relative;margin:0;font-size:13px;color:var(--muted)}

/* ---------- Welcome ---------- */
.welcome{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  background:radial-gradient(ellipse at center, #221D17 0%, #15120E 70%);animation:fadein .6s ease}
.welcome-name{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(56px,10vw,132px);line-height:1;color:var(--parch)}
.welcome-sub{margin:0;color:var(--body);font-size:clamp(15px,1.5vw,19px)}
.welcome.out{animation:fadeout .7s ease forwards}
@keyframes fadein{from{opacity:0}to{opacity:1}} @keyframes fadeout{to{opacity:0}}

/* ---------- Viewer ---------- */
.viewer{position:fixed;inset:0;background:#0E0C09;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stage-wrap{position:absolute;inset:0;overflow:hidden}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.progress{position:absolute;left:0;right:0;top:0;height:3px;z-index:6;background:rgba(242,234,219,.08)}
.progress span{display:block;height:100%;width:0;background:var(--brass);transition:width .4s ease}
.nav{position:absolute;left:50%;bottom:max(16px, env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:40px;background:rgba(21,18,14,.72);border:1px solid rgba(242,234,219,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:opacity .4s, transform .4s}
.viewer.idle .nav{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}
.viewer.idle{cursor:none}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(242,234,219,.06);color:var(--brass);cursor:pointer;font-size:16px}
.icon-btn:hover{background:rgba(242,234,219,.14)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.counter{min-width:76px;height:40px;border:0;background:none;color:var(--body);font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:20px}
.counter:hover{background:rgba(242,234,219,.08)}
.sep{width:1px;height:22px;background:rgba(242,234,219,.14);margin:0 4px}
.timer{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 6px 0 4px}
.timer.warn{color:#F0A89E}
.notes{position:absolute;right:16px;bottom:84px;z-index:9;width:min(460px, calc(100vw - 32px));max-height:50vh;overflow:auto;padding:18px 22px;border-radius:14px;
  background:rgba(21,18,14,.94);border:1px solid rgba(242,234,219,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);user-select:text;-webkit-user-select:text}
.notes-head,.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.notes p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.list{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:9;width:min(560px, calc(100vw - 32px));max-height:66vh;overflow:auto;padding:18px 12px 12px 22px;
  border-radius:14px;background:rgba(21,18,14,.95);border:1px solid rgba(242,234,219,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.list ol{margin:0;padding:0 0 0 30px;color:var(--muted);font-size:13px}
.list li{padding:7px 8px;border-radius:8px;cursor:pointer;color:var(--body);font-size:15px}
.list li:hover,.list li.on{background:rgba(242,234,219,.08);color:var(--parch)}
.toast{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:10;padding:10px 18px;border-radius:24px;background:rgba(21,18,14,.9);border:1px solid rgba(201,145,63,.5);color:var(--parch);font-size:14px}
.rotate{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px;text-align:center;background:rgba(14,12,9,.92)}
.rotate p{margin:0;font-family:var(--serif);font-size:28px;color:var(--parch)}
.watermark{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.watermark span{position:absolute;white-space:nowrap;font:600 22px/1 var(--sans);letter-spacing:.06em;color:rgba(160,150,130,.11);transform:rotate(-24deg);transform-origin:0 0}

/* ---------- Slide subset renderer ---------- */
.slide{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;box-sizing:border-box;font-size:32px;line-height:1.4;opacity:0;visibility:hidden;transition:opacity .55s ease, visibility 0s linear .55s}
.slide.on{opacity:1;visibility:visible;transition:opacity .55s ease}
.slide *{box-sizing:border-box;margin:0}
.slide > *{position:relative}
.slide div:not([style*="display"]){display:flex;flex-direction:column}
.slide h1{font-size:96px;font-weight:600;line-height:1.1}
.slide h2{font-size:64px;font-weight:600;line-height:1.15}
.slide h3{font-size:44px;font-weight:600;line-height:1.2}
.slide p,.slide li{overflow-wrap:break-word}
.slide ul,.slide ol{padding-left:1.2em}
.slide img{display:block;max-width:none}
.slide a{color:inherit}
.slide hr{border:none;border-top:2px solid currentColor;height:0}
.slide table{border-collapse:collapse;width:100%}
.slide th,.slide td{text-align:left;vertical-align:top;padding:.35em .6em}
.slide th{font-weight:600}
.slide x-shape{display:block;flex:none}
.slide x-shape[kind="ellipse"]{border-radius:50%}
.slide x-shape[kind="rounded"]{border-radius:16px}
.slide x-shape[kind="diamond"]{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.slide x-shape[kind="arrow-right"]{clip-path:polygon(0 30%,60% 30%,60% 0,100% 50%,60% 100%,60% 70%,0 70%)}
.slide x-shape[kind="arrow-left"]{clip-path:polygon(100% 30%,40% 30%,40% 0,0 50%,40% 100%,40% 70%,100% 70%)}
.slide x-shape[kind="arrow-down"]{clip-path:polygon(30% 0,70% 0,70% 60%,100% 60%,50% 100%,0 60%,30% 60%)}
.slide x-shape[kind="arrow-up"]{clip-path:polygon(30% 100%,70% 100%,70% 40%,100% 40%,50% 0,0 40%,30% 40%)}
.slide svg.xi{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.slide svg.xc{flex:none;overflow:visible}
.slide svg.xc-pinned{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}

@media print{ body > *:not(.print-block){display:none !important} .print-block{display:flex !important} }
.print-block{display:none;position:fixed;inset:0;align-items:center;justify-content:center;font:20px var(--sans);color:#000;background:#fff}

.gate > *:not(.gate-bg){z-index:1}
@media (max-height:480px){ .gate .fine,.gate-foot{display:none} .gate-inner{gap:10px;padding-bottom:0} .lead{font-size:15px} }