:root{color:#303b36;font-synthesis:none;background:#f6f4ef;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{margin:0}#app{min-height:100dvh}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-offset:4px;outline:3px solid #a66d46}button{transition:background .15s,box-shadow .15s}a{color:inherit;text-decoration:none}.topbar{background:#faf9f5;border-bottom:1px solid #dedfd6;align-items:center;gap:32px;height:76px;padding:0 36px;display:flex}.brand{letter-spacing:-1.5px;align-items:center;font-size:29px;font-weight:750;display:flex}.brand-period{color:#b07952}.brand-mark{grid-template-columns:repeat(2,9px);gap:3px;margin-right:12px;display:grid;transform:rotate(-7deg)}.brand-mark i{background:#3c5948;border-radius:2px;width:9px;height:9px}.brand-mark i:last-child{background:#b98966}.private-label{color:#7b817a;font-size:12px}.connection{color:#687568;align-items:center;gap:8px;margin-left:auto;font-size:11px;display:flex}.status-dot{background:#688c65;border-radius:50%;width:6px;height:6px;margin-right:4px;display:inline-block}.status-dot.offline{background:#b68d51}.workspace{grid-template-columns:288px minmax(360px,1fr) 264px;min-height:calc(100vh - 88px);display:grid}.sidebar,.settings{padding:30px 24px}.sidebar{border-right:1px solid #dedfd6}.settings{background:#faf9f5;border-left:1px solid #dedfd6;padding-top:35px}.intro{padding-bottom:20px!important}h1{letter-spacing:-.2px;margin:0;font-size:15px;font-weight:650}.sidebar section,.settings section{border-bottom:1px solid #e0e1d8;margin-bottom:24px;padding-bottom:25px}.section-heading{justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.section-heading h2{margin:0;font-size:12px;font-weight:650}.section-heading>span{color:#8b8e82;letter-spacing:.5px;font-size:9px}.upload-area{background:#edf0e6;border:1px dashed #b9c2b3;border-radius:7px;flex-direction:column;align-items:center;gap:4px;width:100%;padding:17px 8px;display:flex}.upload-area:hover{background:#e4eadb}.upload-symbol{font-size:23px;line-height:1}.upload-area strong{font-size:12px;font-weight:600}.upload-area>span:not(.upload-symbol){color:#7a8376;font-size:10px}.upload-area small{color:#899080;margin-top:4px;font-size:9px}.help{color:#868b80;margin:12px 0 0;font-size:11px;line-height:1.7}.photo-grid{grid-template-columns:repeat(4,1fr);gap:6px;max-height:210px;margin-top:12px;padding:4px;display:grid;overflow-y:auto}.photo-thumb{aspect-ratio:1;background:#e6e8df;border:0;border-radius:4px;padding:0;overflow:hidden}.photo-thumb:hover{box-shadow:0 0 0 2px #5b7358}.photo-thumb img{object-fit:cover;width:100%;height:100%;display:block}.layout-grid{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.layout-types{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.layout-types button{background:0 0;border:1px solid #d9ddd2;border-radius:5px;place-items:center;gap:4px;padding:8px 2px;font-size:8px;display:grid}.layout-types button span{color:#81907a;font-size:20px}.layout-types button.active{background:#eaf0e2;border-color:#617b5c;box-shadow:0 0 0 1px #617b5c}.layout-controls{background:#f0f1e9;border-radius:5px;margin-top:14px;padding:12px}.layout-controls>p{color:#7d8477;margin:0 0 12px;font-size:9px;line-height:1.5}.layout-controls .paired-fields{margin:0}.layout-controls .field{margin-bottom:12px}.preset-row,.split-row{gap:6px;margin-bottom:8px;display:flex}.preset-row button,.split-row button{background:#faf9f5;border:1px solid #d4d9cc;border-radius:4px;flex:1;padding:7px 4px;font-size:8px}.random-frame-controls{border-top:1px solid #e0e1d8;margin-top:24px;padding-top:20px}.layout-option{background:0 0;border:1px solid #dcdfd4;border-radius:6px;flex-direction:column;align-items:center;gap:7px;padding:9px 8px 7px;display:flex}.layout-option.active{background:#eaf0e2;border-color:#617b5c;box-shadow:0 0 0 1px #617b5c}.layout-option>span:last-child{white-space:nowrap;font-size:8px}.layout-mini{width:43px;height:35px;display:block;position:relative}.layout-mini i{background:#b5c0ab;border:2px solid #f6f4ef;border-radius:3px;position:absolute}.active .layout-mini i{background:#738868;border-color:#eaf0e2}.editor{background:#efeee7;flex-direction:column;min-width:0;display:flex}.editor-toolbar{background:#f6f4ef;border-bottom:1px solid #e0e1d8;justify-content:space-between;align-items:center;padding:24px 30px;display:flex}.project-title{min-width:0}.project-title input{background:0 0;border:1px solid #0000;border-radius:4px;width:100%;max-width:280px;margin-left:-6px;padding:2px 5px;font-weight:600;display:block}.project-title input:hover{border-color:#d1d5c9}.project-title>span{color:#8b9284;font-size:10px}.history-actions{gap:8px;display:flex}.icon-button{background:0 0;border:1px solid #daddd1;border-radius:5px;place-content:center;width:32px;height:32px;font-size:21px;display:grid}.icon-button:hover:not(:disabled){background:#e4e9dc}.canvas-area{background-image:radial-gradient(#cfd2c5 .6px,#0000 .6px);background-size:16px 16px;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:0;padding:36px 36px 24px;display:flex}.canvas-meta{color:#8d9384;letter-spacing:1px;justify-content:flex-end;width:100%;max-width:650px;margin-bottom:18px;font-size:9px;display:flex}.canvas-shell{flex-shrink:0;position:relative;box-shadow:0 8px 24px #3d49341a,0 1px 4px #3d493414}.canvas-shell canvas{width:100%;height:100%;display:block}.frame-hit{touch-action:none;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.frame-hit.selected{outline-offset:3px;z-index:1;outline:2px solid #6f8262}.frame-hit:focus-visible{outline-offset:3px;outline:3px solid #a66d46}.frame-hit.filled{cursor:grab}.frame-hit.filled:active{cursor:grabbing}.layout-divider{z-index:2;touch-action:none;background:0 0;border:0;padding:0;position:absolute}.layout-divider.x{cursor:col-resize;width:22px;margin-left:-11px}.layout-divider.y{cursor:row-resize;height:22px;margin-top:-11px}.layout-divider span{background:#faf9f5;border:1px solid #617b5c;border-radius:10px;width:18px;height:28px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 1px 5px #34442f33}.layout-divider.y span{width:28px;height:18px}.layout-divider span:after{content:"";border-left:1px solid #829077;border-right:1px solid #829077;position:absolute;inset:6px 8px}.layout-divider.y span:after{border:1px solid #829077;border-left:0;border-right:0;inset:8px 6px}.empty-frame{color:#8e9789;pointer-events:none;flex-direction:column;align-items:center;gap:6px;font-size:11px;display:flex}.empty-frame>span:first-child{font-size:24px;font-weight:200}.frame-number{color:#68715f;opacity:0;background:#f9faf3bc;border-radius:4px;place-content:center;width:18px;height:18px;font-size:9px;display:grid;position:absolute;bottom:8px;left:8px}.selected .frame-number,.frame-hit:hover .frame-number{opacity:1}.editor-footer{background:#f6f4ef;border-top:1px solid #dedfd4;justify-content:space-between;align-items:center;gap:12px;padding:20px 30px;display:flex}.editor-footer>span{color:#8a9181;font-size:9px}.primary{color:#fff;white-space:nowrap;background:#35533f;border:1px solid #35533f;border-radius:6px;padding:11px 18px;font-size:12px;font-weight:550}.primary:hover:not(:disabled){background:#24412e}.primary>span{margin-left:16px}.field{flex-direction:column;gap:8px;margin-bottom:21px;font-size:11px;display:flex}select{color:#59624f;background:#fdfcf9;border:1px solid #d8ddd0;border-radius:5px;width:100%;min-height:38px;padding:10px 8px;font-size:10px}.field-control{margin-top:-14px;margin-bottom:21px}.range-field{flex-direction:column;gap:11px;margin-bottom:24px;font-size:11px;display:flex}.range-field>span{justify-content:space-between;gap:8px;display:flex}.range-field .range-value{color:#939987;font-size:10px}input[type=range]{accent-color:#647c53;cursor:pointer;width:100%;height:4px;margin:5px 0}input[type=color]{cursor:pointer;background:0 0;border:1px solid #d0d6c9;border-radius:50%;width:27px;height:27px;padding:2px}.field input[type=number],.paired-fields input[type=number]{color:#59624f;background:#fdfcf9;border:1px solid #d8ddd0;border-radius:5px;width:100%;min-height:38px;padding:8px}.paired-fields{grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;margin:-8px 0 20px;display:grid}.paired-fields label{gap:7px;font-size:10px;display:grid}.paired-fields>span{color:#8b9284;padding-bottom:9px}.segmented-field{border:0;margin:0 0 24px;padding:0}.segmented-field legend{margin-bottom:8px;font-size:11px}.segmented{grid-template-columns:1fr 1fr;display:grid}.segmented button{background:#fdfcf9;border:1px solid #d8ddd0;padding:8px;font-size:10px}.segmented button:first-child{border-radius:5px 0 0 5px}.segmented button:last-child{border-left:0;border-radius:0 5px 5px 0}.segmented button.active{color:#35533f;background:#e6ecdd;box-shadow:inset 0 0 0 1px #6b805f}.unit-row{grid-template-columns:1.5fr 1fr;gap:8px;display:grid}.pixel-summary{color:#808879;margin:-10px 0 24px;font-size:9px}.swatches{align-items:center;gap:9px;display:flex}.swatches button{border:1px solid #d1d6c9;border-radius:50%;width:24px;height:24px}.swatches button.chosen{outline-offset:3px;outline:1px solid #6d805c}.frame-settings .section-heading{margin-bottom:10px}.photo-filename{color:#8a9180;white-space:nowrap;text-overflow:ellipsis;margin-bottom:22px;font-size:10px;overflow:hidden}.frame-actions{justify-content:space-between;align-items:center;gap:10px;margin:0 0 22px;display:flex}.secondary{background:0 0;border:1px solid #d0d8c5;border-radius:5px;padding:8px 10px;font-size:10px}.secondary:hover:not(:disabled){background:#edf0e5}.text-button{color:#8c6c55;background:0 0;border:0;padding:8px 0;font-size:10px}.wide{width:100%}.tip-card{background:#e9ecdf;border-radius:5px;margin-top:15px;padding:20px}.tip-card p{color:#627055;margin:12px 0;font-family:Georgia,serif;font-size:20px;line-height:1.3}.tip-card>span:last-child{color:#919985;font-size:10px;line-height:1.8}.storage-note{color:#949a8d;margin-top:22px;font-size:9px;line-height:1.8}.export-dialog{color:#354033;background:#faf9f5;border:1px solid #d9ddcf;border-radius:12px;width:min(440px,100vw - 32px);max-height:90dvh;padding:28px;box-shadow:0 25px 100px #18211338}.export-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#24332666}.dialog-heading{justify-content:space-between;align-items:center;display:flex}.export-dialog h2{letter-spacing:-.4px;margin:10px 0 6px;font-size:20px;font-weight:650}.muted{color:#88907e;margin-bottom:25px;font-size:12px}.export-dimensions{background:#e9ecdf;border-radius:5px;flex-direction:column;gap:5px;padding:18px;display:flex}.export-dimensions strong{letter-spacing:-.5px;font-size:22px}.export-dimensions span{color:#818c73;font-size:10px}.export-action{width:100%;margin-top:20px}.notice,.error,.success{border-radius:5px;padding:12px;font-size:11px;line-height:1.7}.notice{color:#80673d;background:#f3ead7}.error{color:#8a4834;background:#f6e6de}.success{color:#526746;background:#e8eedc}.editor-message{justify-content:space-between;align-items:center;gap:12px;margin:15px 20px 0;display:flex}.editor-message button,.update-banner button{white-space:nowrap;background:0 0;border:1px solid;border-radius:4px;font-size:10px}.update-banner{background:#e2e9d8;justify-content:center;gap:16px;padding:9px 30px;font-size:12px;display:flex}.loading{text-align:center;color:#7d8971;padding:80px}@media (width>=1600px){.workspace{grid-template-columns:310px minmax(360px,1fr) 290px}.sidebar,.settings{padding-left:32px;padding-right:32px}.canvas-area{padding-top:50px;padding-bottom:40px}}@media (width>=1101px){html,body,#app{height:100%;overflow:hidden}.workspace{height:calc(100dvh - 76px);min-height:0}.sidebar,.settings{overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0;overflow-y:auto}.editor{min-height:0}}@media (width<=1100px){.workspace{grid-template-columns:240px minmax(300px,1fr)}.sidebar{grid-row:span 2;padding:24px 18px}.settings{border-top:1px solid #dedfd6;border-left:0;grid-column:2;grid-template-columns:1fr 1fr;gap:24px;padding:24px;display:grid}.tip-card,.storage-note{display:none}.settings section{margin:0}.canvas-area{min-height:400px;padding:30px 28px}.editor-footer{padding:18px}.layout-grid{gap:6px}.layout-option{padding:8px 4px}.editor-footer>span{max-width:140px}}@media (width<=650px){.topbar{height:70px;padding:0 20px}.brand{font-size:26px}.connection{font-size:9px}.workspace{flex-direction:column;display:flex}.sidebar{border-right:0;grid-template-columns:1fr;gap:0;padding:20px;display:grid}.intro{border:0!important;margin-bottom:0!important;padding-bottom:18px!important}.sidebar section{margin-bottom:18px;padding-bottom:18px}.sidebar section:last-of-type{border:0;margin:0;padding:0}.layout-grid{grid-template-columns:repeat(6,1fr);gap:6px}.layout-mini{width:30px;height:27px}.layout-option>span:last-child{font-size:7px}.layout-option{padding:8px 2px}.upload-area{padding:12px}.upload-area .upload-symbol,.upload-area small{display:none}.photo-grid{grid-template-columns:repeat(6,1fr);max-height:130px}.editor-toolbar{padding:16px 20px}.canvas-area{min-height:350px;padding:26px 24px 20px}.canvas-hint{font-size:9px}.settings{grid-template-columns:1fr 1fr;gap:20px;padding:22px 20px}.editor-footer{z-index:3;position:sticky;bottom:0;box-shadow:0 -3px 12px #3344240a}.empty-frame{font-size:9px}.frame-actions{flex-direction:column;align-items:stretch;gap:0}.swatches{flex-wrap:wrap;gap:6px}.settings .section-heading{flex-direction:column;align-items:start;gap:4px}.project-title input{max-width:220px}.canvas-meta{font-size:8px}.editor-footer>span{max-width:160px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.photo-item{min-width:0;position:relative}.photo-item .photo-thumb{width:100%;display:block}.remove-photo{opacity:0;background:#faf9f5e8;border:0;border-radius:50%;width:20px;height:20px;font-size:15px;line-height:16px;position:absolute;top:2px;right:2px}.photo-item:hover .remove-photo,.photo-item:focus-within .remove-photo{opacity:1}@media (hover:none){.remove-photo{opacity:1}}