:root{--bg:#08090b;--fill:#14171c;--fill-2:#1b1f26;--line:#20242a;--edge:#363c46;--text:#f4f6f9;--mid:#a6adb9;--accent:#e8a33c;--sans:"IBM Plex Sans KR", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;--mono:"Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--bar:34px}*{box-sizing:border-box;border-radius:0;margin:0;padding:0}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);font:400 13px/1.5 var(--sans);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}#app,#stage{height:100%}#stage{grid-template-rows:minmax(0, 1fr) var(--bar);display:grid}#frame{min-width:0;min-height:0;position:relative}#view{touch-action:none;width:100%;height:100%;display:block}#fail{color:var(--mid);place-items:center;display:grid;position:absolute;inset:0}#fail[hidden]{display:none}#views{border:1px solid var(--edge);background:#08090be0;display:flex;position:absolute;top:12px;right:12px}#views button{border:0;border-right:1px solid var(--edge);color:var(--mid);white-space:nowrap;cursor:pointer;background:0 0;padding:7px 12px;font-size:12px;font-weight:500}#views button:last-child{border-right:0}#views button:hover{background:var(--fill);color:var(--text)}#views button.on{background:var(--fill-2);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}#views button:last-of-type{border-right:0}#fly-how{border:1px solid var(--edge);width:max-content;max-width:270px;color:var(--mid);pointer-events:none;background:#08090be6;margin:0;padding:9px 12px;font-size:11.5px;line-height:1.5;display:none;position:absolute;top:calc(100% + 7px);right:-1px}#views:has(#fly:hover,#fly:focus-visible,#fly.on) #fly-how{display:block}body.touch #fly,body.touch #fly-how{display:none!important}body.touch #whole{border-right:0}#bar{border-top:1px solid var(--line);background:var(--bg);align-items:center;gap:20px;padding:0 16px;display:flex;overflow:hidden}.pick{color:var(--mid);align-items:center;gap:10px;font-size:11px;display:flex}.seg{border:1px solid var(--edge);grid-template-columns:repeat(3,auto);display:grid}.seg button{border:0;border-right:1px solid var(--edge);color:var(--mid);cursor:pointer;background:0 0;padding:5px 10px;font-size:11px;font-weight:500;line-height:1}.seg button:last-child{border-right:0}.seg button:hover{background:var(--fill);color:var(--text)}.seg button.on{background:var(--text);color:var(--bg)}#how{color:var(--mid);white-space:nowrap;font-size:11px}#stats{color:var(--mid);font:400 10.5px var(--mono);white-space:nowrap;margin-left:auto}#fps{text-align:right;min-width:6ch;color:var(--mid);font:400 10.5px var(--mono)}body.touch .mouse-only{display:none}.check{color:var(--mid);white-space:nowrap;cursor:pointer;flex:none;align-items:center;gap:8px;font-size:11px;font-weight:500;display:flex}.check:hover{color:var(--text)}.check input{appearance:none;border:1px solid var(--edge);cursor:pointer;flex:none;place-items:center;width:13px;height:13px;margin:0;display:grid}.check:hover input{border-color:var(--text)}.check input:after{content:"";background:var(--bg);opacity:0;width:9px;height:7px;-webkit-mask:var(--tick) center / contain no-repeat;-webkit-mask:var(--tick) center / contain no-repeat;mask:var(--tick) center / contain no-repeat}.check input:checked{background:var(--accent);border-color:var(--accent)}.check input:checked:after{opacity:1}.check input:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.check .short{display:none}:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")}@media (width<=640px){#bar{gap:12px;padding:0 10px}#how,#stats,.check .long{display:none}.check .short{display:inline}.pick>span{display:none}#views button{padding:6px 9px;font-size:11px}}@media (width<=420px){#fps{display:none}#bar .seg button{padding:5px 8px}}