:root{font-family:Arial,Helvetica,sans-serif;color:#f5f5f5;background:#17191c;color-scheme:dark;font-synthesis:none;--accent:#a7adb5;--gold:#d6b66b}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}#app{height:100dvh;display:flex;flex-direction:column;background:#17191c}.ranking-header{min-height:60px;height:60px;display:flex;align-items:center;gap:30px;padding:0 24px;border-bottom:1px solid #444a53;background:#1e2126}.back-link{font-size:12px;color:#a7adb5;white-space:nowrap;display:flex;align-items:center;gap:9px}.back-link:hover{color:#f5f5f5}.back-link>span{font-size:20px}.ranking-title{display:flex;align-items:center;gap:18px}.signature{display:block;width:100%;height:auto}.small-wordmark{display:flex;align-items:center;line-height:1}.small-wordmark .signature{width:66px;height:46px;object-fit:contain}.title-divider{height:20px;width:1px;background:#444a53}.ranking-title h1{font-size:13px;font-weight:400;letter-spacing:0;margin:0;color:#a7adb5}.channel-link{margin-left:auto;font-size:12px;color:#a7adb5}.channel-link:hover{color:#f5f5f5}.channel-link span{margin-left:5px}
#toolbar{min-height:53px;padding:8px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #1e2126;background:#17191c}.toolbar-group{display:flex;align-items:center;gap:7px}#toolbar button{height:33px;padding:0 12px;border:1px solid #444a53;border-radius:6px;background:#1e2126;color:#f5f5f5;font-size:11px;white-space:nowrap;transition:background-color 1s linear,color 1s linear,border-color 1s linear}#toolbar button:hover{background:#444a53}#toolbar button:disabled{opacity:.28;cursor:default}#toolbar .icon-button{width:34px;padding:0;font-size:22px}#toolbar button span{margin-left:7px}.tool-separator{width:1px;height:18px;background:#444a53;margin:0 7px}.size-control{font-size:11px;display:flex;align-items:center;gap:9px;color:#a7adb5}.size-control input{width:74px;accent-color:var(--accent);cursor:pointer}.size-control output{width:35px;font-variant-numeric:tabular-nums;color:#a7adb5}
#viewport{flex:1;position:relative;min-height:0;overflow:hidden;background:#17191c;touch-action:none}#stage{position:absolute;width:1673px;height:940px;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:50% 50%;overflow:hidden;background:#17191c;isolation:isolate;user-select:none;-webkit-user-select:none;touch-action:none}#background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}#goatPatch{position:absolute;left:180px;top:459px;width:80px;height:79px;background:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none}#goatPatch img{height:77px;width:auto;max-width:76px;object-fit:contain}#heads{position:absolute;inset:0;pointer-events:none}.head{position:absolute;display:block;border:0;padding:0;margin:0;background:transparent;transform:translate(-50%,-50%);cursor:grab;touch-action:none;pointer-events:auto;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 1.2px 1.1px #0005);transition:filter 1s linear;outline-offset:4px}.head img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none}.head.dragging{cursor:grabbing;filter:drop-shadow(0 3px 3px #0006)}.head:active{cursor:grabbing}.head:focus:not(:focus-visible){outline:none}body.dragging,body.dragging *{cursor:grabbing!important}.ranking-footer{height:32px;min-height:32px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #1e2126;background:#17191c;font-size:10px;color:#a7adb5}
#toast{position:fixed;left:50%;bottom:48px;transform:translate(-50%,10px);border:1px solid #444a53;background:#1e2126f2;border-radius:7px;padding:11px 16px;max-width:90vw;color:#f5f5f5;font-size:12px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:10000}#toast.show{opacity:1;transform:translate(-50%,0)}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#17191c;color:#a7adb5;font-size:13px;z-index:20}.spinner{height:18px;width:18px;border-radius:50%;border:2px solid #444a53;border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
#filmWindow{position:fixed;right:20px;bottom:48px;width:min(400px,calc(100vw - 24px));border:1px solid #444a53;border-radius:9px;overflow:hidden;box-shadow:0 12px 48px #0008;z-index:100;background:#17191c}#filmWindow.large{width:min(560px,calc(100vw - 24px))}#filmHandle{display:flex;align-items:center;gap:8px;height:37px;padding:0 5px 0 10px;background:#1e2126;cursor:move;touch-action:none;user-select:none}.grip{color:#a7adb5;font-size:21px}.film-title{font-size:11px;color:#f5f5f5;pointer-events:none}.film-buttons{margin-left:auto;display:flex;gap:2px}.film-buttons button{border:0;background:transparent;color:#f5f5f5;width:30px;height:29px;border-radius:4px;font-size:18px}.film-buttons button:hover{background:#444a53}.film-content{aspect-ratio:16/9;min-height:200px;background:#000}.film-content iframe{height:100%;width:100%;display:block;border:0}#filmError{font-size:11px;line-height:1.5;padding:12px;margin:0;color:#f5f5f5}#filmError a{color:var(--accent);text-decoration:underline}
#subGate{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid #444a53;border-radius:12px;background:#1e2126;color:#f5f5f5;padding:35px 38px;box-shadow:0 24px 100px #0008;text-align:left}#subGate::backdrop{background:#111315bd;backdrop-filter:blur(7px)}.gate-mark{width:92px;margin-bottom:26px}.gate-mark .signature{width:100%;height:auto}.gate-eyebrow{font-size:13px;line-height:1.5;color:#a7adb5;margin:0 0 14px;letter-spacing:.025em}#subGate h2{font-size:59px;line-height:.95;letter-spacing:-.06em;margin:0 0 25px;font-weight:900}.gate-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gate-actions button,.gate-actions a{min-height:48px;border:1px solid #a7adb5;border-radius:6px;padding:12px 17px;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:#f5f5f5;background:transparent}.gate-actions #gateYes{border-color:#a7adb5;background:#a7adb5;color:#1e2126}.gate-actions #gateYes:hover{background:#f5f5f5}.gate-actions a:hover{background:#a7adb540}.gate-actions span{font-size:21px;font-weight:400}.gate-back{display:inline-block;font-size:11px;color:#a7adb5;margin-top:25px}.gate-back:hover{color:#f5f5f5}#gateReturn{font-size:11px;line-height:1.5;color:#a7adb5;margin:17px 0 -8px}.no-script{position:fixed;inset:0;background:#17191c;padding:60px;color:#f5f5f5;z-index:1000}.no-script a{color:var(--accent)}
@media(max-width:800px){.ranking-header{padding:0 15px;gap:20px}.channel-link{display:none}.ranking-title{gap:12px}#toolbar{padding:8px 15px}.ranking-footer{padding:0 15px}.ranking-footer>span:first-child{display:none}#filmWindow{right:12px;bottom:44px}.size-control input{width:58px}}
@media(max-width:540px){.ranking-header{height:52px;min-height:52px;gap:18px}.ranking-title h1{font-size:11px}.small-wordmark .signature{width:59px;height:41px}.title-divider{display:none}.back-link{font-size:11px}#toolbar{min-height:82px;gap:8px;flex-wrap:wrap;padding:7px 12px}#toolbar .toolbar-group{justify-content:space-between;flex:1}#toolbar .toolbar-group:first-child{flex:0 0 auto}.size-control{gap:6px}.size-control input{width:54px}#toolbar .tool-separator{margin:0 3px}#toolbar button{font-size:10px;padding:0 9px}.ranking-footer{height:29px;min-height:29px;font-size:9px;justify-content:center}#filmWindow{bottom:41px}.film-content{aspect-ratio:16/9}#subGate{padding:29px 28px}#subGate h2{font-size:55px}.gate-mark{margin-bottom:24px}}

a,.film-buttons button,.gate-actions button,.gate-actions a{transition:color 1s linear,background-color 1s linear,border-color 1s linear,text-decoration-color 1s linear}
.back-link:hover,.back-link:focus-visible,.channel-link:hover,.channel-link:focus-visible,.gate-back:hover,.gate-back:focus-visible,#filmError a:hover,#filmError a:focus-visible{color:var(--gold)}
#toolbar button:not(:disabled):hover,#toolbar button:not(:disabled):focus-visible,.film-buttons button:hover,.film-buttons button:focus-visible,.gate-actions #gateYes:hover,.gate-actions #gateYes:focus-visible,.gate-actions #gateNo:hover,.gate-actions #gateNo:focus-visible{background:var(--gold);border-color:var(--gold);color:#17191c}
#toolbar button:disabled:hover{background:#1e2126}
.size-control input{transition:accent-color 1s linear}.size-control input:hover,.size-control input:focus-visible{accent-color:var(--gold)}
.head:hover,.head:focus-visible{filter:drop-shadow(0 0 3px var(--gold)) drop-shadow(0 1.2px 1.1px #0005)}
.small-wordmark{position:relative}.small-wordmark .signature{opacity:0}
.small-wordmark::after{content:"";position:absolute;inset:0;background:#f5f5f5;-webkit-mask:url('/assets/brand/signature-light.svg') center/contain no-repeat;mask:url('/assets/brand/signature-light.svg') center/contain no-repeat;opacity:1;pointer-events:none;transition:background-color 1s linear}
.small-wordmark:hover::after,.small-wordmark:focus-visible::after{background:var(--gold)}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.ranking-actions{justify-content:flex-end;flex-wrap:wrap}
#stageScrollCanvas{display:contents}.results-mobile-hint{display:none}
#toolbar .submit-button{background:#f5f5f5;border-color:#f5f5f5;color:#17191c;font-weight:700;padding:0 15px}
#voteMessage{margin:0;padding:11px 24px;border-bottom:1px solid #444a53;color:#f5f5f5;background:#292b2f;font-size:12px;line-height:1.5;flex-shrink:0}
#communityBar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 24px;border-bottom:1px solid #444a53;background:#1e2126;flex-shrink:0}
#communityBar h2{font-size:19px;letter-spacing:-.035em;margin:0 0 5px}
#communityBar p{margin:0;font-size:12px;color:#a7adb5;font-variant-numeric:tabular-nums}
#backToMine{border:1px solid #a7adb5;border-radius:6px;background:transparent;padding:10px 14px;color:#f5f5f5;font-size:12px;transition:background-color 1s linear,color 1s linear,border-color 1s linear}
#backToMine:hover,#backToMine:focus-visible{background:var(--gold);border-color:var(--gold);color:#17191c}
.results-mode .edit-controls,.results-mode #reset{display:none!important}
.results-mode #toolbar{justify-content:flex-end}
.results-mode .head{cursor:default}
.results-mode .head:hover,.results-mode .head:focus-visible{filter:drop-shadow(0 1.2px 1.1px #0005)}
.head.needs-tier{filter:drop-shadow(0 0 5px var(--gold))}
.community-badge{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:104px;min-height:46px;padding:5px 3px;border:1px solid #0005;border-radius:5px;box-shadow:0 2px 5px #0003;color:#111;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:16px;line-height:19px;text-align:center;pointer-events:none;letter-spacing:-.025em}
.community-badge>span{display:block;white-space:nowrap}.community-badge>span+span{font-size:14px;line-height:17px}
@media(max-width:800px){#toolbar{flex-wrap:wrap}#voteMessage{padding:10px 15px}#communityBar{padding:12px 15px}.ranking-actions{margin-left:auto}}
@media(max-width:540px){#toolbar{padding:8px 12px;min-height:116px;gap:8px}#toolbar .toolbar-group:first-child{flex:1 1 100%;justify-content:flex-start}#toolbar .ranking-actions{flex:1 1 100%;justify-content:flex-start;gap:6px}#toolbar .submit-button{padding:0 10px}.results-mode #toolbar{min-height:49px}.results-mode #toolbar .ranking-actions{justify-content:flex-end}#communityBar{gap:10px}#communityBar h2{font-size:17px}#backToMine{font-size:10px;padding:10px 8px}.ranking-footer #rankingHint{display:none}}
@media(max-width:540px){.results-mode #viewport{overflow:auto;touch-action:pan-x pan-y}.results-mode #stageScrollCanvas{display:block;position:relative;width:1254.75px;height:705px;overflow:hidden}.results-mode #stage{left:0!important;top:0!important;transform:scale(.75)!important;transform-origin:top left!important;touch-action:pan-x pan-y}.results-mode .head{touch-action:pan-x pan-y}.results-mode #communityBar .results-mobile-hint{display:block;font-size:10px;line-height:1.4;margin-top:6px;max-width:195px}#communityBar{align-items:center}#communityBar>div{min-width:0}.results-mode #backToMine{max-width:140px;line-height:1.4}}

/* Vector arrows render identically instead of using platform emoji fonts. */
.ui-arrow{display:inline-block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em;flex:none;pointer-events:none}
