:host{display:inline-block;position:relative;font:14px/1.5 ui-sans-serif,system-ui,sans-serif;--wb-bg:#20150f;--wb-panel:#2b1c14;--wb-ink:#f4e8d4;--wb-muted:#d8c1a4;--wb-gold:#ffd46f;--wb-line:#725339;color:var(--wb-ink)}
*{box-sizing:border-box}button,input,textarea{font:inherit}button{cursor:pointer;min-height:44px;padding:.5rem .7rem;border:1px solid var(--wb-line);background:var(--wb-panel);color:var(--wb-ink);border-radius:4px}button:hover{border-color:var(--wb-gold)}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--wb-gold);outline-offset:3px}.launcher{font-size:12px;padding:.4rem .6rem;background:transparent;color:inherit;border-color:currentColor}#colours{display:none;position:fixed;inset:auto 24px auto auto;top:var(--workbench-top,80px);margin:0;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - var(--workbench-top,80px) - 16px);overflow:auto;padding:0;border:1px solid var(--wb-gold);border-radius:7px;background:var(--wb-bg);color:var(--wb-ink);box-shadow:0 16px 60px #0009}#colours:popover-open{display:block}#colours.fallback-open{display:block}#colours::backdrop{background:transparent}header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--wb-line);gap:1rem}header small{color:var(--wb-gold);font-size:10px;letter-spacing:.12em;text-transform:uppercase}h2{font:400 24px/1.2 Georgia,serif;margin:3px 0 0}h3{font:600 12px/1.5 system-ui,sans-serif;letter-spacing:.04em;margin:0 0 10px}.workspace{display:grid;grid-template-columns:20% 80%;min-height:400px}aside{padding:16px 10px;border-right:1px solid var(--wb-line);background:var(--wb-panel);min-width:0}.schemes{display:grid;gap:8px}.schemes button{text-align:left;width:100%;font-size:12px;overflow-wrap:anywhere;padding:8px}.schemes small{display:block;font-size:10px;color:var(--wb-muted)}.schemes [aria-pressed=true]{border-color:var(--wb-gold);box-shadow:inset 3px 0 var(--wb-gold)}.controls{padding:16px 22px;min-width:0}.hint{font-size:12px;color:var(--wb-muted);margin:0 0 12px}.field{display:grid;grid-template-columns:minmax(90px,1fr) 56px 110px;align-items:center;gap:12px;border-top:1px solid var(--wb-line);padding:8px 0}.field label{font-weight:600}.field input[type=color]{width:56px;height:44px;padding:3px;background:var(--wb-panel);border:1px solid var(--wb-line);cursor:pointer}.hex,input:not([type=color]),textarea{width:100%;min-width:0;min-height:44px;border:1px solid var(--wb-line);background:var(--wb-panel);color:var(--wb-ink);padding:8px;border-radius:3px}.hex{font-family:ui-monospace,monospace}input[aria-invalid=true]{outline:2px solid var(--wb-gold)}.contrast{font-size:11px;line-height:1.6;color:var(--wb-muted);margin:10px 0 16px}.save{border-top:1px solid var(--wb-line);padding-top:12px}.save label{display:block;margin-bottom:6px;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.actions button{font-size:12px}.actions [data-save]{background:var(--wb-gold);color:var(--wb-bg);border-color:var(--wb-gold)}.status{font-size:12px;min-height:1.5em;color:var(--wb-gold)}.export{display:block;font-size:12px}.export[hidden]{display:none}.export textarea{font:12px/1.5 ui-monospace,monospace;resize:vertical;min-height:140px}footer{padding:16px}
@media(max-width:540px){#colours{inset:12px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.workspace{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--wb-line);padding:12px 16px}.schemes{grid-template-columns:repeat(2,minmax(0,1fr))}.controls{padding:12px 16px}.field{grid-template-columns:minmax(60px,1fr) 44px 100px;gap:8px}.field input[type=color]{width:44px}.workspace{min-height:0}header{padding:12px 16px}}
@media(forced-colors:active){button,input,#colours{border-color:CanvasText}.schemes [aria-pressed=true]{outline:2px solid Highlight}}

:host([launcher-hidden]) .launcher{display:none}