@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#131d20;--panel:#1b272a;--line:#344244;--text:#eef1e6;--muted:#8d9b95;--lime:#daf599;--radius:12px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px 'DM Sans',system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{transition:background .18s,border-color .18s,transform .18s}button:hover{filter:brightness(1.14)}button:disabled{opacity:.4;cursor:wait}svg{width:17px;height:17px;vertical-align:middle;flex-shrink:0}header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid #ffffff0d;gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--text);font:800 24px/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:.7px}.brand>svg{width:40px;height:44px;color:var(--lime);padding:4px}.brand small{display:block;font:8px 'DM Sans',sans-serif;letter-spacing:3px;color:var(--muted);margin-top:9px}nav{display:flex;gap:5px;background:#223033;border-radius:7px;padding:4px}.nav-tab{background:transparent;border:0;border-radius:4px;font-size:11px;padding:9px 20px;color:var(--muted)}.nav-tab.active{color:var(--lime);background:#334139}.build-badge{font-size:8px;letter-spacing:1.4px;display:flex;align-items:center;gap:8px;color:#abb9ab}.build-badge i,.live-pill i{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #b1ed7380}main{max-width:1800px;margin:auto;padding:31px 4% 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;gap:20px}.eyebrow{font-size:8px;letter-spacing:2px;color:#a8b9a0;font-weight:700;margin:0 0 8px}h1{font:800 clamp(38px,4vw,58px)/1.05 'Barlow Condensed',Impact,sans-serif;margin:0;letter-spacing:-.5px}.intro>p{font-size:11px;color:var(--muted);line-height:1.9;margin:0;text-align:right}.viewport{position:relative;isolation:isolate;overflow:hidden;width:100%;height:clamp(420px,42vw,640px);border:1px solid #56696360;border-radius:var(--radius);background:#6d9f9e}.viewport>canvas{display:block;width:100%;height:100%}.preview-top{position:absolute;inset:23px 25px auto;pointer-events:none;display:flex;align-items:flex-start;gap:20px}.live-pill{display:flex;align-items:center;gap:7px;border:1px solid #ffffff50;backdrop-filter:blur(8px);padding:8px 10px;background:#18353930;border-radius:5px;font-size:7px;color:#fff;letter-spacing:1.5px}.world-heading{position:absolute;top:53px;left:0;color:#fff;text-shadow:0 2px 14px #14394660}.world-heading>span{font-size:7px;letter-spacing:1.8px}.world-heading h2{font:700 34px/1 'Barlow Condensed',Impact,sans-serif;margin:7px 0}.round-button{pointer-events:auto;border:1px solid #ffffff50;background:#18353930;backdrop-filter:blur(8px);border-radius:5px;width:33px;height:32px;margin-left:auto;display:grid;place-items:center;color:#fff}.preview-bottom{position:absolute;inset:auto 25px 21px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#fff;font-size:10px;text-shadow:0 2px 9px #0007}.pause-button{display:flex;align-items:center;gap:8px;border:1px solid #ffffff40;background:#16353b60;backdrop-filter:blur(8px);padding:9px 14px;border-radius:5px;font-size:10px;color:#fff}.pause-button>span:first-child{font-family:Arial,sans-serif;width:9px;font-weight:700}.loading{position:absolute;inset:0;background:#17292bec;display:flex;align-items:center;justify-content:center;gap:15px;font-size:12px;z-index:8;transition:opacity .3s}.loading.loaded{opacity:0;pointer-events:none}.loader{width:16px;height:16px;border-radius:50%;border:2px solid #ffffff28;border-top-color:var(--lime);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.control-deck{display:grid;grid-template-columns:1.7fr 1fr .8fr;gap:0;margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}.control-deck>section{padding:22px 23px 23px;min-width:0}.control-deck>section+section{border-left:1px solid var(--line)}.control-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:17px}.control-title h3{font-size:11px;font-weight:600;margin:0}.control-title>span{font-size:6px;letter-spacing:1.3px;color:var(--muted)}.world-buttons{display:flex;gap:8px}.world-choice{min-width:0;flex:1;background:#243236;border:1px solid #42524f;border-radius:7px;padding:9px 7px;display:flex;gap:8px;align-items:center;text-align:left;position:relative}.world-choice>span:nth-child(2){min-width:0}.world-choice b{display:block;font-size:9px;font-weight:600;line-height:1.4}.world-choice small{display:block;font-size:5px;color:#99aa99;letter-spacing:.8px;margin-top:4px}.world-choice.selected{background:#354336;border-color:#a0b57b;box-shadow:0 0 0 1px #a0b57b30}.world-choice.selected b{color:#e6f5c9}.choice-dot{width:4px;height:4px;position:absolute;top:5px;right:5px;border-radius:50%;background:transparent}.selected .choice-dot{background:var(--lime)}.world-swatch{width:34px;height:40px;overflow:hidden;flex-shrink:0;border-radius:4px;position:relative}.world-swatch:before,.world-swatch:after{content:'';position:absolute;width:60px;height:35px;transform:rotate(-24deg);bottom:-23px;left:-13px;border-radius:15px}.world-swatch:after{bottom:-12px;left:7px;transform:rotate(22deg)}.world-swatch.valley{background:linear-gradient(#8ddce6,#efebad)}.world-swatch.valley:before{background:#597f56}.world-swatch.valley:after{background:#91ae5f}.world-swatch.forest{background:linear-gradient(#26294e,#8d7eab)}.world-swatch.forest:before{background:#183e46}.world-swatch.forest:after{background:#335750}.world-swatch.citadel{background:linear-gradient(#b47e94,#f3b17b)}.world-swatch.citadel:before{background:#825a61}.world-swatch.citadel:after{background:#ae806a}.world-swatch i{position:absolute;top:5px;right:6px;background:#ffe8aa;width:6px;height:6px;border-radius:50%}.mode-buttons,.rate-buttons{display:flex;gap:4px;padding:4px;border-radius:7px;background:#111e22;border:1px solid #314144}.mode-buttons button,.rate-buttons button{min-width:0;flex:1;background:transparent;border:0;border-radius:4px;padding:8px 6px;font-size:10px;color:#a7b5aa}.mode-buttons button svg{width:12px;height:12px;margin-right:3px}.mode-buttons .selected,.rate-buttons .selected{background:#d5ec9d;color:#24362b;box-shadow:0 1px 3px #0002}.range-row{display:flex;align-items:center;gap:10px;font-size:9px;color:var(--muted);margin-top:15px;white-space:nowrap}.range-row input{width:100%;min-width:20px;accent-color:#c9e98e;height:3px;cursor:pointer}.range-row output{width:24px;text-align:right;font-size:9px;color:#d4dfc8}.rate-buttons{white-space:nowrap}.rate-buttons #step{flex:1.5;border-left:1px solid #314144;border-radius:0}.rate-buttons #step span{margin-left:3px}.inspect-link{display:flex;align-items:center;justify-content:space-between;background:transparent;border:0;width:100%;padding:13px 1px 0;font-size:9px;color:#c4d4b4}.inspect-link span{font-family:Arial,sans-serif}.animation-workbench{margin-top:30px;padding:28px;border:1px solid #405046;border-radius:var(--radius);background:linear-gradient(135deg,#23312c,#1c282c)}.animation-workbench[hidden]{display:none}.workbench-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.workbench-heading h2{font:700 30px/1.15 'Barlow Condensed',Impact,sans-serif;margin:0}.workbench-heading>p{color:#a5b19e;font-size:10px;line-height:1.9;margin:0}.frame-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.frame-card{border:1px solid #43544b;border-radius:9px;padding:0;background:#182428;overflow:hidden;text-align:left;min-width:0}.frame-card.selected{border-color:#c5df90;box-shadow:0 0 0 1px #c5df9060}.frame-card canvas{width:100%;height:auto;display:block;background-image:linear-gradient(45deg,#ffffff03 25%,transparent 25%),linear-gradient(-45deg,#ffffff03 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff03 75%),linear-gradient(-45deg,transparent 75%,#ffffff03 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.frame-card>span{display:flex;align-items:center;gap:10px;padding:12px 13px;border-top:1px solid #394940;font-size:10px}.frame-card b{font-size:8px;color:#839c77;font-weight:500}.frame-card i{font-family:Arial,sans-serif;margin-left:auto;font-style:normal;color:#c6de9d}.inspection-tools{display:flex;align-items:center;gap:24px;margin-top:22px;font-size:10px;color:#b0bfaa}.inspection-tools label,.layer-tools label{display:flex;align-items:center;gap:7px;cursor:pointer}.inspection-tools input,.layer-tools input{accent-color:#c5e38b}.inspection-tools button{margin-left:auto;padding:10px 16px;background:#c9e58f;border:0;border-radius:5px;color:#263928;font-size:10px}.layer-tools{border-top:1px solid #435148;margin-top:25px;padding-top:23px;display:flex;gap:35px}.layer-tools h3{font-size:12px;margin:0 0 6px}.layer-tools p{font-size:9px;color:var(--muted);margin:0}.layer-tools>div:last-child{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:1;font-size:9px;color:#b1bea7}footer{display:flex;justify-content:space-between;gap:20px;color:#708678;font-size:6px;letter-spacing:1.3px;padding:23px 0 25px}footer b{padding:0 8px;font-weight:400}.viewport.expanded{position:fixed;inset:0;z-index:50;width:100%;height:100dvh;border-radius:0;border:0}body.expanded{overflow:hidden}
@media(min-width:1550px){.control-deck>section{padding:25px 28px}.world-choice{padding:10px 11px}.world-choice b{font-size:11px}.world-choice small{font-size:6px}.world-swatch{width:42px;height:43px}.control-title h3{font-size:12px}.control-title>span{font-size:7px}.mode-buttons button,.rate-buttons button{padding:10px 8px;font-size:11px}}
@media(max-width:1100px){.control-deck{grid-template-columns:1.5fr 1fr}.wing-controls{grid-column:1/-1;display:flex;align-items:center;gap:20px;border-top:1px solid var(--line)}.control-deck>section.wing-controls{border-left:0;padding:15px 23px}.wing-controls .control-title{margin:0;width:27%}.wing-controls .rate-buttons{flex:1;max-width:320px}.wing-controls .inspect-link{width:auto;margin-left:auto;padding:0;gap:15px}.world-choice{display:block}.world-swatch{display:block;width:100%;height:26px;margin-bottom:6px}.world-swatch:before,.world-swatch:after{width:100%;height:40px;bottom:-23px}.world-swatch i{right:12px}.build-badge{font-size:7px}.frame-card>span{font-size:9px;padding:10px;gap:6px}.layer-tools{display:block}.layer-tools>div:last-child{margin-top:16px}}
@media(max-width:700px){header{height:77px;padding:0 18px;gap:10px}.brand{font-size:19px;gap:7px}.brand>svg{width:32px;height:38px}.brand small{font-size:6px;letter-spacing:2px;margin-top:7px}.build-badge{display:none}.nav-tab{font-size:9px;padding:8px 10px}main{padding:25px 16px 0}.intro{display:block;margin-bottom:22px}.intro>p{text-align:left;font-size:10px;line-height:1.7;margin-top:10px}.intro>p br{display:none}.eyebrow{font-size:7px;letter-spacing:1.6px}h1{font-size:43px}.viewport{height:440px;border-radius:10px}.preview-top{inset:18px 16px auto}.world-heading{top:52px}.world-heading h2{font-size:31px}.world-heading>span{font-size:6px}.live-pill{font-size:6px}.preview-bottom{inset:auto 16px 15px;font-size:7px}.pause-button{padding:8px 10px;font-size:8px;gap:5px}.control-deck{grid-template-columns:1fr}.control-deck>section{padding:19px 17px}.control-deck>section+section{border-left:0;border-top:1px solid var(--line)}.world-choice{display:flex;padding:8px 6px;gap:6px}.world-choice b{font-size:9px}.world-choice small{font-size:4px}.world-swatch{width:30px;height:38px;margin-bottom:0}.world-buttons{gap:7px}.control-title{margin-bottom:13px}.control-title>span{font-size:6px}.mode-buttons button{padding:10px;font-size:11px}.range-row{margin-top:18px}.control-deck>section.wing-controls{display:block;padding:18px 17px}.wing-controls .control-title{width:100%;margin-bottom:13px}.wing-controls .rate-buttons{max-width:none}.wing-controls .inspect-link{width:100%;margin-top:12px;padding:0;font-size:10px}.animation-workbench{padding:19px 15px;margin-top:20px}.workbench-heading{display:block;margin-bottom:18px}.workbench-heading h2{font-size:28px}.workbench-heading>p{font-size:9px;margin-top:10px}.frame-strip{grid-template-columns:repeat(2,1fr);gap:9px}.frame-card>span{font-size:9px}.inspection-tools{flex-wrap:wrap;gap:14px;font-size:9px}.inspection-tools button{margin-left:0;width:100%;padding:12px}.layer-tools{padding-top:20px;margin-top:22px}.layer-tools>div:last-child{gap:15px;font-size:9px}footer{font-size:5px;letter-spacing:.8px;line-height:1.8}footer span{max-width:50%}footer span:last-child{text-align:right}.viewport.expanded .preview-bottom>span{max-width:65%}.range-row input{height:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.loader{animation:none}}

#pause-symbol svg{width:10px;height:10px}.inspecting .intro{display:none}.inspecting .control-deck{display:none}.inspecting .viewport{height:360px}.inspecting main{padding-top:22px}.inspecting .animation-workbench{margin-top:18px;padding:22px}.inspecting .workbench-heading{margin-bottom:16px}.inspecting .frame-card canvas{max-height:170px;object-fit:contain}.lab-playback{display:flex;align-items:center;gap:12px;margin-bottom:17px}.lab-playback>button{padding:8px 12px;background:#2f4436;border:1px solid #567149;border-radius:5px;font-size:10px;color:#daedb9}.lab-playback .rate-buttons{width:145px;padding:3px}.lab-playback .rate-buttons button{padding:5px;font-size:9px}.lab-playback>span{margin-left:auto;color:#99a98e;font-size:8px}.inspecting .inspection-tools{margin-top:16px}.inspecting .layer-tools{margin-top:18px;padding-top:18px}
@media(max-width:700px){.inspecting .viewport{height:350px}.inspecting .animation-workbench{padding:19px 14px}.inspecting .frame-card canvas{max-height:none}.lab-playback{gap:7px;flex-wrap:wrap}.lab-playback>button{padding:8px;font-size:9px}.lab-playback .rate-buttons{width:130px}.lab-playback>span{width:100%;margin:4px 0 0;font-size:8px}.inspecting .workbench-heading>p br{display:none}}

/* Pixel edition: the artwork is rendered at a deliberately small resolution and enlarged without filtering. */
#world,.frame-card canvas,.character-choice canvas{image-rendering:pixelated;image-rendering:crisp-edges}.intro h1{font-size:clamp(34px,3.7vw,54px)}.casting{margin-bottom:12px}.casting-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.casting-heading h3{font-size:10px;font-weight:500;margin:0;color:#bac8b4}.casting-heading>span{font-size:6px;letter-spacing:1.4px;color:#748878}.character-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.character-choice{display:flex;align-items:center;gap:10px;border:1px solid #344846;background:linear-gradient(100deg,#23342f,#1b282d);border-radius:7px;padding:6px 12px 6px 3px;text-align:left;position:relative;min-width:0;overflow:hidden;height:73px}.character-choice canvas{width:80px;height:68px;flex-shrink:0}.character-choice b{font-size:12px;font-weight:600;display:block}.character-choice small{display:block;font-size:5px;letter-spacing:.75px;color:#97ac92;margin-top:6px}.character-choice.selected{border-color:#b1c989;background:linear-gradient(100deg,#3b4632,#23342d)}.character-choice i{position:absolute;right:9px;top:9px;width:4px;height:4px;background:transparent;border-radius:50%}.character-choice.selected i{background:#d3ef9a}.character-choice[data-rider=ninonus]{background:linear-gradient(100deg,#392d2c,#1b282d)}.character-choice[data-rider=ninonus].selected{border-color:#d29970}.character-choice[data-rider=kara].selected{border-color:#91bdb2}.character-choice[data-rider=kaspar].selected{border-color:#a78f79}.render-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 1px 12px;gap:15px;font-size:9px;color:#a4b49d}.render-toolbar>span{font-size:8px;letter-spacing:.5px}.render-toolbar>div{display:flex;align-items:center;gap:24px}.render-toolbar label{display:flex;align-items:center;gap:7px;cursor:pointer}.render-toolbar input{accent-color:#cce795}.smooth-option small{font-size:6px;color:#78906c;letter-spacing:1px;margin-left:1px}.pixel-option select{font:9px 'DM Sans',sans-serif;border:1px solid #3d5147;background:#24362e;color:#c7d8b9;padding:5px 7px;border-radius:4px;cursor:pointer}.frame-scrubber{display:flex;align-items:center;gap:20px;margin-bottom:10px}.frame-scrubber>span{font-size:7px;letter-spacing:1.2px;color:#93ac7d;min-width:175px}.frame-scrubber input{flex:1;accent-color:#c9e58f;height:4px;min-width:0}.frame-scrubber output{font-size:9px;color:#b7c99f;min-width:39px;text-align:right}.timeline{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;margin-bottom:18px}.timeline button{padding:7px 0;background:#2b3b30;border:1px solid #4e6945;border-radius:3px;font-size:8px;color:#b5cba1}.timeline button.inbetween{background:#223137;border-color:#3c5459;color:#81a8a8}.timeline button.selected{background:#d5eb9f;border-color:#d5eb9f;color:#213626}.inspecting .frame-strip{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.inspecting .frame-card canvas{max-height:none;object-fit:contain}.inspecting .frame-card>span{font-size:8px;gap:7px;padding:10px 7px;min-height:36px}.inspecting .frame-card b{font-size:7px}.inspecting .casting-heading{display:none}.inspecting .character-choice{height:59px}.inspecting .character-choice canvas{width:65px;height:55px}.inspecting .viewport{height:330px}.inspecting .render-toolbar{padding-bottom:10px}.inspecting .casting{margin-bottom:8px}.inspecting .workbench-heading h2{font-size:27px}.inspecting .lab-playback{margin-bottom:12px}
@media(max-width:1100px){.character-choice{gap:4px;padding-right:6px}.character-choice canvas{width:64px;height:60px}.character-choice b{font-size:11px}.character-choice small{font-size:4px;letter-spacing:.4px}.render-toolbar>div{gap:15px}.inspecting .frame-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.inspecting .frame-card canvas{max-height:120px;object-fit:contain}}
@media(max-width:700px){.intro h1{font-size:38px;max-width:330px}.intro{margin-bottom:20px}.casting-heading>span{font-size:5px;letter-spacing:.6px}.casting-heading h3{font-size:9px}.character-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.character-choice{height:67px;gap:5px;padding:2px 5px 2px 0}.character-choice canvas{width:64px;height:60px}.character-choice b{font-size:11px}.character-choice small{font-size:4px;letter-spacing:.3px;margin-top:5px}.render-toolbar{display:block;font-size:8px;padding-bottom:10px}.render-toolbar>span{display:block;font-size:7px;margin:0 0 9px}.render-toolbar>div{justify-content:space-between;gap:8px}.smooth-option small{font-size:5px}.render-toolbar label{gap:4px}.pixel-option select{font-size:8px;padding:4px}.inspecting .character-choice{height:57px}.inspecting .character-choice canvas{width:58px;height:51px}.inspecting .frame-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.inspecting .frame-card canvas{max-height:none}.inspecting .frame-card>span{font-size:6px;padding:7px 4px;display:block;min-height:37px}.inspecting .frame-card b{font-size:5px;display:block;margin-bottom:3px}.frame-scrubber{gap:9px}.frame-scrubber>span{font-size:5px;letter-spacing:.4px;min-width:112px}.timeline{gap:3px;margin-bottom:13px}.timeline button{font-size:6px;padding:6px 0}.inspecting .viewport{height:330px}.inspecting .workbench-heading h2{font-size:25px}.inspecting .workbench-heading>p{font-size:8px}.frame-scrubber output{font-size:8px;min-width:32px}}