:root{--ink:#202122;--yellow:#f8dc15;--pink:#ca1551;--line:#e4e2dc}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:13px;overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:10px 12px;background:#fff;color:var(--ink)}button:hover{background:#f5f1df;border-color:#aaa}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #345995;outline-offset:2px}.primary{background:var(--yellow);border-color:var(--yellow);font-weight:700}header{height:83px;display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center;white-space:nowrap}.logo{display:block;width:48px;height:55px;object-fit:contain;flex-shrink:0}.brand strong{font-size:20px;letter-spacing:-.8px}.brand strong>span{font-weight:400}.brand small{display:block;font-size:8px;letter-spacing:1.6px;margin-top:5px}#projectName{border:0;border-left:1px solid var(--line);padding:10px;width:150px}#status{font-size:11px;white-space:nowrap;color:#7d5b13}.actions{margin-left:auto;display:flex;gap:7px}nav{height:61px;display:flex;align-items:center;gap:15px;padding:10px 24px;background:#fff}nav button{border:0;font-size:12px;padding:7px 4px;white-space:nowrap}nav i{font-style:normal;color:white;padding:5px 8px;border-radius:4px;margin-right:7px}.a{background:#345995}.b{background:#00856a}.c{background:#ca1551}.d{background:#a157b5}.nav-label{font-size:9px;letter-spacing:1.3px;color:#777}#fit{margin-left:auto}main{height:calc(100dvh - 144px);position:relative;background:#f6f5f0}canvas{width:100%;height:100%;display:block;touch-action:none}.tools{position:absolute;left:18px;top:24px;background:white;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 5px 20px #00000009;display:flex;flex-direction:column;gap:3px}.tools button{font-size:23px;width:57px;padding:6px 2px;border:0}.tools small{font-size:8px;display:block;margin-top:3px}.tools .active{background:var(--yellow)}hr{width:80%;border:0;border-top:1px solid var(--line)}.welcome{position:absolute;left:105px;top:26px;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:1.8px}h1{font-size:30px;letter-spacing:-1.2px;line-height:1.05;margin:10px 0}h1 em{font-style:normal;background:var(--yellow)}.welcome p{font-size:11px;line-height:1.5;color:#777}.inspector{position:absolute;right:18px;top:24px;bottom:70px;width:235px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px;overflow:auto;box-shadow:0 5px 20px #00000005}.panel-title{font-weight:700;border-bottom:1px solid var(--line);padding-bottom:17px;margin-bottom:15px}.panel-title span{float:right;color:#ca1551}label{display:block;font-size:10px;color:#666;margin:10px 0}input,textarea,select{width:100%;margin-top:5px;padding:8px;border:1px solid var(--line);border-radius:5px;color:#222;background:#fff}textarea{resize:vertical}input[type=color]{height:32px;padding:2px}h2{font-size:17px}#empty p{font-size:16px;line-height:1.45}#empty small{line-height:1.5;color:#888}.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}#front{width:100%;margin-top:8px}details{margin-top:15px;font-size:11px}#sourceText{white-space:pre-wrap;line-height:1.5}.palette{background:#f5f2e7;padding:18px;margin-top:24px;border-radius:5px}.palette>span:first-child{font-size:8px;letter-spacing:1.6px}.palette p{font-size:22px;line-height:1.1}.scribble{color:var(--pink);font-size:32px}.bottom{position:absolute;bottom:16px;left:105px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.bottom>span{font-size:10px;color:#777;background:#f6f5f0;padding:6px}.bottom>div{display:flex;align-items:center;background:white;border:1px solid var(--line);border-radius:8px;padding:4px;pointer-events:auto}.bottom button{border:0}.bottom output{min-width:45px;text-align:center}dialog{max-width:480px;border:0;border-radius:14px;padding:28px;box-shadow:0 20px 100px #0004}dialog::backdrop{background:#14121a66}dialog p{line-height:1.7}dialog button{margin:4px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#222;color:white;padding:12px 20px;border-radius:8px;display:none;z-index:10}@media(max-width:1100px){header{gap:10px;padding:12px}.brand strong{font-size:17px}#projectName{width:110px}.actions button{font-size:11px;padding:10px 7px}nav{gap:8px;padding:10px}.nav-label{display:none}.inspector{width:205px}.welcome{display:none}}@media(max-width:760px){header{height:113px;flex-wrap:wrap;gap:6px}.brand{flex:1}.brand small{display:none}.actions{width:100%;margin:0}.actions button{flex:1}nav{overflow:auto;height:50px}nav>span{display:none}main{height:calc(100dvh - 163px)}.inspector{right:8px;top:10px;width:165px;padding:10px;bottom:65px}.tools{left:8px;top:10px}.tools button{width:42px;font-size:19px}.palette{display:none}.bottom{left:65px;right:8px}.bottom>span{display:none}#projectName{width:100px}#status{font-size:9px}}
.tools{max-height:calc(100% - 42px);overflow-y:auto;scrollbar-width:thin}.tools button{flex-shrink:0}.welcome{transition:opacity .15s}body.working .welcome{opacity:0}@media(max-height:800px){.tools button{font-size:19px;padding:4px 2px}.tools{gap:1px}.tools hr{margin:4px auto}}@media(max-width:480px){.inspector{width:145px}.brand strong{font-size:15px}#projectName{width:80px}}

@media(max-width:760px){.brand .logo{width:35px;height:40px}}