:root{--ink:#27272c;--muted:#898a92;--line:#e8e7e5;--paper:#fffdf9;--panel:#fff;--accent:#f15a63;--stage:#f4f3f0}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'Noto Sans SC',sans-serif}.app-shell{display:flex;min-height:100vh}.sidebar{width:228px;border-right:1px solid var(--line);padding:24px 14px 16px;display:flex;flex-direction:column;background:#fffdfa}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;text-decoration:none;color:var(--ink);padding:0 10px 24px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--accent);color:#fff;border-radius:9px;font-size:16px}.new-project,.export,.create{border:0;background:var(--ink);color:#fff;border-radius:7px;height:40px;padding:0 13px;display:flex;gap:8px;align-items:center;justify-content:center;font:600 14px inherit;cursor:pointer}.new-project{width:100%;background:var(--accent);margin-bottom:21px}.new-project:hover,.export:hover,.create:hover{filter:brightness(.94)}button{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f59aa0;outline-offset:2px}nav{display:flex;flex-direction:column;gap:3px}nav a,.sidebar-bottom>a{height:40px;border-radius:6px;display:flex;gap:11px;padding:0 11px;align-items:center;color:#686970;text-decoration:none}nav a.active{color:#d84954;background:#fff0f0;font-weight:600}nav a svg,.sidebar-bottom>a svg{width:17px}.count{margin-left:auto;background:#f1efec;color:#75767b;border-radius:10px;padding:1px 7px;font:12px 'DM Mono'}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}.profile{border:0;background:transparent;width:100%;display:flex;align-items:center;gap:9px;margin-top:8px;padding:8px 5px;color:var(--ink);text-align:left}.profile svg{margin-left:auto;width:17px}.avatar{background:#dce9f2;color:#4a6f8d;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-weight:700}.profile-name{font-weight:600}.profile small{display:block;color:var(--muted);font-size:11px;font-weight:400}main{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#fffdfa}.crumb,.top-actions,.save-state{display:flex;align-items:center;gap:10px}.crumb button,.icon-button,.tool,.text-icon{border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:#6d6e75}.crumb button{margin-right:3px}.crumb svg{width:17px;height:17px}.crumb strong{font-weight:600}.top-actions{gap:8px}.save-state{color:#777980;font-size:13px;margin-right:8px}.save-state svg{width:17px;color:#4ba677}.icon-button,.tool{width:34px;height:34px;border-radius:6px}.icon-button:hover,.tool:hover,.text-icon:hover{background:#f4f2ef}.export{height:36px;background:var(--ink);margin-left:4px}.export svg{width:16px}.workspace{flex:1;display:flex;min-height:0}.canvas-zone{background:var(--stage);flex:1;min-width:0;display:flex;flex-direction:column}.canvas-toolbar{height:60px;background:#fbfaf8;border-bottom:1px solid #e8e7e5;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.tool-group,.zoom-group{display:flex;align-items:center;gap:3px}.tool.active{background:#fff;color:var(--accent);box-shadow:0 1px 4px #2a27351a}.tool svg{width:18px}.grid-label{display:flex;align-items:center;gap:7px;color:#777880;font:12px 'DM Mono'}.grid-label svg{width:15px}.zoom-group{font:12px 'DM Mono';color:#717278}.zoom-group .icon-button{width:28px;height:28px}.zoom-group span{width:42px;text-align:center}.canvas-stage{flex:1;min-height:420px;overflow:auto;display:grid;place-items:center;padding:44px;position:relative}.bead-grid{display:grid;background:#fff;box-shadow:0 10px 30px #42403b12;transform-origin:center;transition:transform .15s ease}.cell{width:18px;height:18px;border:1px solid #eeece9;cursor:crosshair;background:#fff;position:relative}.cell:hover{outline:2px solid #444;outline-offset:-2px;z-index:1}.cell.filled{border-color:color-mix(in srgb,var(--c),#000 12%);background:var(--c)}.statusbar{height:35px;background:#fbfaf8;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#86878e;font-size:12px}.statusbar>span{display:flex;align-items:center;gap:6px}.statusbar svg{width:14px}.inspector{width:300px;border-left:1px solid var(--line);background:#fffdfa;overflow:auto;padding-bottom:16px}.panel{padding:20px;border-bottom:1px solid var(--line)}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel h2{font-size:13px;margin:0;font-weight:700}.panel-title>span{font-size:12px;color:var(--muted)}.text-icon{width:26px;height:26px}.text-icon svg{width:16px}.project-panel{display:grid;grid-template-columns:54px 1fr;column-gap:11px}.project-panel .panel-title{grid-column:1/3}.project-preview{width:54px;height:54px;background:#fff2e2;border-radius:7px;position:relative;overflow:hidden}.pixel{position:absolute;width:14px;height:14px;background:#ee4b55}.p1{left:14px;top:17px}.p2{left:28px;top:17px;background:#ff7e7e}.p3{left:14px;top:31px;background:#d83b49}.p4{left:28px;top:31px}.p5{left:21px;top:3px;background:#5ca66b}.p6{left:28px;top:3px;background:#8ec56d}.project-panel strong{font-size:14px}.project-panel p,.selected-color p{margin:3px 0 0;color:var(--muted);font-size:11px}.recent-color{width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px #dedbd6;cursor:pointer}.selected-color{display:flex;align-items:center;gap:10px}.large-swatch{width:38px;height:38px;border-radius:6px;background:var(--accent);border:1px solid #0000001a}.selected-color strong{font-size:13px}.selected-color .icon-button{margin-left:auto}.search{height:35px;border:1px solid #e6e3df;border-radius:6px;display:flex;align-items:center;padding:0 9px;gap:7px}.search svg{width:15px;color:#aaa}.search input{border:0;outline:0;min-width:0;width:100%;font:12px inherit;background:transparent}.palette-tabs{display:flex;gap:16px;margin:14px 0 12px;border-bottom:1px solid #eee}.palette-tabs button{padding:0 0 8px;border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}.palette-tabs button.active{color:var(--ink);font-weight:600;border-bottom:2px solid var(--accent)}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}.color-dot{width:22px;aspect-ratio:1;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #dedbd6;cursor:pointer}.color-dot.selected{outline:2px solid #333;outline-offset:2px}.color-dot:hover{transform:scale(1.12)}.stat{display:flex;align-items:center;gap:8px;margin:7px 0;color:#696a71;font:12px 'DM Mono'}.stat-swatch{width:12px;height:12px;border-radius:3px}.stat-bar{height:4px;background:#edeae7;border-radius:3px;flex:1;overflow:hidden}.stat-bar span{display:block;height:100%;background:var(--stat)}dialog{border:0;border-radius:10px;padding:0;box-shadow:0 18px 50px #1e1d2433;width:min(380px,calc(100vw - 32px)}dialog::backdrop{background:#25232b70}dialog form{padding:27px;position:relative}dialog h2{margin:0 0 7px;font-size:20px}dialog p{color:var(--muted);margin:0 0 22px;font-size:13px}dialog label{display:block;font-size:12px;font-weight:600;margin:15px 0}dialog input,dialog select{display:block;width:100%;height:38px;border:1px solid #dedbd7;border-radius:6px;margin-top:7px;padding:0 10px;background:#fff;font:14px inherit}.dialog-close{position:absolute;right:16px;top:16px;border:0;background:none;color:#777;cursor:pointer}.dialog-close svg{width:18px}.create{width:100%;margin-top:21px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:9px 14px;background:#28272c;color:#fff;border-radius:6px;font-size:13px;z-index:5}@media(max-width:900px){.sidebar{width:64px;padding:18px 10px}.brand{padding:0 7px 22px}.brand>span:last-child,.new-project span,nav a:not(.active),nav a.active .count,.sidebar-bottom>a,.profile-name,.profile svg{display:none}.new-project{padding:0;width:42px;margin:auto auto 18px}.new-project svg{width:18px}.sidebar nav a{padding:0;justify-content:center}.profile{padding:5px;justify-content:center}.inspector{width:265px}}@media(max-width:680px){.sidebar{display:none}.topbar{padding:0 12px;height:60px}.save-state,.crumb>span,.crumb>svg{display:none}.top-actions .icon-button{display:none}.export{font-size:0;width:38px;padding:0}.export svg{width:17px}.workspace{display:block}.canvas-zone{height:calc(100vh - 60px)}.inspector{display:none}.canvas-toolbar{padding:0 12px}.grid-label{display:none}.canvas-stage{padding:24px;min-height:0}.cell{width:14px;height:14px}}