:root{font:14px system-ui,-apple-system,Segoe UI,sans-serif;color:#edf2ee;background:#111e29;--lime:#d9f78d;--muted:#9eb2bd;color-scheme:dark}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,input,select{font:inherit;color:inherit;border:1px solid #ffffff28;border-radius:7px;background:#ffffff08;min-height:35px;padding:7px 10px}button,a,select{cursor:pointer}button:hover{background:#ffffff16}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}.primary{background:var(--lime);border-color:var(--lime);color:#1b3024;font-weight:750}.primary:hover{background:#c9e980}a{color:var(--lime);text-decoration:none}kbd{font:10px system-ui;opacity:.55;padding-left:5px}.topbar{min-height:74px;display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #ffffff15;background:#152431}.brand{display:flex;align-items:center;gap:10px;font-size:27px;color:var(--lime);margin-right:20px;white-space:nowrap}.brand span{font-size:12px;color:#f2f5ed;font-weight:750;letter-spacing:2px}.brand small{display:block;font-size:8px;font-weight:500;color:var(--muted);letter-spacing:1.5px;margin-top:3px}.title-label{flex:1;min-width:90px;max-width:330px}.title-label input{width:100%;background:none;border-color:transparent;font-weight:650;font-size:16px}.title-label input:hover{border-color:#ffffff28}#draft-status{font-size:11px;color:var(--muted);margin-left:auto}#test{padding:12px 18px}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:78px minmax(250px,1fr) 270px}.tools{display:flex;flex-direction:column;padding:12px 8px;gap:6px;background:#152431;border-right:1px solid #ffffff15}.tools button{position:relative;border-color:transparent;font-size:10px;min-height:57px;padding:5px 0;color:var(--muted)}.tools button b{display:block;font-size:23px;line-height:25px;font-weight:500;color:#cfdbdc}.tools button kbd{position:absolute;top:5px;right:4px;font-size:8px}.tools button[aria-pressed=true]{color:var(--lime);background:#d9f78d13;border-color:#d9f78d55}.tools button[aria-pressed=true] b{color:var(--lime)}.tools hr{border:0;border-top:1px solid #ffffff20;width:70%;margin:7px auto}.drawing{position:relative;min-width:0;overflow:hidden;background:#1b303f}.drawing canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.canvas-top,.canvas-bottom{position:absolute;left:16px;right:16px;display:flex;align-items:center;gap:6px;pointer-events:none}.canvas-top{top:16px}.canvas-bottom{bottom:12px;justify-content:space-between;gap:15px}.canvas-top button,.canvas-bottom button{pointer-events:auto;background:#172a38ed;box-shadow:0 3px 9px #0002}.canvas-bottom p{font-size:11px;color:#b8cbd3;line-height:1.4;max-width:360px;background:#1b303fbb;padding:4px;border-radius:4px}.canvas-bottom>div{display:flex;gap:4px;flex-shrink:0}.inspector{padding:24px 18px 16px;overflow-y:auto;background:#152431;border-left:1px solid #ffffff15}h1{font-size:25px;line-height:1.1;letter-spacing:-.8px;margin:8px 0 12px;max-width:200px}h2{font-size:12px;font-weight:650;margin:0 0 9px}.eyebrow{font-size:9px;letter-spacing:1.6px;color:var(--lime)}p{line-height:1.6}.intro{font-size:12px;color:var(--muted);margin:0 0 20px}.field{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:8px}.field select{min-width:95px;max-width:130px;font-size:11px}.section{border-top:1px solid #ffffff17;margin-top:20px;padding-top:18px}.section p{font-size:11px;color:var(--muted);margin:5px 0 12px}.coordinates{display:flex;align-items:end;gap:6px}.coordinates label{font-size:10px;color:var(--muted);min-width:0}.coordinates input{display:block;width:100%;margin-top:4px;padding:6px}.coordinates button{font-size:11px}.check{font-size:11px;display:flex;align-items:center;gap:5px;margin:12px 0}.check input{accent-color:var(--lime);min-height:0}.row{display:flex;gap:6px;margin:10px 0}.row button{flex:1;font-size:11px;padding:6px}#save-library{width:100%;font-size:11px}details{margin:20px 0;font-size:11px;color:var(--muted)}summary{cursor:pointer;color:#ccd8d8;line-height:1.5}details p{font-size:11px}.templates{margin-top:20px}.back{font-size:11px}footer{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:6px 16px;background:#111e29;border-top:1px solid #ffffff15;font-size:10px;color:var(--muted)}#editor-message{color:#bfd3cc}#cursor-position{white-space:nowrap}#test-shell{position:fixed;z-index:50;inset:0;background:#101b27}#test-shell[hidden]{display:none}#test-frame{width:100%;height:100%;border:0}#back-to-editor{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);box-shadow:0 5px 30px #0007;z-index:6}#test-label{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);font-size:11px;color:#fff;pointer-events:none;text-shadow:0 2px 3px #000}dialog{background:#172b39;color:inherit;border:1px solid #ffffff30;border-radius:16px;padding:24px;width:min(440px,95vw);max-height:90dvh;overflow:auto}dialog::backdrop{background:#07121cbb;backdrop-filter:blur(5px)}dialog p{font-size:12px;color:#b7ccd0}dialog label{display:block;font-size:11px;margin:14px 0 6px}dialog input{width:100%;margin-top:5px}dialog button{margin:5px 0}dialog>.primary{width:100%;margin-top:15px}dialog .fine{font-size:10px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.dialog-heading h2{font-size:21px;margin:0}.dialog-heading button{border:0}#share-status{color:var(--lime)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:1000px){.brand{margin-right:0}.brand small{display:none}#draft-status{display:none}.workspace{grid-template-columns:66px minmax(250px,1fr) 220px}.inspector{padding:18px 12px}.topbar{gap:8px;padding:10px 12px}.canvas-bottom{align-items:end}.canvas-bottom p{max-width:200px}#cursor-position{display:none}}@media(max-width:700px){.topbar{flex-wrap:wrap}.brand{flex:1}.brand small{display:block}.title-label{order:3;max-width:none;width:100%;flex-basis:100%}.workspace{grid-template-columns:58px minmax(220px,1fr)}.inspector{display:none}.topbar button{font-size:12px}#test{padding:8px 12px}.canvas-top{left:8px;right:8px}.canvas-top button{font-size:10px}.canvas-bottom{left:8px;right:8px}.canvas-bottom p{display:none}.canvas-bottom>div{margin-left:auto}.brand span{font-size:10px}footer{font-size:9px}}
/* Targeted zoom and phone editing controls. */
.workspace{position:relative}.tools{overflow-y:auto;min-height:0;touch-action:pan-y}.tools button{flex-shrink:0}#zoom-level{font-size:11px;min-width:44px;align-self:center;text-align:center;color:var(--lime);font-variant-numeric:tabular-nums}.mobile-inspector-toggle,#inspector-close{display:none}#focus-point{width:100%;margin:0 0 12px;font-size:12px}
@media(pointer:coarse){button,input,select{min-height:44px}.tools button{min-height:52px}.tools button[aria-pressed=true]{border-width:2px}}
@media(max-width:700px){.mobile-inspector-toggle{display:block;min-height:44px;min-width:84px;font-size:11px;padding:6px}#inspector-close{display:block;width:100%;min-height:44px;margin-bottom:12px}.inspector.is-open{display:block;position:absolute;z-index:20;top:8px;bottom:8px;right:8px;width:min(300px,calc(100% - 74px));padding:12px;border:1px solid #a7c6d255;border-radius:12px;box-shadow:0 12px 45px #0009;overscroll-behavior:contain;touch-action:pan-y}.inspector.is-open .eyebrow,.inspector.is-open h1,.inspector.is-open .intro{display:none}.canvas-bottom{gap:6px}.canvas-bottom>div{position:relative;gap:4px}.canvas-bottom button{min-height:44px;font-size:11px;padding:6px}.canvas-bottom #zoom-in,.canvas-bottom #zoom-out{min-width:44px}#zoom-level{position:absolute;right:0;bottom:51px;background:#172a38e8;border-radius:6px;padding:4px 6px}.coordinates input{font-size:16px;min-height:44px}.inspector button{min-height:44px}}
@media(max-height:500px){.tools{padding:6px;gap:2px}.tools button{min-height:44px}.tools button b{font-size:18px;line-height:20px}.tools hr{margin:3px auto}.topbar{min-height:58px;padding-top:7px;padding-bottom:7px}.canvas-top{top:8px}.canvas-bottom{bottom:8px}}
@media(max-width:700px){.brand small{display:none}}
@media(max-width:700px){.canvas-bottom .area-hint{display:block;position:absolute;left:0;right:55px;bottom:100%;max-width:none;margin:0 0 4px}}

#delete-actions { display: none; position: relative; margin: 0; pointer-events: auto; }
#delete-actions summary {
  display: flex; align-items: center; gap: 4px; min-height: 44px;
  padding: 6px 10px; border: 1px solid #ffffff28; border-radius: 7px;
  background: #172a38ed; color: #edf2ee; list-style: none; white-space: nowrap;
}
#delete-actions summary::-webkit-details-marker { display: none; }
#delete-actions summary::after { content: '▾'; }
#delete-actions summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
#delete-actions .delete-options {
  position: absolute; z-index: 2; top: calc(100% + 4px); right: 0;
  display: grid; min-width: 132px; gap: 4px; padding: 4px;
  border: 1px solid #ffffff28; border-radius: 8px; background: #152431;
  box-shadow: 0 5px 18px #0005;
}
#delete-actions:not([open]) .delete-options { display: none; }
#delete-actions .delete-options button { min-height: 44px; font-size: 12px; text-align: left; }
@media (max-width: 700px), (pointer: coarse) {
  #delete-actions:not([hidden]) { display: block; }
}
@media (max-width: 390px) {
  .canvas-top { gap: 3px; }
  .canvas-top > button, #delete-actions summary { padding-inline: 5px; white-space: nowrap; }
}