@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#eeeae5;background:transparent;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:1}#interface{position:fixed;inset:0;background:#20221f;pointer-events:none;transition:opacity .2s}header{height:112px;padding:0 5%;display:flex;align-items:center;gap:36px}.brand{font-size:32px;display:flex;gap:12px;align-items:center;font-weight:800;text-decoration:none;color:inherit;letter-spacing:-1.5px}.brand:first-letter,.dot{color:#c5f578}.subtitle{font-size:10px;letter-spacing:2px;color:#95988e}button{font:inherit;border:0;cursor:pointer;background:transparent;color:inherit;border-radius:10px;transition:background .15s}button:hover{background:#ffffff15}button:focus-visible,input:focus-visible{outline:2px solid #c5f578;outline-offset:4px}header button{margin-left:auto;border:1px solid #4a4e43;padding:12px 18px;pointer-events:auto;font-size:12px;z-index:3}main{position:absolute;left:10%;top:24%}.eyebrow{font-size:10px;letter-spacing:2px;color:#c5f578;display:flex;align-items:center;gap:9px}i{width:6px;height:6px;background:#c5f578;border-radius:50%}h1{font-family:Manrope,sans-serif;font-weight:600;font-size:clamp(45px,6.8vw,100px);line-height:1.08;letter-spacing:-5px;margin:25px 0}em{font-style:normal;color:#c5f578}main p{color:#9fa295;font-size:15px;line-height:1.8}.hint{font-size:12px;margin-top:35px;color:#d2d7c6}footer{position:absolute;bottom:28px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#929787}#toolbar{position:fixed;bottom:64px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;padding:12px;background:#30332c;border:1px solid #4c5143;box-shadow:0 12px 40px #0004;border-radius:18px;white-space:nowrap}#toolbar button{height:38px;min-width:38px;font-size:24px}#toolbar .active{color:#20221f;background:#c5f578}.tools,#colors{display:flex;gap:5px}.separator{width:1px;height:25px;background:#515647}#colors button{width:23px;height:23px;min-width:23px;border-radius:50%;border:3px solid #30332c;outline:1px solid transparent}#colors button.selected{outline-color:#eeeae5}.custom{width:23px;height:23px;overflow:hidden;border-radius:50%;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);position:relative}#color{opacity:0;width:40px;height:40px;position:absolute;inset:-8px;cursor:pointer}.size{display:flex;gap:9px;align-items:center;font-size:11px;color:#c0c6b7}input[type=range]{width:70px;accent-color:#c5f578}output{width:16px}#toolbar .obs,.obs{font-size:12px;background:#c5f578;color:#24291f;padding:0 16px;font-weight:700}.obs span{margin-left:12px}#restore{position:fixed;top:10px;right:10px;z-index:5;background:#292e24cc;padding:10px;font-size:11px;opacity:.25}#restore:hover{opacity:1}body.overlay #interface,body.overlay #toolbar{display:none}body.drawing main{opacity:0}#toast{position:fixed;top:25px;left:50%;transform:translateX(-50%);z-index:10;background:#c5f578;color:#24291f;padding:12px 24px;border-radius:30px;opacity:0;pointer-events:none;font-size:13px}dialog{max-width:510px;padding:36px;border:1px solid #535c49;border-radius:22px;background:#292e25;color:#eeeae5;z-index:20}dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}dialog h2{font:600 30px Manrope,sans-serif;letter-spacing:-1px}dialog li,dialog p{font-size:13px;line-height:1.8;color:#bfc5b5}dialog li{margin-bottom:12px}dialog ol{padding-left:20px}dialog #close{float:right;font-size:26px}dialog .obs{padding:14px}.shortcuts{border-top:1px solid #4a5142;padding-top:12px}@media(max-width:850px){.subtitle{display:none}#toolbar{gap:7px;max-width:96vw;flex-wrap:wrap;justify-content:center;width:max-content}main{left:8%;top:20%}h1{letter-spacing:-2px}footer span:first-child{display:none}.size{font-size:0}#toolbar{bottom:45px}.separator{display:none}}@media(max-height:650px){main{top:18%}h1{font-size:48px;margin:15px 0}.hint{margin-top:12px}main p{margin:5px 0}#toolbar{bottom:40px}}
body::before{content:"";position:fixed;inset:0;background:#20221f;z-index:0}#interface{background:transparent;z-index:2}body.overlay::before{display:none}
body.overlay #restore,body.overlay #toast{display:none}