@import url('/tools-tokens.css');
.tools-main{--accent:#765496;--bg:#f4f0e9;--bg-secondary:#eae5dd;--label:#201d20;--label-secondary:#655b65;--separator:#c6bfc6;max-width:1360px;margin:0 auto;padding:140px 32px 80px;font-family:alcyone,sans-serif;color:var(--label);font-optical-sizing:auto}
[data-theme=dark] .tools-main{--bg:#120d20;--bg-secondary:#20192e;--label:#f8f6ff;--label-secondary:#c1b8d0;--separator:#51475f;--accent:#b8a0e0}
.tools-main :is(h1,h2,h3,label,summary,strong){color:var(--label)}
.tools-main *{box-sizing:border-box}.tools-main [hidden]{display:none!important}
.tool-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}.tool-heading h1{font-size:2.5rem;line-height:1.1;letter-spacing:-.025em;margin:12px 0}.tool-heading p{color:var(--label-secondary);max-width:58ch;margin:0;line-height:1.5}.tool-heading a{color:var(--label-secondary);text-underline-offset:4px}.tool-heading .tool-version{font-size:.8rem;flex-shrink:0}
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}.tool-inspector{border-top:1px solid var(--separator);padding-top:20px;min-width:0}.tool-inspector h2{font-size:1.125rem;margin:0 0 24px}.tool-inspector>label,.tool-inspector>details,.tool-inspector>.field{margin-bottom:20px}.tools-main label,.field{display:grid;gap:8px;min-width:0}.tools-main input:not([type=range]):not([type=checkbox]),.tools-main select,.tools-main textarea{width:100%;min-height:46px;background:var(--bg);color:var(--label);border:1px solid var(--separator);border-radius:10px;padding:11px 12px;font:inherit;font-size:1rem;caret-color:var(--accent)}.tools-main textarea{resize:vertical;min-height:110px}.tools-main input[type=range]{width:100%;accent-color:var(--accent);height:28px}.tools-main input[type=color]{padding:3px!important}.tools-main input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.check-label{display:flex!important;align-items:center;gap:10px!important}
.tools-main button,.tools-main .file-pick{min-height:44px;border:1px solid var(--separator);border-radius:10px;background:transparent;color:var(--label);padding:10px 16px;font:inherit;cursor:pointer;text-align:center;transition:transform 100ms,background-color 150ms}.tools-main button:active,.tools-main .file-pick:active{transform:scale(.98)}.tools-main button:hover{background:var(--bg-secondary)}.tools-main button.primary,.tools-main .file-pick{background:var(--label);color:var(--bg);border-color:transparent}.tools-main button:disabled{opacity:.45;cursor:default}.tools-main :focus-visible{outline:2px solid var(--accent);outline-offset:4px}.tools-main ::selection{background:var(--accent);color:var(--bg)}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.tool-actions button{flex:1}.tool-status{min-height:24px;margin:20px 0;color:var(--label-secondary);overflow-wrap:anywhere}.tool-status.is-error{color:#a52d38}[data-theme=dark] .tool-status.is-error{color:#ffafb5}.tool-help{font-size:.875rem;line-height:1.5;color:var(--label-secondary)}.tools-main summary{cursor:pointer;min-height:44px;padding:12px 0}.tools-main details>label{margin:12px 0}.tools-main code{font-family:ui-monospace,monospace;font-size:.875rem;overflow-wrap:anywhere}
.drop-surface{border:1px dashed var(--separator);border-radius:16px;background:var(--bg);padding:32px;text-align:center;min-height:240px;display:grid;place-content:center;gap:16px}.drop-surface h2{font-size:1.75rem;font-weight:400;margin:0;letter-spacing:-.02em}.drop-surface p{margin:0;color:var(--label-secondary)}.drop-surface[data-drag=true]{outline:3px solid var(--accent)}.file-pick{position:relative;display:inline-flex!important;justify-content:center;align-items:center;overflow:hidden}.file-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.file-pick:focus-within{outline:2px solid var(--accent);outline-offset:4px}
.image-stage{background:var(--bg-secondary);border-radius:16px;padding:20px;min-height:360px;overflow:auto;max-height:640px;display:grid;align-items:center}.comparison{position:relative;width:100%;margin:auto;line-height:0}.comparison img{display:block;width:100%;height:auto}.comparison img+img{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}.stage-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:16px 0}.stage-bar strong{font-weight:500;overflow-wrap:anywhere}.stage-bar select{width:auto!important;min-width:110px}.compare-labels{display:flex;justify-content:space-between;color:var(--label-secondary);font-size:.875rem}.file-list{display:flex;gap:8px;overflow-x:auto;padding:8px 2px;margin-top:20px}.file-row{display:grid!important;grid-template-columns:40px minmax(80px,150px);gap:6px 10px;text-align:left!important;flex-shrink:0}.file-row img{width:40px;height:40px;object-fit:cover;grid-row:span 2;border-radius:4px}.file-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-row small{color:var(--label-secondary)}.file-row[aria-pressed=true]{border-color:var(--accent)}.result-summary{font-variant-numeric:tabular-nums;line-height:1.5}.tool-note{border-top:1px solid var(--separator);padding-top:24px;margin-top:48px;max-width:72ch;line-height:1.6;color:var(--label-secondary)}
@media(max-width:1024px){.tool-layout{grid-template-columns:minmax(0,1fr)}.tool-inspector{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.tool-inspector h2,.tool-inspector .tool-actions,.tool-inspector .tool-help{grid-column:1/-1}.image-stage{min-height:260px}.tool-heading{align-items:start}}
@media(max-width:600px){.tools-main{padding:112px 18px 48px}.tool-heading{display:block;margin-bottom:24px}.tool-heading h1{font-size:2rem}.tool-heading .tool-version{margin-top:12px}.tool-inspector{display:block}.drop-surface{padding:24px 16px}.image-stage{padding:10px;min-height:220px}.stage-bar{align-items:start;flex-wrap:wrap}.tool-actions{gap:8px}.tool-actions button{flex-basis:140px}.tool-layout{gap:24px}}
@media(prefers-reduced-motion:reduce){.tools-main button{transition:none;transform:none!important}}

.qr-layout{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:64px;align-items:start}.qr-content>label,.qr-content [data-content]>label{margin-bottom:20px}.qr-content details{border-top:1px solid var(--separator);margin-top:24px}.qr-content details label{margin-bottom:16px}.qr-colors{display:grid;grid-template-columns:1fr 1fr;gap:16px}.qr-stage{background:var(--bg-secondary);border-radius:16px;min-height:420px;display:grid;place-items:center;padding:40px}.qr-stage canvas{width:min(100%,380px);height:auto;display:block;border-radius:4px}.qr-proof-status{font-size:1.125rem;margin:20px 0 10px}.qr-payload{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;font-size:.875rem;margin-top:16px}.qr-proof .tool-help{margin-bottom:10px}.qr-proof details{margin-top:20px}.qr-content details input[type=number]{min-height:46px}
@media(max-width:760px){.qr-layout{grid-template-columns:minmax(0,1fr);gap:24px}.qr-stage{min-height:280px;padding:24px}.qr-content details{margin-top:12px}.qr-proof{min-width:0}}

html[data-theme=dark] body:has(.tools-main) .labs-footer .footer-nav-group a,html[data-theme=dark] body:has(.tools-main) .labs-footer .footer-mobile-navigation a,html[data-theme=dark] body:has(.tools-main) .labs-footer-brand p{color:#c1b8d0!important}

.framer-stage{background:var(--bg-secondary);min-height:420px;border-radius:16px;padding:28px;display:grid;place-items:center}.framer-stage canvas{max-width:100%;max-height:620px;width:auto;height:auto;display:block;border-radius:4px}.frame-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:24px 0}.frame-presets button{padding:6px;overflow:hidden;font-size:.8rem}.frame-presets canvas{width:100%;height:auto;display:block;border-radius:4px;margin-bottom:8px;background:var(--bg-secondary)}.frame-presets [aria-pressed=true]{border-color:var(--accent);background:var(--bg-secondary)}.frame-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.framer-layout .stage-bar{align-items:center}.framer-layout .stage-bar .tool-actions{margin-top:0}.framer-layout .tool-inspector>details{margin-bottom:12px}
@media(max-width:700px){.framer-stage{min-height:240px;padding:12px}.framer-stage canvas{max-height:500px}.frame-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.framer-layout .stage-bar .tool-actions button{flex-basis:auto}}

.meta-entry{max-width:740px}.meta-modes,.meta-platforms{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.meta-modes [aria-pressed=true],.meta-platforms [aria-pressed=true]{background:var(--label);color:var(--bg);border-color:transparent}.meta-entry details{margin:20px 0}.meta-stage{background:var(--bg-secondary);padding:28px;border-radius:16px;min-height:300px}.meta-stage>.tool-help{margin:0 0 24px}.meta-card{max-width:600px;margin:auto;overflow:hidden;border-radius:12px;background:var(--bg);font-family:Arial,sans-serif;color:var(--label)}.meta-card-copy{padding:20px}.meta-card h2{font-size:1.25rem;line-height:1.4;margin:10px 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.meta-card p{font-size:.95rem;line-height:1.5;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}.meta-site{font-size:.95rem;font-weight:600;overflow-wrap:anywhere}.meta-url{font-size:.8rem;margin-top:6px;color:var(--label-secondary);overflow-wrap:anywhere;max-height:2.6em;overflow:hidden}.meta-image{aspect-ratio:1.91;background:var(--bg-secondary)}.meta-image img{width:100%;height:100%;object-fit:cover;display:block}.meta-google h2{color:#1752ac;font-weight:400}.meta-google p{color:var(--label-secondary)}[data-theme=dark] .meta-google h2{color:#a3c5ff}.meta-discord .meta-card-copy{border-top:3px solid var(--accent)}.meta-x h2{-webkit-line-clamp:1;font-size:1rem}.meta-linkedin .meta-card-copy{padding:16px}.meta-sources,.meta-audit{margin-top:32px;border-top:1px solid var(--separator);padding-top:20px}.meta-sources h2,.meta-audit h2{font-size:1.125rem;margin:0 0 16px}.meta-sources dl{display:grid;grid-template-columns:minmax(80px,130px) 1fr;gap:12px;font-size:.875rem}.meta-sources dt{font-weight:600}.meta-sources dd{margin:0;overflow-wrap:anywhere}.meta-audit ul{list-style:none;padding:0;margin:0}.meta-audit li{padding:16px 0;border-bottom:1px solid var(--separator);overflow-wrap:anywhere}.meta-audit li p{margin:8px 0 0;line-height:1.5;color:var(--label-secondary)}.meta-raw{margin-top:24px}.meta-raw ol{padding-left:24px;font-size:.875rem;overflow-wrap:anywhere;max-height:360px;overflow:auto}.meta-raw li{margin-bottom:12px}.meta-code{font: .8rem/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:400px;overflow:auto}.meta-layout .tool-inspector details button{width:100%;margin:8px 0}.meta-layout .tool-inspector .file-pick{width:100%}.meta-layout .tool-inspector .tool-actions{flex-direction:column}#fetch-info{overflow-wrap:anywhere}
@media(max-width:600px){.meta-stage{padding:16px}.meta-card-copy{padding:16px}.meta-platforms button{flex:1;padding:10px}.meta-modes button{flex:1}.meta-stage{min-height:240px}}
.meta-card :is(p,.meta-site){color:var(--label)}.meta-google p{color:var(--label-secondary)}.meta-layout .tool-actions button{flex:0 0 auto}.tools-main .tool-note a{color:var(--accent);text-underline-offset:3px}.meta-x.is-summary{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center}.meta-x.is-summary .meta-image{aspect-ratio:1}.meta-x.is-summary .meta-card-copy{padding:12px}.meta-x.is-summary:has(.meta-image[hidden]){display:block}
.meta-sources :is(dt,dd),.meta-raw li,.meta-code{color:var(--label)}

/* QR studio: visible design controls and an actual, independently read preview. */
.qr-layout{grid-template-columns:minmax(320px,440px) minmax(0,1fr);grid-template-areas:"content preview" "design preview";gap:28px 64px}
.qr-content{grid-area:content;min-width:0}.qr-design{grid-area:design;min-width:0;border-top:1px solid var(--separator);padding-top:28px}
.qr-layout h2{font-size:1.35rem;font-weight:400;letter-spacing:-.02em;margin:0 0 22px}.qr-layout h3{font-size:1rem;font-weight:400;margin:0 0 8px}
.qr-choice-group{border:0;padding:0;margin:0 0 24px;min-width:0}.qr-choice-group legend{font-size:.875rem;padding:0;margin-bottom:10px;color:var(--label-secondary)}
.qr-shape-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tools-main .qr-shape-choices button{display:grid;justify-items:center;gap:6px;padding:14px 8px 12px;font-size:.875rem;background:var(--bg);border-radius:12px}
.qr-shape-choices svg{width:36px;height:36px}.tools-main .qr-shape-choices [aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--bg-secondary);box-shadow:inset 0 0 0 1px var(--accent)}
.qr-palettes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.tools-main .qr-palettes button{display:grid;justify-items:center;gap:8px;padding:10px 4px;font-size:.75rem;border-color:transparent}
.qr-palette-swatch{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--palette-ink) 50%,var(--palette-paper) 50%);box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.tools-main .qr-palettes [aria-pressed=true]{border-color:var(--accent);background:var(--bg-secondary)}
.qr-color-field>label{font-size:.875rem;margin-bottom:8px}.qr-color-input{display:flex;gap:8px;align-items:center}.tools-main .qr-color-input input[type=color]{flex:0 0 44px;width:44px;min-height:46px;border-radius:9px;cursor:pointer}.tools-main .qr-color-input input[type=text]{padding:10px 8px;font: .875rem ui-monospace,monospace;letter-spacing:.02em}.qr-color-input [aria-invalid=true]{outline:2px solid #a52d38;outline-offset:2px}
.qr-design>.tool-help{margin:12px 0 24px}.qr-logo-section{border-top:1px solid var(--separator);padding-top:24px}.qr-logo-section>.tool-help{margin:0 0 16px}.qr-logo-upload{display:flex;gap:10px;align-items:center}.qr-logo-upload img{width:44px;height:44px;object-fit:contain;border:1px solid var(--separator);border-radius:8px;background:#fff}.tools-main .qr-logo-upload .file-pick{background:var(--bg);color:var(--label);border-color:var(--separator);flex:1}.tools-main .qr-logo-size{display:grid;grid-template-columns:1fr auto;margin-top:20px;font-size:.875rem}.qr-logo-size input{grid-column:1/-1}.qr-logo-size output{color:var(--label-secondary);font-variant-numeric:tabular-nums}
.qr-design .qr-print-settings{margin-top:24px;border-top:1px solid var(--separator)}.qr-print-settings>label{margin-bottom:16px}
.qr-proof{grid-area:preview;min-width:0;position:sticky;top:112px;align-self:start}.qr-preview-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}.qr-preview-head h2{margin:0}.qr-local-label{font-size:.8rem;color:var(--label-secondary)}
.qr-stage{min-height:400px;padding:40px;border:1px solid var(--separator);background:var(--bg-secondary);border-radius:24px}.qr-stage canvas{width:min(100%,400px);border-radius:0}
.qr-proof-status{display:flex;align-items:center;gap:8px;font-size:.875rem;line-height:1.5;margin:18px 0 10px;color:var(--label-secondary)}.qr-proof-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--separator);flex-shrink:0}.qr-proof-status[data-state=ready]::before{background:#37704b}.qr-proof-status[data-state=error]::before{background:#a52d38}[data-theme=dark] .qr-proof-status[data-state=ready]::before{background:#96cbaa}[data-theme=dark] .qr-proof-status[data-state=error]::before{background:#ffafb5}
.qr-proof .tool-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:22px}.qr-proof .tool-actions #copy{grid-column:1/-1;border:0;color:var(--label-secondary)}
@media(max-width:1024px){.qr-layout{gap:28px;grid-template-columns:minmax(300px,380px) minmax(0,1fr)}.qr-stage{min-height:300px;padding:24px}.qr-proof{top:100px}.qr-preview-head{flex-wrap:wrap;gap:6px}}
@media(max-width:760px){.qr-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"content" "preview" "design";gap:28px}.qr-proof{position:static}.qr-stage{min-height:260px;padding:24px;border-radius:18px}.qr-design{padding-top:28px}.qr-colors{gap:12px}.qr-proof .tool-actions button{flex-basis:auto}}
@media(prefers-reduced-motion:reduce){.qr-layout button{transition:none}}
@media(max-height:760px){.qr-proof{position:static}}