@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--paper:#e6e7e3;--ink:#20262a;--red:#c8302a;--muted:#777d7d}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:Inter,Arial,sans-serif;color:var(--ink)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #de5344;outline-offset:4px}header{height:80px;margin:0 3.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b7bfbd88}.brand{font-size:28px;letter-spacing:-3px;font-weight:700}.brand>span{color:var(--red)}.brand small{font-size:9px;letter-spacing:1.7px;margin-left:17px;vertical-align:middle}.headerNote{font-size:9px;letter-spacing:1.7px;color:#79807e}#help{background:none;border:0;font-size:20px}#help span{font-size:10px;vertical-align:middle;margin-left:9px}main{position:relative;height:calc(100svh - 123px);min-height:720px;overflow:hidden}#scene{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}.backType{position:absolute;top:0;left:0;right:0;text-align:center;font:600 clamp(100px,20vw,340px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.035em;color:#d2d6d1;pointer-events:none;opacity:.75}.topline{position:absolute;top:24px;left:3.5%;right:3.5%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;pointer-events:none}.live{display:flex;align-items:center;gap:7px}.live i{background:#587e5d;width:5px;height:5px;border-radius:50%;box-shadow:0 0 0 4px #61826413}.titleBlock{position:absolute;left:3.5%;top:24%;pointer-events:none;width:30%;max-width:350px}.overline{font-size:9px;letter-spacing:2px;color:var(--red)}h1{font:600 clamp(48px,5.4vw,84px)/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1.5px;margin:23px 0}p{font-size:12px;line-height:1.9;color:#67706f}.titleBlock p{margin:23px 0 30px}.mainButton{pointer-events:auto;border:0;color:white;background:var(--red);padding:0;display:flex;align-items:center;gap:20px;height:54px;width:220px;font-size:10px;letter-spacing:1.4px;box-shadow:0 7px 22px #b92a281b;transition:background .2s}.mainButton:hover{background:#a8201c}.buttonIcon{width:54px;display:grid;place-items:center;height:100%;font-size:24px;border-right:1px solid #ffffff30}.mechanism{display:flex;align-items:center;gap:10px;font-size:7px;letter-spacing:1px;width:220px;margin-top:15px}.mechanism>div{height:2px;background:#c5cbc8;flex:1}.mechanism i{display:block;width:0;background:var(--red);height:2px}.inspector{position:absolute;right:3.5%;top:21%;width:232px;background:#eef0eadb;padding:23px 20px;border:1px solid #bec6c266;backdrop-filter:blur(18px)}.panelTitle{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;padding-bottom:20px;border-bottom:1px solid #c7ceca}.panelTitle span:last-child{color:#8b9390}.panelRow{display:flex;justify-content:space-between;font-size:10px;margin:20px 0 13px;color:#7a827f}.panelRow strong{font-weight:500;color:#303c37}.colors{display:flex;align-items:center;gap:5px}.colors i{width:15px;height:15px;border-radius:50%;background:#c8302a;border:2px solid #eef0ea;box-shadow:0 0 0 1px #c5cac6}.colors i:nth-child(2){background:#315494}.colors i:nth-child(3){background:#20262a}.colors span{margin-left:5px;font-size:6px;letter-spacing:.7px}.panelDivider{height:1px;background:#c7ceca;margin:20px 0}.smallLabel{font-size:8px;letter-spacing:1.2px;color:#78827d}.viewButtons{display:flex;gap:4px;margin:12px 0 21px}.viewButtons button{flex:1;padding:9px 4px;background:transparent;border:1px solid #c6ceca;color:#7b8580;font-size:9px}.viewButtons .selected{background:#26342e;color:white;border-color:#26342e}.switchRow{display:flex;align-items:center;position:relative;justify-content:space-between;font-size:10px;margin:17px 0;cursor:pointer}.switchRow input{position:absolute;right:0;opacity:0;width:30px;height:20px;margin:0;cursor:pointer}.switch{width:27px;height:15px;background:#c4cbc6;border-radius:20px;pointer-events:none}.switch:after{content:'';width:11px;height:11px;background:#f4f5f1;border-radius:100%;display:block;transform:translate(2px,2px);transition:transform .2s}.switchRow input:checked+.switch{background:#c8302a}.switchRow input:checked+.switch:after{transform:translate(14px,2px)}.switchRow input:focus-visible+.switch{outline:2px solid #c8302a;outline-offset:4px}.rangeLabel{display:flex;justify-content:space-between;font-size:10px;margin-top:25px}.rangeLabel output{color:#7e8881}#energy{width:100%;height:3px;accent-color:#bd3029;margin:19px 0 20px;cursor:pointer}.secondary,.download{width:100%;border:1px solid #bdc8c1;background:transparent;padding:11px 8px;font-size:13px;display:flex;gap:12px;align-items:center}.secondary span,.download span{font-size:9px}.download{border:0;margin-top:7px;color:#66756b}.inspector p{font-size:8px;line-height:1.65;margin:12px 0 0;color:#838d86}.bottomline{position:absolute;bottom:0;left:3.5%;right:3.5%;height:55px;border-top:1px solid #b7bfbd88;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px;pointer-events:none}.bottomline b{font-weight:400;color:#7a847e}.gesture{color:#78847b;font-size:8px}.gesture i{padding:0 10px;font-style:normal}.bottomline button{background:none;border:0;font-size:8px;letter-spacing:1px;pointer-events:auto}footer{height:43px;display:flex;justify-content:space-between;align-items:center;padding:0 3.5%;border-top:1px solid #bec6be;font-size:7px;letter-spacing:1.2px;color:#7a857b}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;letter-spacing:2px;background:#e6e7e3eb;z-index:8}#loading span{width:20px;height:20px;border:1px solid #c8302a;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid #c8cec9;padding:40px;background:#eef0eb;color:#26332a;max-width:480px;width:calc(100% - 40px)}dialog::backdrop{background:#18251ab8;backdrop-filter:blur(8px)}dialog h2{font:500 43px/1 'Barlow Condensed',Impact,sans-serif;margin:20px 0}dialog .close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:26px;color:#7a8279}dialog p{font-size:11px}.note{border-top:1px solid #c5cec3;padding-top:15px;font-size:9px!important}#referenceDialog img{width:100%;display:block;margin-top:20px}#referenceDialog p{margin-bottom:0}@media(min-width:1600px){.titleBlock{top:28%}.inspector{top:27%}}@media(max-width:1050px){.headerNote{display:none}.titleBlock{width:240px}.titleBlock h1{font-size:58px}.inspector{width:205px;padding:18px 14px}.gesture{max-width:240px;text-align:center;line-height:1.7;font-size:7px}.gesture i{padding:0 3px}}@media(max-width:700px){header{height:65px;margin:0 5%}.brand{font-size:24px}.brand small{font-size:8px;letter-spacing:1px}#help span{display:none}main{height:auto;min-height:1100px;padding-bottom:70px}#scene{height:640px;inset:0 0 auto}.backType{top:120px;font-size:26vw}.topline{left:5%;right:5%;font-size:7px;top:20px;letter-spacing:1px}.titleBlock{top:64px;left:5%;width:90%;max-width:none}.overline{font-size:7px;letter-spacing:1.5px}h1,.titleBlock h1{font-size:43px;line-height:.95;margin:10px 0}.titleBlock p{display:none}.mainButton{position:absolute;top:452px;left:50%;transform:translateX(-50%);width:230px;height:48px}.mechanism{position:absolute;top:500px;left:50%;transform:translateX(-50%);width:230px;font-size:7px}.inspector{position:relative;top:auto;right:auto;margin:645px 5% 0;width:90%;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.panelTitle,.panelRow,.colors,.panelDivider,.smallLabel,.viewButtons,.rangeLabel,#energy,.inspector p{grid-column:1/-1}.panelRow{margin-top:15px}.panelDivider{margin:16px 0}.viewButtons{margin-bottom:5px}.switchRow{font-size:9px}.rangeLabel{margin-top:10px}.secondary,.download{margin:0}.inspector p{margin-top:14px}.bottomline{height:48px;left:5%;right:5%;font-size:7px}.gesture{display:none}footer{font-size:6px;padding:0 5%}footer span:last-child{display:none}footer span:nth-child(2){max-width:130px;text-align:right;line-height:1.8}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Optimus Pride edition */
:root{--red:#7840ae;--paper:#eeecef}body{background:radial-gradient(ellipse at 15% 30%,#ffdfdf45,transparent 45%),radial-gradient(ellipse at 85% 65%,#c9d6ff50,transparent 45%),var(--paper)}header{position:relative}header:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,#e5243b 0% 16.66%,#ff861c 16.66% 33.33%,#ffce24 33.33% 50%,#23ad62 50% 66.66%,#2167dc 66.66% 83.33%,#813ac4 83.33%)}.prideText{background:linear-gradient(105deg,#db3044 4%,#dc731d 22%,#a98612 38%,#20834b 54%,#2e66c4 73%,#813ac4 92%);background-clip:text;-webkit-background-clip:text;color:transparent}.backType{color:#d7d2de;letter-spacing:.015em}.mainButton{background:#65358b;box-shadow:0 7px 22px #70449025}.mainButton:hover{background:#4e246f}.buttonIcon{background:linear-gradient(155deg,#d83247,#c67525,#389a6b,#375ba4,#813ac4)}.inspector{background:#f6f3f4dc}.colors i:nth-child(1){background:#e5243b}.colors i:nth-child(2){background:#ff861c}.colors i:nth-child(3){background:#ffce24}.colors i:nth-child(4){background:#23ad62}.colors i:nth-child(5){background:#2167dc}.colors i:nth-child(6){background:#813ac4}.colors i{width:14px;height:14px;flex-shrink:0}.colors span{font-size:7px}.mechanism i{background:linear-gradient(90deg,#e5243b,#ff861c,#ffce24,#23ad62,#2167dc,#813ac4)}.viewButtons .selected{background:#59366f;border-color:#59366f}.switchRow input:checked+.switch{background:#7840ae}#energy{accent-color:#7840ae}.titleBlock h1{font-size:clamp(58px,6.5vw,100px)}@media(max-width:1050px){.titleBlock h1{font-size:64px}}@media(max-width:700px){.titleBlock h1{font-size:43px}.backType{top:140px;font-size:30vw}footer span:first-child{max-width:160px;line-height:1.6}}