/* Adopt the shared page foundation; the detached implementation supplied only workspace styles. */
:root{font-family:var(--tools-sans);font-synthesis:none;color:var(--tools-text);background:var(--tools-bg)}
*{box-sizing:border-box}body{margin:0;min-width:0;min-height:100vh;background:var(--tools-bg)}
main{max-width:1040px;margin:0 auto;padding:clamp(24px,5vw,56px) 20px 80px;color:var(--tmb-text)}.hero{max-width:850px;margin:0 auto 38px}.hero h1{font-family:var(--tmb-font-serif);font-size:clamp(2.5rem,6vw,4.25rem);line-height:1.1;margin:12px 0}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-weight:700;font-size:.8rem}.hero-copy{font-size:1.12rem;max-width:64ch}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:26px}.editor,.output{border:1px solid var(--tmb-border, #9ba5a7);border-radius:var(--tmb-radius-card,24px);padding:clamp(18px,3vw,28px);background:var(--tmb-surface)}h2{font-family:var(--tmb-font-serif);font-size:1.65rem;margin:0 0 12px}.section-head p,.hint,.output-size,.status{font-size:.91rem;opacity:.9}.mode-group{display:flex;gap:18px;border:0;padding:12px 0 16px;margin:0}.mode-group legend,.field-label{font-weight:700;font-size:.95rem}.mode-group label{display:flex;gap:8px;align-items:center;min-height:44px}.field-label{display:block;margin:12px 0 7px}textarea,input[type=url],input[type=text],select{box-sizing:border-box;width:100%;padding:12px 13px;border:1px solid #7b8c91;border-radius:10px;background:var(--tmb-surface);color:var(--tmb-text);font:inherit;min-height:44px}textarea{resize:vertical;min-height:120px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:16px}.settings>div{min-width:0}.settings input[type=color]{width:100%;height:48px;cursor:pointer}.settings input[type=range]{width:100%;min-height:44px}button{font:inherit;min-height:44px;border:0;border-radius:11px;padding:10px 18px;cursor:pointer;background:var(--tools-action);color:var(--tools-on-action);font-weight:700}button.secondary{background:transparent;color:var(--tmb-text);border:1px solid currentColor}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--tools-green);outline-offset:3px}.field-error{color:#ae3838;opacity:1}.output{text-align:center}.qr-frame{display:flex;align-items:center;justify-content:center;margin:20px auto;padding:15px;min-height:240px;background:#eceff0;border-radius:17px;overflow:hidden}.qr-frame canvas{max-width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated}.empty-message{color:#34484d}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.output-size{font-family:var(--tmb-font-mono)}.status{min-height:1.5em}@media(max-width:740px){.workspace{grid-template-columns:1fr}.hero{margin-bottom:22px}}@media(max-width:370px){.settings{grid-template-columns:1fr 1fr;gap:8px}.editor,.output{padding:16px}.actions button{flex:1 1 100%}}@media(prefers-color-scheme:dark){.qr-frame{background:#d8e0df}.field-error{color:#ff9e9e}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Match the shared utility workspace and native control roles. */
.utility-tool .workspace { gap: 0; border: 1px solid var(--tools-line); border-radius: 24px; background: var(--tools-surface); box-shadow: var(--tools-shadow); overflow: hidden; }
.utility-tool .editor, .utility-tool .output { padding: 28px; border: 0; border-radius: 0; box-shadow: none; }
.utility-tool .output { border-left: 1px solid var(--tools-line); background: var(--tools-surface-soft); }
.utility-tool .workspace h2 { font: 500 clamp(1.8rem, 3vw, 2.5rem)/1.1 var(--tools-serif); letter-spacing: -.035em; }
.utility-tool .eyebrow { color: var(--tools-green-text); font: 700 .76rem/1.2 var(--tools-mono); }
.utility-tool input[type=radio], .utility-tool input[type=range] { accent-color: var(--tools-green); }
.utility-tool input[type=color] { width: 58px; height: 44px; padding: 3px; border: 1px solid var(--tools-line); border-radius: 10px; background: var(--tools-surface); }
.utility-tool input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.utility-tool input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.utility-tool input[type=color]::-moz-color-swatch { border: 0; border-radius: 6px; }
.utility-tool .actions button:first-child { min-height: 48px; }
.utility-tool button:not(:disabled):active { transform: scale(.985); }
@media (hover: hover) { .utility-tool .actions button:not(.secondary):not(:disabled):hover { background: var(--tools-action-hover); } .utility-tool button.secondary:not(:disabled):hover { border-color: var(--tools-green); } }
@media (max-width: 760px) { .utility-tool .output { border-left: 0; border-top: 1px solid var(--tools-line); } .utility-tool .editor, .utility-tool .output { padding: 22px; } }