html{background:#fafaf8}body{min-width:320px;min-height:100dvh;margin:0}button:focus-visible{outline-offset:3px;outline:3px solid #1a7a5e}:root{--canvas:#f7f7f4;--surface:#fff;--ink:#181816;--muted:#66665f;--line:#deded7;--accent:#0d765d;--focus:#08765a;--radius:10px;--ease:cubic-bezier(.23,1,.32,1);--page-ease-in:cubic-bezier(.4,0,1,1)}*{box-sizing:border-box}body{color:var(--ink);background:var(--canvas)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.skip-link{z-index:2;color:#fff;background:var(--ink);padding:10px 14px;position:absolute;top:8px;left:-999px}.skip-link:focus{left:8px}.configurator-shell{min-height:100dvh;padding-bottom:calc(32px + env(safe-area-inset-bottom));font-synthesis:none;font-kerning:normal;font-variant-ligatures:common-ligatures;font:100%/1.5 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.configurator-header,.configurator-main{width:min(1120px,100% - 48px);margin-inline:auto}.configurator-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:72px;display:flex}.wordmark{color:var(--ink);letter-spacing:-.035em;font-size:1.25rem;font-weight:720;text-decoration:none}.quiet-link{color:var(--muted);text-underline-offset:4px;font-size:.875rem}.configurator-main{padding:clamp(44px,7vw,80px) 0 96px}.intro{max-width:620px;margin-bottom:40px}.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;font-size:.6875rem;font-weight:700}.intro h1{letter-spacing:-.055em;max-width:14ch;margin:0 0 12px;font-size:clamp(2.375rem,1rem + 3.5vw,3.625rem);line-height:1.02}.intro p:not(.eyebrow){max-width:45ch;color:var(--muted);margin:0;font-size:1.0625rem}.saved-default{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--muted);justify-content:space-between;align-items:center;gap:16px;margin:0 0 28px;padding:12px 14px;font-size:.875rem;display:flex}.saved-default div{gap:8px;display:flex}.saved-default button,.text-button{color:var(--accent);text-underline-offset:3px;background:0 0;border:0;padding:4px;text-decoration:underline}.workspace{grid-template-columns:minmax(0,1fr) minmax(360px,440px);align-items:start;gap:48px;display:grid}.authoring{gap:36px;display:grid}.choice-group,.level-choice{border:0;margin:0;padding:0}.choice-group legend,.level-choice legend,.section-block h2,.remember-default h2{letter-spacing:-.02em;margin:0 0 8px;font-size:1.125rem;font-weight:720;line-height:1.2}.choice-options{flex-wrap:wrap;gap:8px;display:flex}.choice-option{border:1px solid var(--line);background:var(--surface);color:#454540;min-height:40px;transition:transform .14s var(--ease),border-color .14s var(--ease),background-color .14s var(--ease),color .14s var(--ease);border-radius:8px;align-items:center;padding:8px 12px;font-size:.8125rem;font-weight:650;display:inline-flex;position:relative}.choice-option:has(input:checked){border-color:var(--accent);color:var(--accent);background:#eef8f4}:is(.choice-option:has(input:focus-visible),.level-option:has(input:focus-visible)){outline:3px solid var(--focus);outline-offset:3px}.choice-option:active{transform:scale(.98)}.choice-option input,.level-option input{opacity:0;cursor:pointer;position:absolute;inset:0}.mode-choice{border-bottom:1px solid var(--line);padding-bottom:24px}.mode-choice legend{color:var(--muted);font-size:.875rem}.helper,.settings-summary{color:var(--muted);margin:0 0 16px;font-size:.875rem}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.level-option{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:#4c4c47;min-height:92px;transition:transform .14s var(--ease),border-color .14s var(--ease),background-color .14s var(--ease);flex-direction:column;justify-content:space-between;gap:8px;padding:12px;display:flex;position:relative}.level-option:hover{border-color:var(--level-border)}.level-option:has(input:checked){border:2px solid var(--level-color);background:var(--level-bg);color:var(--level-color)}.level-option:active{transform:scale(.98)}.level-label{font-size:.875rem;font-weight:730;line-height:1.15}.selected-state{font-size:.6875rem;font-weight:700}.selected-explanation{border-left:3px solid var(--level-color);color:var(--muted);background:var(--surface);margin-top:12px;padding:14px;font-size:.875rem}.selected-explanation strong{color:var(--ink)}.selected-explanation a{color:var(--accent);text-underline-offset:3px;margin-left:4px}.text-field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;display:grid}.text-field{color:var(--ink);gap:6px;margin-top:16px;font-size:.8125rem;font-weight:650;display:grid}.text-field input,.text-field textarea{border:1px solid var(--line);background:var(--surface);width:100%;color:var(--ink);font:inherit;resize:vertical;border-radius:8px;padding:10px 12px;font-weight:400}.text-field input:focus,.text-field textarea:focus{outline:3px solid var(--focus);outline-offset:2px}.text-field small{color:var(--muted);font-size:.75rem;font-weight:400;line-height:1.4}.share-tools{border-top:1px solid var(--line);gap:10px;margin-top:18px;padding-top:18px;display:grid}.share-tools p{color:var(--muted);margin:0;font-size:.8125rem}.share-tools button:first-of-type{background:var(--ink);color:#fff;border:0;border-radius:8px;justify-self:start;min-height:40px;padding:9px 12px;font:700 .8125rem/1.2 system-ui,sans-serif}.section-block{border-top:1px solid var(--line);padding-top:28px}.advanced-options{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px;padding:20px;display:grid}.advanced-options .choice-group:last-child{grid-column:span 2}.preferences{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}.preferences summary,.implementation-options summary{cursor:pointer;letter-spacing:-.01em;font-weight:700}.preferences summary span{color:var(--muted);letter-spacing:0;margin-top:4px;font-size:.75rem;font-weight:500;display:block}.preferences>p{max-width:65ch;color:var(--muted);margin:16px 0;font-size:.875rem}.preferences[open]{padding-bottom:24px}.preferences .choice-group+.choice-group{margin-top:20px}.remember-default{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);justify-content:space-between;align-items:center;gap:24px;padding:18px;display:flex}.remember-default p{max-width:48ch;color:var(--muted);margin:6px 0 0;font-size:.8125rem}.remember-default button,.mobile-copy-bar button{background:var(--ink);color:#fff;white-space:nowrap;min-height:42px;transition:transform .14s var(--ease);border:0;border-radius:8px;padding:9px 13px;font-weight:700}.remember-default button:active,.mobile-copy-bar button:active{transform:scale(.98)}.preview-rail{gap:12px;display:grid;position:sticky;top:24px}.preview-stage,.confidence-card,.output-panel,.implementation-options{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:20px;box-shadow:0 16px 36px #1818160d}.preview-stage-heading{justify-content:space-between;align-items:start;gap:12px;display:flex}.preview-stage h2,.output-panel h3{letter-spacing:-.03em;margin:0;font-size:1.25rem}.preview-live{color:var(--accent);border:1px solid #86cfba;border-radius:999px;padding:4px 7px;font-size:.6875rem;font-weight:700}.site-frame{border:1px solid var(--line);background:var(--canvas);border-radius:10px;min-height:300px;margin-top:18px;position:relative;overflow:hidden}.site-frame iframe{transform-origin:0 0;pointer-events:none;border:0;width:200%;height:600px;transform:scale(.5)}.site-fallback{padding:36px 28px}.site-fallback span{color:var(--muted);font-size:.75rem}.site-fallback h3{letter-spacing:-.04em;margin:40px 0 12px;font-size:1.5rem}.site-fallback p{max-width:32ch;color:var(--muted);margin:0}.mark-overlay{z-index:1;position:absolute}.placement-inline .mark-overlay{bottom:28px;left:28px}.placement-top-right .mark-overlay{top:16px;right:16px}.placement-bottom-right .mark-overlay{bottom:16px;right:16px}.frame-notice{color:var(--muted);background:#fffffde6;border-radius:6px;margin:0;padding:6px 8px;font-size:.6875rem;position:absolute;inset:auto 10px 10px}.preview-controls{margin-top:14px}.preview-controls p{color:var(--muted);margin:0 0 10px;font-size:.8125rem}.preview-controls button,.share-tools button:first-of-type{background:var(--ink);color:#fff;border:0;border-radius:8px;min-height:40px;padding:9px 12px;font:700 .8125rem/1.2 system-ui,sans-serif}.confidence-card{gap:10px;display:grid}.confidence-card h3{margin:0 0 2px;font-size:.875rem}.confidence-card div{color:var(--muted);justify-content:space-between;gap:12px;font-size:.75rem;display:flex}.confidence-card strong{color:var(--accent);text-align:right;font-weight:650}.output-panel{gap:12px;display:grid}.code-block{position:relative}.code-block pre{color:#e7e7df;white-space:pre-wrap;word-break:break-word;background:#171716;border-radius:8px;min-height:120px;max-height:310px;margin:0;padding:16px;font:.75rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.copy-button{color:#fff;min-height:36px;transition:transform .14s var(--ease),background-color .15s var(--ease);background:#252522;border:1px solid #4d4d47;border-radius:6px;padding:5px 9px;font-size:.75rem;font-weight:700;position:absolute;top:8px;right:8px}.copy-button:active{transform:scale(.98)}.copy-status{min-height:1.5em;color:var(--accent);margin:8px 0 0;font-size:.8125rem}.implementation-options{color:var(--muted);grid-column:1/-1}.implementation-options>p{font-size:.8125rem}.implementation-options .code-block+.code-block{margin-top:14px}.mobile-copy-bar{display:none}@keyframes mw-page-breathe-out{to{opacity:0}}@keyframes mw-page-breathe-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:no-preference){html.page-enter body>:not(script){animation:mw-page-breathe-in .2s var(--ease) both}html.page-leaving body>:not(script){animation:mw-page-breathe-out .16s var(--page-ease-in) both;pointer-events:none}}@media (width<=1050px){.workspace{grid-template-columns:minmax(0,1fr) 360px;gap:28px}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.level-option:last-child{grid-column:span 2}}@media (width<=760px){.configurator-shell{padding-bottom:calc(92px + env(safe-area-inset-bottom))}.configurator-header,.configurator-main{width:min(100% - 40px,1120px)}.configurator-header{min-height:64px}.configurator-main{padding-top:44px}.intro{margin-bottom:28px}.intro h1{font-size:2.5rem}.workspace{flex-direction:column;gap:28px;display:flex}.authoring{display:contents}.preview-rail{order:1;width:100%;position:static}.authoring>:is(.mode-choice,.level-choice,.process-credit,.site-context){order:0}.authoring>:is(.section-block:not(.process-credit):not(.site-context),.preferences,.remember-default){order:2}.implementation-options{order:3;width:100%}.level-grid{grid-template-columns:1fr}.level-option:last-child{grid-column:auto}.level-option{flex-direction:row;align-items:center;min-height:64px}.advanced-options,.text-field-grid{grid-template-columns:1fr}.advanced-options .choice-group:last-child{grid-column:auto}.remember-default,.saved-default{flex-direction:column;align-items:flex-start}.mobile-copy-bar{z-index:2;padding:12px max(20px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border-top:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffffdf0;justify-content:space-between;align-items:center;gap:12px;display:flex;position:fixed;inset:auto 0 0}.mobile-copy-bar span{min-width:0;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;overflow:hidden}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.choice-option:active,.level-option:active,.remember-default button:active,.mobile-copy-bar button:active,.copy-button:active{transform:none}}
