:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202735;background:#f4f6f9}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid #dce1e8;border-radius:8px;padding:9px 12px;background:white;color:#344054;font-size:13px;font-weight:550}button:hover:not(:disabled){background:#eef2ff}button:disabled{opacity:.42;cursor:not-allowed}.primary{background:#4b52d4;color:white;border-color:#4b52d4}.primary:hover:not(:disabled){background:#353bb3}header{height:68px;display:flex;align-items:center;gap:20px;background:#fff;border-bottom:1px solid #e6e9ef;padding:0 22px}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:18px}.logo{background:#4b52d4;color:white;border-radius:10px;padding:5px 10px;font-size:24px}.tag{font-size:10px;letter-spacing:.7px;color:#4b52d4;background:#edf0ff;border-radius:5px;padding:3px 6px}.filename{flex:1;text-align:center;font-size:13px;color:#667085;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-actions{display:flex;gap:9px}.app{display:grid;grid-template-columns:205px minmax(0,1fr) 240px;height:calc(100vh - 68px)}aside,.inspector{background:#fff;min-height:0;display:flex;flex-direction:column}aside{border-right:1px solid #e4e8ef}.inspector{border-left:1px solid #e4e8ef}.aside-title{padding:21px 17px 14px;font-size:11px;letter-spacing:1.1px;font-weight:750;color:#798292;display:flex;justify-content:space-between}.thumbs{overflow-y:auto;flex:1;padding:8px 15px}.thumb{margin:0 auto 15px;text-align:center;border:2px solid transparent;padding:7px;border-radius:9px;cursor:pointer}.thumb.selected{background:#f0f1ff;border-color:#6970e8}.thumb canvas{max-width:100%;box-shadow:0 2px 8px #10182822;background:white}.thumb span{display:block;font-size:12px;margin-top:6px;color:#667085}.hint,.muted{font-size:12px;color:#8a93a3;line-height:1.6}.aside-bottom{display:flex;padding:12px;gap:7px;border-top:1px solid #edf0f4}.aside-bottom button{flex:1;padding:8px 2px}main{display:flex;flex-direction:column;min-width:0;min-height:0}.toolbar{background:white;border-bottom:1px solid #e5e9ef;min-height:61px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px}.toolset{display:flex;align-items:center;gap:5px}.toolset button{padding:8px 10px}.toolset button.active{background:#edf0ff;color:#4b52d4;border-color:#b9bdfb}.separator{height:24px;border-left:1px solid #e3e6ee}.toolset span{font-size:12px;color:#475467;min-width:49px;text-align:center}.workspace{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:35px;background:#edf0f5}.welcome{max-width:440px;text-align:center;margin:auto;padding:25px}.welcome-icon{font-size:55px;color:#5d64d7}.welcome h1{font-size:25px;margin:18px 0 10px}.welcome p{font-size:14px;color:#667085;line-height:1.7}.welcome small{display:block;color:#98a2b3;margin-top:20px;line-height:1.6}.big{padding:13px 22px;margin-top:12px}.page-wrap{position:relative;background:white;box-shadow:0 8px 35px #25334c25;flex:none;line-height:0}.page-wrap canvas{display:block}.overlay{position:absolute;inset:0;cursor:default;line-height:normal;touch-action:none}.annotation{position:absolute;cursor:move;white-space:pre-wrap;line-height:1.2}.annotation.selected{outline:1px dashed #4b52d4}.highlight{opacity:.38}.status{height:30px;padding:7px 16px;background:white;border-top:1px solid #e7eaf0;color:#86909e;font-size:11px}.panel{padding:16px;border-top:1px solid #edf0f4}.panel h3{font-size:13px;margin:0 0 13px}.panel button{width:100%;text-align:left;margin-bottom:8px}.panel label{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:13px 0}.panel input[type=number]{width:70px;padding:5px;border:1px solid #d6dbe4;border-radius:5px}.panel input[type=color]{width:42px;height:30px;border:0;background:none}@media(max-width:1100px){.app{grid-template-columns:170px minmax(0,1fr)}.inspector{display:none}}@media(max-width:700px){header{padding:0 9px;gap:8px}.filename{display:none}.brand{font-size:14px}.tag{display:none}.header-actions{margin-left:auto}.header-actions button{padding:8px 6px;font-size:11px}.app{grid-template-columns:minmax(0,1fr)}aside{display:none}.toolbar{gap:5px;justify-content:flex-start}.separator{display:none}.toolset button{padding:7px}.workspace{padding:18px}}

