:root{color:#111827;background:#eef2f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}.host-shell{background:#eef2f7;grid-template-rows:auto minmax(0,1fr) auto;min-height:100vh;display:grid}.host-board{background:#e8edf5;min-height:100vh;padding:18px}.host-board-toolbar{flex-wrap:wrap;gap:8px;padding:0 0 14px;display:flex}.host-board-toolbar button{color:#111827;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:6px;min-height:36px;padding:0 12px}.host-board-toolbar button[aria-pressed=true]{color:#fff;background:#111827;border-color:#111827}.host-board-toolbar button:disabled{cursor:default;opacity:.45}.host-board-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;min-height:calc(100vh - 86px);display:grid}.host-board .host-shell{background:#eef2f7;border:1px solid #cbd5e1;min-height:0}.host-board .host-toolbar{grid-template-columns:1fr;align-content:start;gap:12px}.host-board .host-viewport{padding:12px}.host-board .host-viewport>div{min-height:320px}.host-board .host-contiguous-tool-overlay{inset:12px}.host-toolbar{background:#f8fafc;border-bottom:1px solid #d8dee8;grid-template-columns:minmax(180px,1fr) auto minmax(220px,320px) auto;align-items:center;gap:16px;min-height:72px;padding:14px 18px;display:grid}.host-brand{gap:3px;display:grid}.host-brand span{font-size:.95rem;font-weight:700}.host-brand strong{color:#526070;font-size:.82rem;font-weight:600}.host-tool-group{grid-template-columns:repeat(4,minmax(76px,1fr));gap:8px;display:grid}.host-tool-group button,.host-history-controls button{cursor:pointer;border:1px solid #d1d5db;border-radius:6px;min-height:38px;padding:0 12px}.host-history-controls{grid-template-columns:repeat(3,minmax(76px,1fr));gap:8px;display:grid}.host-history-controls button{color:#111827;background:#fff}.host-history-controls button:disabled{cursor:default;opacity:.45}.host-slider{color:#526070;grid-template-columns:auto minmax(96px,1fr) 34px;align-items:center;gap:10px;font-size:.86rem;font-weight:600;display:grid}.host-slider input{accent-color:#111827;width:100%}.host-slider output{color:#111827;text-align:right}.host-viewport-frame{min-height:0;position:relative}.host-viewport{min-height:0;padding:18px}.host-viewport>div{background-color:#f1f5f9;background-image:linear-gradient(45deg,#fff 25%,#0000 25%),linear-gradient(-45deg,#fff 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#fff 75%),linear-gradient(-45deg,#0000 75%,#fff 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border:1px solid #cbd5e1;width:100%;height:100%;min-height:420px;overflow:hidden}.host-fallback{width:100%;height:100%}.host-contiguous-tool-overlay{z-index:4;cursor:crosshair;background:#ffffff05;border:1px solid #1118274d;border-radius:0;width:auto;min-height:0;padding:0;display:block;position:absolute;inset:18px}.host-contiguous-tool-overlay:disabled{cursor:wait}.host-status{background:#f8fafc;border-top:1px solid #d8dee8;align-items:center;gap:8px;min-height:42px;padding:8px 18px;display:flex}.host-status span{color:#374151;text-align:center;background:#fff;border:1px solid #d1d5db;border-radius:6px;min-width:64px;padding:4px 8px;font-size:.78rem;font-weight:700}@media (width<=720px){.host-board{padding:12px}.host-board-grid{grid-template-columns:1fr;min-height:auto}.host-toolbar{grid-template-columns:1fr}.host-viewport{padding:12px}.host-viewport>div{min-height:360px}}