:root{--bg: #040405;--ink: #f3f2ee;--dim: rgba(243, 242, 238, .5);--faint: rgba(243, 242, 238, .2);--mono: "Fragment Mono", "Pretendard Variable", ui-monospace, monospace;--pad: 14px}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font:400 11px/1.45 var(--mono);letter-spacing:.01em;text-transform:uppercase;-webkit-font-smoothing:antialiased}button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}b{font-weight:400}.dim{color:var(--dim)}[hidden]{display:none!important}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.top,.works,.chips,.bottom{position:fixed;z-index:5;transition:opacity .5s ease}body[data-mode=intro] .views,body[data-mode=intro] .works,body[data-mode=intro] .chips,body[data-mode=intro] .bottom,body:not([data-mode=read]) .now,body:not([data-mode=read]) .navrow,body:not([data-mode=read]) .chips{opacity:0;pointer-events:none}.now,.navrow{transition:opacity .5s ease}body[data-mode=read] .works{top:54px;mix-blend-mode:difference}body[data-mode=read] .works:before{display:none}.top{mix-blend-mode:difference;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:12px;padding:var(--pad);pointer-events:none}.top>*{pointer-events:auto}.id{grid-column:1 / span 4;display:flex;flex-direction:column;min-width:0;transition:opacity .5s ease}body[data-mode=intro] .id{opacity:0}.id span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.views{grid-column:8 / span 5;justify-self:end;white-space:nowrap;align-self:start;display:flex;gap:2px;transition:opacity .5s ease}.views button{padding:2px 8px}.views button:hover,.views button.on{background:var(--ink);color:#000}.works{top:76px;left:var(--pad);width:330px}.works:before{content:"";position:absolute;z-index:-1;inset:-76px -70px -40px -14px;background:radial-gradient(ellipse at 30% 45%,#040405d1 30%,#04040500 72%);pointer-events:none}.works-head{display:flex;justify-content:space-between;padding:0 6px 6px;margin-bottom:4px;border-bottom:1px solid var(--faint);color:var(--dim)}.work{display:grid;grid-template-columns:28px minmax(0,1fr) 62px;width:100%;padding:1px 6px;text-align:left;white-space:nowrap;color:var(--dim)}.work-group{display:flex;justify-content:space-between;margin:12px 0 3px;padding:0 6px 3px;border-bottom:1px solid var(--faint);color:var(--ink)}.work-group:first-child{margin-top:6px}.work .nm{overflow:hidden;text-overflow:ellipsis}.work.on{color:var(--ink)}.work.on .nm:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;background:currentColor;vertical-align:1px}.work:hover{background:var(--ink);color:#000}.chips{right:var(--pad);bottom:132px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.chips button{padding:2px 8px;background:var(--ink);color:#000}.chips button:hover{background:#000;color:var(--ink);outline:1px solid var(--ink)}.tube{position:fixed;z-index:3;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#000;opacity:0;pointer-events:none;transition:opacity .4s ease;will-change:transform}.tube.on{opacity:1;pointer-events:auto}.tube iframe{display:block;width:100%;height:100%;border:0}.live{position:fixed;z-index:3;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#fff;opacity:0;pointer-events:none;filter:brightness(.91) contrast(1.03) saturate(1.05);transition:opacity .28s ease;will-change:transform}.live.on{opacity:1;pointer-events:auto}.live iframe{display:block;width:100%;height:100%;border:0}.scenes{position:fixed;z-index:2;left:0;top:0;width:236px;opacity:0;pointer-events:none;transition:opacity .5s ease}.scenes.on{opacity:1;pointer-events:auto}.scenes-head{display:flex;justify-content:space-between;padding:0 6px 6px;margin-bottom:4px;border-bottom:1px solid var(--faint);color:var(--dim)}.scenes ol{margin:0;padding:0;list-style:none}.scene{display:grid;grid-template-columns:28px minmax(0,1fr);width:100%;padding:1px 6px;text-align:left;color:var(--dim)}.scene.on{color:var(--ink)}.scene.on .nm:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;background:currentColor;vertical-align:1px}.scene:hover{background:var(--ink);color:#000}.scenes .nt{display:none;margin:0;padding:2px 6px 7px 34px;color:var(--dim);text-transform:none;word-break:keep-all}.scenes li.on .nt{display:block}.watch{position:fixed;z-index:5;left:var(--pad);bottom:48px;width:330px}.watch:before{content:"";position:absolute;z-index:-1;inset:-40px -70px -30px -14px;background:radial-gradient(ellipse at 30% 50%,#040405d1 30%,#04040500 72%);pointer-events:none}.watch-head{display:flex;justify-content:space-between;padding:0 6px 6px;margin-bottom:4px;border-bottom:1px solid var(--faint);color:var(--dim)}.watch-head span:first-child:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;background:currentColor;vertical-align:1px}.watch p{margin:0;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.watch-acts{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:8px}.watch-acts a,.watch-acts button{max-width:100%;padding:1px 6px;overflow:hidden;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}#watch-by{white-space:normal;word-break:keep-all}.watch-acts a{margin:0 0 4px 6px;padding:2px 8px;background:var(--ink);color:#000;text-transform:none;white-space:normal;overflow-wrap:anywhere}.watch-acts a:hover{background:#000;color:var(--ink);outline:1px solid var(--ink)}.watch-acts button:hover{background:var(--ink);color:#000}@media (max-height: 620px){body[data-watching] .works{opacity:0;pointer-events:none}}.bottom{left:0;right:0;bottom:0;padding:30px var(--pad) var(--pad)}.bottom:before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:100%;background:linear-gradient(to top,#040405d1,#04040500);transition:height .5s ease;pointer-events:none}body:not([data-mode=read]) .bottom{pointer-events:none}body:not([data-mode=read]) .bottom:before{height:64px}.now{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:12px;align-items:end;margin-bottom:12px}.book{grid-column:1 / span 3;display:flex;flex-direction:column;min-width:0}.book span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page{grid-column:4 / span 7;display:flex;align-items:center;gap:10px;min-width:0}#now-code{flex:none;padding:1px 7px;background:var(--ink);color:#000}#now-code:empty{display:none}#now-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#now-count{grid-column:11 / span 2;justify-self:end;white-space:nowrap;font-variant-numeric:tabular-nums}.navrow{position:relative;display:flex;align-items:flex-end;gap:10px}.arrow{flex:none;width:24px;height:24px;border:1px solid var(--faint);line-height:1}.arrow:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#000}.arrow:disabled{opacity:.3;cursor:default}.ruler{flex:1;min-width:0;display:flex;gap:8px}.seg{flex:1 1 0;min-width:0}.seg-label{display:flex;gap:6px;width:100%;margin-bottom:5px;overflow:hidden;text-align:left;white-space:nowrap;color:var(--dim)}.seg-label:hover,.seg.on .seg-label{color:var(--ink)}.ticks{display:flex;height:14px;border-bottom:1px solid var(--faint)}.seg.on .ticks{border-bottom-color:var(--ink)}.tick{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}.tick i{display:block;width:1px;height:4px;background:var(--dim)}.tick:first-child i{height:9px}.tick.past i{background:var(--ink)}.tick:hover i{height:100%;background:var(--ink)}.tick.on{background:var(--ink)}.tick.on i{visibility:hidden}.tip{position:absolute;bottom:calc(100% + 6px);transform:translate(-50%);padding:1px 7px;background:var(--ink);color:#000;white-space:nowrap;pointer-events:none}.hints{display:flex;justify-content:space-between;gap:16px;margin-top:9px;color:var(--dim);white-space:nowrap}#intro{position:fixed;z-index:4;inset:0;pointer-events:none;transition:opacity .9s ease}#intro.gone{opacity:0;pointer-events:none}#intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}.intro-cue{position:absolute;left:50%;bottom:13vh;margin:0;transform:translate(-50%);animation:blink 1.8s steps(1) infinite}@keyframes blink{50%{opacity:.25}}.tap{position:absolute;left:0;top:0;width:0;height:0}.tap b,.tap i{position:absolute;border-radius:50%}.tap b{width:8px;height:8px;margin:-4px;background:#d6d6d699;animation:tap-dot 4.5s ease-in-out infinite}.tap i{width:44px;height:44px;margin:-22px;border:1px solid rgba(214,214,214,.85);background:#d6d6d60f;opacity:0;animation:tap-ring 4.5s ease-out infinite}.tap i:nth-child(2){animation-delay:1.5s}.tap i:nth-child(3){animation-delay:3s}@keyframes tap-ring{0%{transform:scale(.25);opacity:0}30%{opacity:.5}to{transform:scale(1.1);opacity:0}}@keyframes tap-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.65}}.scroll-hint{position:fixed;z-index:6;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:4px;color:#606063d1;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .9s ease}.scroll-hint.on{opacity:1;transition-duration:.5s}.scroll-hint .mouse{position:relative;width:24px;height:38px;margin-bottom:8px;border:1.5px solid currentColor;border-radius:12px}.scroll-hint .mouse i{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:wheel 1.2s ease-in-out infinite}@keyframes wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}to{transform:translateY(12px);opacity:0}}.scroll-hint:not([data-kind=scroll]){color:#a4a4a6;mix-blend-mode:difference}.scroll-hint[data-kind=click] .mouse i{left:0;top:0;width:50%;height:40%;margin:0;border-radius:10px 0 0;animation:press 1.1s ease-in-out infinite}@keyframes press{0%,to{opacity:.15}45%{opacity:1}}.scroll-hint[data-kind=watch] .mouse{animation:breathe 2.4s ease-in-out infinite}.scroll-hint[data-kind=watch] .mouse i{display:none}.scroll-hint[data-kind=watch] .mouse:after{content:"";position:absolute;left:50%;top:50%;width:1.5px;height:56px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}@keyframes breathe{50%{opacity:.5}}@media (hover: none) and (pointer: coarse){.scroll-hint[data-kind=scroll]{display:none}}.pick{position:fixed;z-index:5;left:50%;bottom:13vh;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translate(-50%);opacity:0;pointer-events:none;transition:opacity .5s ease}body[data-mode=desk] .pick{opacity:1;pointer-events:auto}.pick-q{color:var(--dim)}.pick-row{display:flex;gap:6px}.pick button{padding:3px 12px;border:1px solid var(--faint)}.pick button:hover,.pick button:focus-visible{background:var(--ink);color:#000;border-color:var(--ink)}.desk-tap{position:fixed;z-index:4;opacity:0;pointer-events:none;transition:opacity .35s ease}.desk-tap.on{opacity:1}.intro-name{position:absolute;left:50%;bottom:calc(13vh + 30px);display:flex;flex-direction:column;align-items:center;transform:translate(-50%);text-align:center;white-space:nowrap}@media (max-width: 900px){.works,.book,.hints,.scenes{display:none}.page{grid-column:1 / span 9}#now-count{grid-column:10 / span 3}.id{grid-column:1 / span 7}.views{grid-column:6 / span 7}.seg-label span{display:none}.ruler{gap:5px}.chips{bottom:92px}.watch{right:var(--pad);bottom:14px;width:auto}}@media (max-width: 900px) and (max-height: 520px){.watch{right:auto;width:200px}}@media (prefers-reduced-motion: reduce){.intro-cue,.tap b,.scroll-hint .mouse,.scroll-hint .mouse i{animation:none}.tap i{animation:none;opacity:.5}.tap i:nth-child(1){transform:scale(.45)}.tap i:nth-child(2){transform:scale(.8)}.tap i:nth-child(3){transform:scale(1.15);opacity:.25}}