/* v0.2 responsive editor */
.modal[hidden]{display:none}.modal{position:fixed;inset:0;background:#101828a8;z-index:100;display:grid;place-items:center;padding:15px}.modal-card{background:white;border-radius:16px;padding:20px;width:min(100%,540px)}.modal-card h2{margin:0 0 8px}.modal-card p{font-size:13px;color:#667085}.modal-card canvas{width:100%;height:auto;background:#f8fafc;border:1px solid #d0d5dd;border-radius:8px;touch-action:none}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.annotation img{display:block;pointer-events:none}.annotation svg{pointer-events:none}@media(max-width:700px){header{height:auto;min-height:60px;flex-wrap:wrap;padding:8px}.app{height:calc(100dvh - 70px)}.header-actions{gap:4px}.toolbar{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;min-height:54px}.toolset{flex-shrink:0}.workspace{padding:12px;justify-content:flex-start}.page-wrap{margin:auto}.status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* v0.3 advanced tools: fixed access on desktop and mobile */
.advanced-tools{position:fixed;right:14px;bottom:42px;z-index:40;max-width:min(420px,calc(100vw - 28px));background:var(--panel,#fff);color:var(--text,#172033);border:1px solid #9ca3af;border-radius:12px;box-shadow:0 8px 28px #0003;padding:10px}
.advanced-tools summary{cursor:pointer;font-weight:700;padding:5px}.advanced-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.advanced-grid button{min-height:40px;white-space:normal}.advanced-tools .muted{font-size:12px;line-height:1.4}
@media(max-width:700px){.advanced-tools{left:8px;right:8px;bottom:38px;max-width:none}.advanced-grid button{min-height:46px}.advanced-tools:not(:has(details[open])){left:auto}}

/* v0.4 mobile, theme and drop-zone improvements */
.drop-hint:not([hidden]){position:fixed;inset:12px;z-index:200;display:grid;place-items:center;border:4px dashed #4b52d4;border-radius:18px;background:#eef2ffed;font-size:24px;font-weight:700;pointer-events:none}
body.dark-mode{background:#151a24;color:#e7ebf4}
body.dark-mode header,body.dark-mode aside,body.dark-mode .inspector,body.dark-mode .toolbar,body.dark-mode .status,body.dark-mode .advanced-tools{background:#222b3b;color:#e7ebf4;border-color:#465269}
body.dark-mode button{background:#313c50;color:#f1f5ff;border-color:#59657a}
body.dark-mode button.primary{background:#4b52d4}
body.dark-mode .workspace{background:#131a27}
body.dark-mode .filename,body.dark-mode .muted,body.dark-mode .hint{color:#a9b8cd}
@media(max-width:700px){.advanced-tools details[open]{max-height:60dvh;overflow:auto}.advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions button{min-height:40px}.toolset button{min-height:40px}}

/* v0.5 website navigation and responsive accessibility */
.site-nav{display:flex;gap:6px;align-items:center;overflow-x:auto;padding:8px 16px;background:#fff;border-bottom:1px solid #e6e9ef;scrollbar-width:thin}
.site-nav a{flex:none;padding:7px 12px;border-radius:8px;text-decoration:none;color:#3f46aa;font-size:12px;font-weight:650;background:#f0f2ff}
.site-nav a:hover,.site-nav a:focus-visible{background:#dfe3ff;outline:2px solid #4b52d4}
.app{height:calc(100dvh - 68px - 49px - 29px)}
.site-footer{height:29px;display:flex;justify-content:center;align-items:center;gap:7px;font-size:11px;background:#fff;border-top:1px solid #e6e9ef}
.site-footer a{color:#4b52d4}
body.dark-mode .site-nav,body.dark-mode .site-footer{background:#222b3b;border-color:#465269}
body.dark-mode .site-nav a{background:#313c50;color:#e7ebf4}
@media(max-width:700px){.app{height:calc(100dvh - 76px - 49px - 29px)}.site-nav{padding:6px 8px}.site-nav a{min-height:35px;display:flex;align-items:center}}

/* v0.8.1: Keep Advanced Tools collapsible on desktop and mobile. */
.advanced-tools{max-height:calc(100dvh - 65px);display:flex;flex-direction:column;min-height:0}
.advanced-tools details{min-height:0;display:flex;flex-direction:column;max-height:calc(100dvh - 88px)}
.advanced-tools details[open]{overflow-y:auto;overscroll-behavior:contain}
.advanced-tools summary{position:sticky;top:0;z-index:2;background:var(--panel,#fff);border-radius:6px;list-style-position:inside}
body.dark-mode .advanced-tools summary{background:#222b3b}
@media(max-width:700px){.advanced-tools details[open]{max-height:60dvh}}

/* v0.9 usability */
:where(button, a, input, summary):focus-visible{outline:3px solid #6474ef;outline-offset:2px}
.advanced-tools summary{min-height:40px;display:flex;align-items:center;touch-action:manipulation}
.advanced-tools details[open]{scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:700px){.advanced-tools{max-height:min(72dvh,650px)}.advanced-tools details{max-height:calc(min(72dvh,650px) - 20px)}}

/* v1.0.1: Compact tools menu and viewport-height editor layout. */
html,body{min-height:100%;}
body{display:flex;flex-direction:column;min-height:100dvh;height:100dvh;overflow:hidden}
header{flex:0 0 auto}
.site-nav{flex:0 0 auto;min-height:49px;overflow:visible;position:relative;z-index:50;justify-content:space-between;padding:6px 16px}
.nav-context{font-size:12px;font-weight:700;color:#667085}
.app{height:auto!important;flex:1 1 auto;min-height:0;overflow:hidden}
.app aside,.app main,.app .inspector{min-height:0}
.inspector{overflow-y:auto;overscroll-behavior:contain}
.site-footer{height:auto;min-height:29px;flex:0 0 auto;flex-wrap:wrap;padding:5px 12px;position:relative;z-index:1}
.advanced-tools{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;max-width:none!important;max-height:none!important;min-height:0;display:block;padding:0;border:0;box-shadow:none;background:transparent!important;color:inherit}
.advanced-tools details{display:block;max-height:none!important;overflow:visible!important}
.advanced-tools summary{position:relative;top:auto;min-height:35px;display:flex;align-items:center;padding:7px 12px;background:#edf0ff!important;border:1px solid #cfd4fb;border-radius:8px;color:#3f46aa;font-size:12px;white-space:nowrap;cursor:pointer}
.advanced-tools details[open] summary{background:#dfe3ff!important}
.advanced-tools details[open]>.advanced-grid{display:grid}
.advanced-tools .advanced-grid{position:absolute;right:0;top:calc(100% + 3px);width:min(540px,calc(100vw - 24px));max-height:min(65dvh,600px);overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:14px;background:#fff;border:1px solid #dce1e8;border-radius:12px;box-shadow:0 12px 32px #0002;z-index:60}
.advanced-tools .muted{display:none}
body.dark-mode .advanced-tools summary{background:#313c50!important;color:#e7ebf4;border-color:#59657a}
body.dark-mode .advanced-tools .advanced-grid{background:#222b3b;border-color:#465269}
@media(max-width:700px){body{height:100dvh}.site-nav{min-height:45px;padding:5px 9px}.advanced-tools .advanced-grid{grid-template-columns:1fr;max-height:65dvh}.site-footer{font-size:10px}.advanced-tools details[open]{overflow:visible!important}}

/* v1.0.2: discoverable category tabs with accessible panels; preserve fixed editor height. */
.site-nav.tool-category-nav{display:block;flex:0 0 auto;padding:0;min-height:0;overflow:visible;position:relative;z-index:50;background:#fff}
.category-tabs{display:flex;gap:4px;align-items:center;padding:7px 14px;overflow-x:auto;scrollbar-width:thin;white-space:nowrap;border-bottom:1px solid #e6e9ef}
.category-tab{flex:0 0 auto;border:0;background:transparent;border-radius:7px;color:#596579;padding:9px 16px;min-height:37px}
.category-tab.active,.category-tab[aria-selected="true"]{background:#e9ecff;color:#3f46aa;font-weight:750}
.category-tab:focus-visible{outline:2px solid #4b52d4;outline-offset:1px}
.category-panels{background:#fff;border-bottom:1px solid #e6e9ef;padding:7px 14px}
.category-panel[hidden]{display:none!important}
.category-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px;max-height:100px;overflow-y:auto}
.category-actions button{flex:0 0 auto;min-height:36px;padding:7px 11px}
body.dark-mode .site-nav.tool-category-nav,body.dark-mode .category-panels{background:#222b3b;border-color:#465269}
body.dark-mode .category-tab{color:#d4d9e5}
body.dark-mode .category-tab.active{background:#394477;color:#fff}
@media(max-width:700px){.category-tabs{padding:5px 8px}.category-tab{padding:8px 12px}.category-panels{padding:6px 8px}.category-actions{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none}.category-actions button{white-space:nowrap}}