:root{--canvas:#292a2b;--grid:rgba(200,200,203,.38);--surface:#464748;--ink:#f5f5f5;--muted:#b8b9bc}*{box-sizing:border-box}body,html{margin:0;width:100%;height:100%;overflow:hidden;background:var(--canvas);color:var(--ink);font-family:Inter,Segoe UI,system-ui,sans-serif}button,input,textarea{font:inherit}.lunaris{position:relative;width:100vw;height:100dvh;overflow:hidden;touch-action:none;background-color:var(--canvas);background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);background-size:72px 72px}.world{inset:0;transform-origin:0 0}.window,.world{position:absolute}.window{overflow:hidden;border:1px solid #646568;border-radius:18px;background:var(--surface);box-shadow:0 16px 34px #0005}.paletteWindow{container-type:size}.windowHeader{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 13px;background:#464748;cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dots{display:flex;gap:7px}.dots i{width:12px;height:12px;border-radius:50%;background:#292a2b}.title,.titleInput{width:100%;border:0;border-radius:6px;padding:3px 7px;background:transparent;color:var(--ink);font-weight:750;text-align:center}.title{cursor:pointer}.titleInput{background:#303132;outline:1px solid #777}.close{justify-self:end;border:0;background:transparent;color:#242526;font-size:29px;cursor:pointer}.noteWindow textarea{width:100%;height:calc(100% - 44px);border:0;resize:none;outline:0;padding:20px;color:white;font-size:19px;font-weight:650}.imageWindow img{width:100%;height:calc(100% - 44px);object-fit:cover;display:block}.resize{position:absolute;right:3px;bottom:3px;width:20px;height:20px;border:0;background:linear-gradient(135deg,transparent 55%,#eee 56% 63%,transparent 64% 72%,#eee 73% 80%,transparent 81%);cursor:nwse-resize}.palette{height:calc(100% - 44px);padding:16px;display:grid;grid-template-columns:125px 1fr;grid-gap:14px;gap:14px}.paletteControls{position:relative;width:125px}.wheelBox{position:relative;width:118px;height:118px}.hueRing{position:absolute;inset:0;border-radius:50%;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);-webkit-mask:radial-gradient(circle,transparent 0 43px,#000 44px 59px,transparent 60px);mask:radial-gradient(circle,transparent 0 43px,#000 44px 59px,transparent 60px);cursor:crosshair}.hueDot,.toneDot{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #0008}.toneTriangle{position:absolute;left:21px;top:21px;width:76px;height:76px;-webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%);cursor:crosshair}.colorValues{margin-top:4px;font-size:9px;color:var(--muted)}.colorValues b{display:block;margin:5px 0 2px;letter-spacing:.08em}.colorSlider{display:grid;grid-template-columns:12px 1fr 30px;grid-gap:4px;gap:4px;align-items:center;margin:2px 0}.colorSlider input{width:100%;height:5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:8px;outline:0}.colorSlider input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border:1px solid white;border-radius:4px;background:#ff8a5c}.colorSlider output{padding:2px;background:#303132;color:white;text-align:center;border-radius:3px}.hexValue{position:absolute;bottom:0;left:0;padding:7px 10px;border-radius:9px;background:#2d2e2f;font-weight:700;font-size:13px}.swatches{display:grid;grid-template-columns:repeat(auto-fill,44px);grid-auto-rows:44px;grid-gap:10px;gap:10px;align-content:start;overflow:hidden}.swatches button{width:44px;height:44px;border:0;border-radius:9px;cursor:pointer}.swatches .selected{outline:2px solid white;outline-offset:2px}.swatches .empty{border:1px dashed #777;background:repeating-conic-gradient(#555 0 25%,#494a4b 0 50%) 50%/8px 8px}.hamburger,.project,.share{position:fixed;z-index:20;top:20px;border:2px solid #4d4e50;border-radius:12px;background:#2d2e2f;color:var(--ink);box-shadow:0 8px 20px #0003}.hamburger{left:24px;width:64px;height:64px;font-size:32px;line-height:1;cursor:pointer}.project{left:50%;transform:translateX(-50%);height:58px;display:flex;align-items:center;padding-left:16px;font-size:21px;font-weight:800}.project button{height:54px;margin-left:16px;padding:0 14px;border:0;border-left:2px solid #4d4e50;background:transparent;color:#ddd;font-size:27px;cursor:pointer}.share{right:24px;width:64px;height:64px;font-size:33px;cursor:pointer}.accountMenu,.context{position:fixed;z-index:40;background:#303132;border:2px solid #56585a;box-shadow:0 16px 38px #0006}.accountMenu{left:12px;top:88px;width:200px;padding:12px;border-radius:15px}.account{display:flex;gap:10px;align-items:center;padding:3px 3px 10px}.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff87d;color:#252627;font-weight:800}.account b,.account small{display:block}.account small{color:var(--muted);font-size:11px;margin-top:2px}.accountMenu button,.context button{display:block;width:100%;padding:7px 3px;border:0;background:transparent;color:var(--ink);text-align:left;font-weight:650;cursor:pointer}.accountMenu button:hover,.context button:not(:disabled):hover{background:#444547;border-radius:5px}.accountMenu hr{border:0;border-top:1px solid #57585a}.context{width:230px;padding:13px 16px 21px;border-radius:32px}.contextTop{display:flex;justify-content:space-between;align-items:center;margin:1px 2px 13px;color:#777;font-size:26px;line-height:1}.context button{padding:7px 0;font-size:16px}.context button:disabled{color:#777;cursor:default}.contextHandle{position:absolute;bottom:8px;left:50%;width:88px;height:7px;transform:translateX(-50%);border-radius:999px;background:#565758}.hiddenInput{display:none}.loginBackdrop{position:fixed;z-index:60;inset:0;display:grid;place-items:center;background:#0008}.login{position:relative;width:340px;padding:30px;border:1px solid #67686a;border-radius:16px;background:#3f4041;box-shadow:0 20px 60px #0008}.login h2{margin-top:0}.login label{display:grid;grid-gap:6px;gap:6px;margin:14px 0;font-size:13px;color:var(--muted)}.login input{padding:10px;border:1px solid #626365;border-radius:7px;background:#2e2f30;color:white;outline:0}.loginButton{width:100%;margin-top:6px;padding:10px;border:0;border-radius:7px;background:#f2f2f2;color:#262728;font-weight:750;cursor:pointer}.loginClose{position:absolute;right:12px;top:7px;border:0;background:transparent;color:var(--ink);font-size:25px;cursor:pointer}.hint{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:13px}