html,body{height:100%}
body.ix{overflow:hidden;display:flex;flex-direction:column;height:100dvh}
.ix .bar{width:min(94vw,860px);max-width:none;flex:none;padding:10px 2px}
.barr{display:flex;gap:8px;align-items:center}
.lnk{font:500 13px var(--sans);letter-spacing:.04em;background:none;border:1px solid var(--ink);padding:8px 14px;color:var(--ink);cursor:pointer;min-height:36px}
.lnk:hover{background:var(--ink);color:#fff}
.ix .bar a{padding:8px 14px;min-height:36px;display:inline-flex;align-items:center}
.ix main{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;position:relative;overflow:hidden;touch-action:pan-y}
.ix .slot{display:none;flex:none;width:min(94vw,calc((100dvh - 132px)*.8),860px)}
.ix .slot.on{display:block;animation:in .35s ease both}
.ix .slot.on.back{animation-name:inb}
@keyframes in{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes inb{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.ctl{flex:none;display:flex;align-items:center;gap:14px;width:min(94vw,860px);margin:0 auto;padding:10px 2px calc(12px + env(safe-area-inset-bottom))}
.ctl button{width:48px;height:48px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:400 22px var(--sans);cursor:pointer;flex:none}
.ctl button:hover:not(:disabled){background:var(--ink);color:#fff}
.ctl button:disabled{opacity:.3;cursor:default}
.prog{flex:1;display:flex;flex-direction:column;gap:6px;align-items:center;font:500 12px var(--sans);letter-spacing:.14em}
.progbar{width:100%;height:3px;background:var(--line)}.progbar i{display:block;height:100%;width:0;background:var(--ink);transition:width .3s}
.menu{position:fixed;inset:0;background:rgba(11,11,11,.6);z-index:20;display:flex;justify-content:center;align-items:flex-start;padding:4vh 3vw}
.menu[hidden]{display:none}
.menuin{background:#fff;width:min(560px,100%);max-height:92vh;overflow:auto;padding:18px 20px}
.menuhead{display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-size:22px;margin-bottom:8px}
.menu ol{list-style:none}
.menu li button{display:grid;grid-template-columns:40px 1fr;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 0;font:500 15px var(--sans);cursor:pointer;color:var(--ink)}
.menu li button:hover,.menu li.cur button{font-weight:600;background:#f3f2ef}
.menu li span{font-family:var(--serif);font-size:17px}
/* reveal items */
.rv li{cursor:pointer;position:relative}
.rv li .sub{display:none}
.rv li.open .sub{display:inline}
.rv li .tap{font:600 calc(var(--u)*1.5) var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.rv li.open .tap{display:none}
.rv li:focus-visible,.card:focus-visible,.check li:focus-visible,.btn:focus-visible,.vwrap:focus-visible,.lnk:focus-visible,.ctl button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rv .rvrow{display:flex;flex-direction:column;gap:calc(var(--u)*.4)}
.hk .card{cursor:pointer;min-height:calc(var(--u)*17);justify-content:space-between}
.hk .card .q{transition:filter .25s,opacity .25s}
.hk .card:not(.open) .q{filter:blur(calc(var(--u)*1.1));opacity:.5;user-select:none}
.hk .card .tp{font:600 calc(var(--u)*1.4) var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.hk .card.open{background:var(--ink);color:#fff}.hk .card.open .tp{display:none}
.check li{cursor:pointer}
.cb{flex:none}
.check li.done .cb{background:currentColor}
.check li.done .cb:after{content:"";position:absolute;left:28%;top:6%;width:30%;height:56%;border:solid #fff;border-width:0 calc(var(--u)*.45) calc(var(--u)*.45) 0;transform:rotate(45deg)}
.dark .check li.done .cb:after{border-color:var(--ink)}
.check li.done span:last-child{opacity:.55}
.cnt{font:600 calc(var(--u)*1.6) var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.shuf{display:flex;gap:calc(var(--u)*2.5);align-items:center;border-top:1px solid var(--ink);padding-top:calc(var(--u)*2)}
.btn{font:600 calc(var(--u)*1.7) var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;border:0;padding:calc(var(--u)*1.8) calc(var(--u)*2.6);cursor:pointer;white-space:nowrap}
.shufout{font-size:calc(var(--u)*3);line-height:1.2;font-style:italic}
.wkt tr{cursor:default}
/* video page */
.vrow{flex-direction:row;align-items:center;gap:calc(var(--u)*5);padding-top:calc(var(--u)*2);padding-bottom:calc(var(--u)*1)}
.vtext{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.vtext h2{font-size:calc(var(--u)*6.4)}
.vhint{font:600 calc(var(--u)*1.5) var(--sans)!important;letter-spacing:.14em;text-transform:uppercase}
.vwrap{position:relative;flex:none;height:calc(var(--u)*72);aspect-ratio:9/16;border:1px solid currentColor;background:#000;padding:0;cursor:pointer;overflow:hidden}
.vwrap video{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;inset:0;margin:auto;width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;background:rgba(255,255,255,.92);opacity:0;transition:opacity .2s}
.vplay:after{content:"";position:absolute;left:38%;top:28%;border-style:solid;border-width:calc(var(--u)*2.3) 0 calc(var(--u)*2.3) calc(var(--u)*3.6);border-color:transparent transparent transparent #0b0b0b}
.vwrap.paused .vplay{opacity:1}
@media (max-width:560px){.vtext h2{font-size:calc(var(--u)*6)}.vrow{gap:calc(var(--u)*3)}}
@media (prefers-reduced-motion:reduce){.ix .slot.on{animation:none}}
@media print{body.ix{overflow:visible;display:block;height:auto}.ctl,.menu{display:none}.ix .slot{display:block!important}.vrow{display:none}[data-video-page]{display:none!important}}
