:root{--paper: #f7f2e9;--paper-2: #f1eADD;--card: #fffdf9;--ink: #2a2620;--ink-soft: #6c6459;--ink-faint: #a49a8b;--accent: #b5651d;--accent-deep: #8f4e13;--accent-wash: #f3e5d3;--line: #e6dcc9;--line-soft: #efe7d8;--shadow: 0 6px 22px rgba(70, 48, 18, .1);--shadow-lg: 0 14px 40px rgba(70, 48, 18, .16);--r: 14px;--r-lg: 20px;--maxw: 1120px;--bar-h: 62px}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--paper);color:var(--ink);font:400 17px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}input,textarea,select{font:inherit;color:inherit}a{color:var(--accent-deep)}img{max-width:100%;display:block}.topbar{position:sticky;top:0;z-index:30;height:var(--bar-h);display:flex;align-items:center;gap:16px;padding:0 clamp(14px,3vw,28px);background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.2px}.brand .reel{width:26px;height:26px;color:var(--accent);flex:0 0 auto}.brand small{display:block;font-weight:500;font-size:12px;color:var(--ink-faint);letter-spacing:0}.switch{margin:0 auto;display:flex;gap:2px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:3px}.switch button{padding:8px 18px;border-radius:999px;font-size:15px;font-weight:700;color:var(--ink-soft);transition:color .15s,background .15s}.switch button.on{background:var(--card);color:var(--accent-deep);box-shadow:0 1px 4px #4630121f}.who{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:14px}.who .name{font-weight:700;color:var(--ink)}.pill{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700;background:var(--card);box-shadow:var(--shadow)}.pill.accent{background:var(--accent);color:#fff;border-color:transparent}.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(16px,3vw,30px) clamp(14px,3vw,28px) 60px}.section-title{font-size:clamp(20px,2.4vw,26px);font-weight:800;margin:4px 0 18px}.muted{color:var(--ink-soft)}.faint{color:var(--ink-faint)}.center-empty{text-align:center;color:var(--ink-soft);padding:60px 20px}.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}.tape-card{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .14s ease,box-shadow .14s ease;display:flex;flex-direction:column}.tape-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.tape-card .poster{aspect-ratio:16/10;position:relative;background:#d9cdb6 var(--poster) center/cover}.tape-card .poster:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0000 55%,#00000047)}.tape-card .spine{position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(var(--s1),var(--s2))}.tape-card .cnt{position:absolute;right:10px;bottom:9px;z-index:1;color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5)}.tape-card .meta{padding:13px 16px 16px}.tape-card .t{font-size:18px;font-weight:800;line-height:1.2}.tape-card .yr{margin-top:4px;font-size:14px;color:var(--accent);font-weight:700}.player-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) clamp(230px,24vw,300px);gap:18px;align-items:start}.player-main{min-width:0}.player-main .video-shell,.player-main .viewer-nav{max-width:min(100%,82vh)}.viewer-side{align-self:start;position:sticky;top:76px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}@media (max-width: 820px){.player-wrap{grid-template-columns:1fr}.viewer-side{flex-direction:row;height:auto!important;position:static}.viewer-back,.viewer-full{flex-direction:row!important;width:auto!important;flex:1}}.crumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);margin-bottom:12px}.crumbs button{font-weight:700;color:var(--accent-deep)}.video-shell{position:relative;background:#17130f;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.end-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:#17130ff0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center}.end-overlay .msg{color:#f7f2e9;font-size:clamp(18px,2.4vw,23px);font-weight:700}.end-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.video-shell video{width:100%;aspect-ratio:4/3;background:#000;display:block}.video-shell .yt-host{width:100%;aspect-ratio:4/3}.video-shell .yt-host iframe,.video-shell .yt-host>div{width:100%;height:100%;border:0;display:block}.video-shell .ph{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#d9cdb6;font-size:17px}.now{margin-top:16px}.now .t{font-size:clamp(20px,2.4vw,26px);font-weight:800}.now .sub{color:var(--ink-soft);margin-top:3px}.now .bestguess{display:inline-flex;align-items:center;gap:7px;margin-top:10px;background:var(--accent-wash);color:var(--accent-deep);border-radius:999px;padding:6px 13px;font-size:14px;font-weight:700}.controls{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.viewer-back,.viewer-full{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:96px;border-radius:16px;padding:14px 10px;box-shadow:var(--shadow);text-align:center;line-height:1.15;transition:transform .1s}.viewer-back{color:var(--accent-deep);background:var(--card);border:1px solid var(--line)}.viewer-back:hover{transform:translate(-2px)}.viewer-full{border:1px solid transparent}.viewer-full:hover{transform:translateY(2px)}.viewer-back .ar,.viewer-full .ar{font-size:30px;line-height:1;font-weight:700}.viewer-back .lbl,.viewer-full .lbl{font-size:13px;font-weight:800}.btn.big{font-size:18px;padding:14px 28px}.viewer-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.viewer-prev,.viewer-next{flex:0 0 auto;min-width:160px;font-size:20px;font-weight:800;padding:18px 30px;border-radius:16px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);transition:transform .1s}.viewer-prev:hover,.viewer-next:hover{transform:translateY(-2px)}.viewer-next{background:var(--accent);color:#fff;border-color:transparent}.viewer-prev:disabled,.viewer-next:disabled{opacity:.35;box-shadow:none;transform:none}.viewer-count{color:var(--ink-soft);font-size:15px;font-weight:700;white-space:nowrap}@media (max-width: 560px){.viewer-prev,.viewer-next{min-width:0;padding:15px 18px;font-size:16px}}.btn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:11px 18px;font-size:15px;font-weight:700;box-shadow:var(--shadow);transition:transform .1s}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.4;box-shadow:none;transform:none}.btn.primary{background:var(--accent);color:#fff;border-color:transparent}.rail{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}.rail h4{margin:0;padding:14px 16px 8px;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-faint)}.rail .items{max-height:60vh;overflow-y:auto}.rail .item{border-top:1px solid var(--line-soft)}.rail .item.on{background:var(--accent-wash)}.rail .item.item-hidden{opacity:.55}.rail .item-main{display:flex;gap:11px;align-items:center;width:100%;text-align:left;padding:9px 14px;transition:background .12s}.rail .item-main:hover{background:var(--paper-2)}.rail .item-admin{display:flex;gap:8px;padding:0 14px 9px}.rail .item-admin button{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:2px 10px;font-size:12px;font-weight:700}.rail .item-admin button.danger{color:#b3402b}.rail .item .th{width:68px;height:44px;border-radius:7px;background:#d9cdb6 var(--poster) center/cover;flex:0 0 auto;position:relative}.rail .item .th .n{position:absolute;left:4px;top:3px;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}.rail .item .tx{min-width:0}.rail .item .tx .nm{font-size:14px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rail .item .tx .mt{font-size:12px;color:var(--ink-faint)}.timeline-scroll{overflow-x:auto;overflow-y:hidden;padding:8px 0 22px;-webkit-overflow-scrolling:touch}.timeline-track{position:relative;height:260px;min-width:100%}.tl-axis{position:absolute;left:0;right:0;bottom:34px;height:2px;background:var(--line)}.tl-year{position:absolute;bottom:0;transform:translate(-50%);text-align:center;color:var(--ink-faint);font-size:13px;font-weight:700}.tl-year:before{content:"";position:absolute;left:50%;bottom:26px;width:1px;height:8px;background:var(--line)}.tl-node{position:absolute;transform:translate(-50%);bottom:44px;width:108px}.tl-node button{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);transition:transform .12s}.tl-node button:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.tl-node.on button{outline:2px solid var(--accent)}.tl-node .th{aspect-ratio:16/10;background:#d9cdb6 var(--poster) center/cover}.tl-node .cap{padding:5px 7px;font-size:11px;font-weight:700;line-height:1.2;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 15px;font-size:15px;font-weight:700;color:var(--ink-soft);box-shadow:var(--shadow);transition:all .12s}.chip:hover{transform:translateY(-1px)}.chip.on{background:var(--accent);color:#fff;border-color:transparent}.chip.small{padding:5px 11px;font-size:13px;box-shadow:none}.mode-row{display:flex;align-items:center;gap:12px;margin:14px 0 6px;color:var(--ink-soft);font-size:14px}.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.toggle button{padding:6px 14px;font-size:13px;font-weight:700;color:var(--ink-soft)}.toggle button.on{background:var(--accent);color:#fff}.surface{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:26px}@media (max-width: 860px){.surface{grid-template-columns:1fr}}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow)}.panel h3{margin:0 0 14px;font-size:15px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-faint)}.field{display:flex;gap:8px}.input,textarea.input{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:11px 13px;font-size:15px}.input:focus,textarea.input:focus{outline:none;border-color:var(--accent);background:#fff}textarea.input{resize:vertical;min-height:66px}.comment{padding:12px 0;border-top:1px solid var(--line-soft)}.comment:first-of-type{border-top:none}.comment .head{display:flex;justify-content:space-between;gap:10px}.comment .who2{font-weight:800}.comment .when{color:var(--ink-faint);font-size:13px}.comment .body{margin-top:3px;white-space:pre-wrap}.tag-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.vote-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{padding:8px 14px;font-size:14px;font-weight:700;color:var(--ink-soft)}.seg button.on{background:var(--accent-wash);color:var(--accent-deep)}.hint{color:var(--ink-faint);font-size:13px;margin-top:8px}.ok-flash{color:var(--accent-deep);font-size:13px;font-weight:700}.gate-back{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#1e160c8c;display:flex;align-items:center;justify-content:center;padding:20px}.gate{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:min(400px,100%);padding:30px 28px;text-align:center}.gate .reel{width:42px;height:42px;color:var(--accent);margin:0 auto 10px}.gate h2{margin:0 0 4px;font-size:24px}.gate p{color:var(--ink-soft);margin:0 0 20px}.gate .input{margin-bottom:12px;text-align:left}.gate .err{color:#b3402b;font-size:14px;margin-bottom:10px}.gate .btn.primary{width:100%;justify-content:center;padding:13px}.demo-banner{background:var(--accent-wash);color:var(--accent-deep);text-align:center;font-size:13px;font-weight:700;padding:7px 14px}.sitetext-scroll{max-height:60vh;overflow-y:auto;padding-right:4px}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:42px;height:42px;margin:90px auto;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.editable{cursor:text;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .12s,box-shadow .12s}.editable:hover{background:var(--accent-wash);box-shadow:0 0 0 3px var(--accent-wash)}.edit-pencil{color:var(--accent);font-size:.72em;opacity:.5;vertical-align:super}.inline-edit{display:inline-block;width:auto;min-width:240px;max-width:100%;vertical-align:baseline}textarea.inline-edit{width:100%;display:block}.admin-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding:10px 12px;background:var(--accent-wash);border-radius:12px}.admin-bar .tag-admin{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-deep);margin-right:4px}.comment .del{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:2px 9px;font-size:13px;color:#b3402b;font-weight:700}.tape-card .poster.placeholder{display:flex;align-items:center;justify-content:center}.tape-card .poster.placeholder .tp-emoji{font-size:34px;opacity:.5}.tape-card.is-hidden{opacity:.5}.tape-card .tape-label{aspect-ratio:10 / 1;background:#efe7d8 var(--poster) center/cover;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}.tape-card .tape-label.placeholder{background:repeating-linear-gradient(90deg,#efe7d8,#efe7d8 10px,#e8dfcd 10px,#e8dfcd 20px)}.tape-card .tape-label .lbl-ph{font-size:11px;letter-spacing:3px;color:var(--ink-faint);opacity:.6}.tape-card.dragover{outline:2px dashed var(--accent);outline-offset:2px}.tape-admin-ctrls{display:flex;gap:10px;align-items:center;padding:0 16px 14px}.tape-admin-ctrls .grip{cursor:grab;color:var(--ink-faint);font-size:19px;line-height:1}.tape-admin-ctrls button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:3px 11px;font-size:13px;font-weight:700}.tape-admin-ctrls button.danger{color:#b3402b}
