/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
.fct{display:flex;flex-direction:column;gap:var(--space-m);width:100%}.fct__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:54ch;margin-block-end:var(--space-s);text-align:center;align-self:center}.fct__view{width:100%;display:flex;flex-direction:column;gap:var(--space-m)}.fct__view[hidden]{display:none!important}.fct__view--intro{align-items:center;justify-content:center;text-align:center;min-block-size:20rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-l)}.fct__task-header{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--radius-m);padding:var(--space-s);width:100%}.fct__task-instruction{font-size:var(--step-0);line-height:var(--leading-body);color:var(--ink);margin:0}.fct__task-instruction strong{color:var(--accent-strong)}.fct__stage-box{display:flex;justify-content:center;align-items:center;width:100%}.fct__mockup-container{position:relative;width:100%;max-width:44rem;border:1.5px solid var(--line);border-radius:var(--radius-l);background:var(--paper);overflow:hidden;cursor:crosshair}.fct__mockup{display:flex;width:100%;min-height:24rem;user-select:none}.fct__sidebar{width:10rem;background:var(--surface);border-right:1.5px solid var(--line);padding:var(--space-m) var(--space-s);display:flex;flex-direction:column;gap:var(--space-m)}.fct__logo{font-family:var(--font-display);font-weight:700;font-size:var(--step--1);color:var(--accent-strong)}.fct__nav{display:flex;flex-direction:column;gap:var(--space-3xs)}.fct__nav-item{font-size:var(--step--2);font-weight:600;padding:var(--space-3xs) var(--space-2xs);border-radius:var(--radius-s);color:var(--muted);white-space:nowrap}.fct__nav-item--active{background:var(--accent-soft);color:var(--accent-strong)}.fct__body{flex:1;display:flex;flex-direction:column;padding:var(--space-m);gap:var(--space-m)}.fct__header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-block-end:var(--space-xs)}.fct__header-title{font-family:var(--font-display);font-weight:700;font-size:var(--step-0);color:var(--ink)}.fct__avatar{width:2rem;height:2rem;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--line)}.fct__form{display:flex;flex-direction:column;gap:var(--space-xs)}.fct__form-group{display:flex;flex-direction:column;gap:var(--space-3xs)}.fct__label{font-size:var(--step--2);font-weight:600;color:var(--ink)}.fct__input{width:100%;padding:var(--space-xs);border:1.5px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--muted);font-size:var(--step--1);font-weight:500}.fct__submit-btn{align-self:flex-start;margin-block-start:var(--space-xs);pointer-events:none;opacity:.9}.fct__marker{position:absolute;width:14px;height:14px;background:#ef4444;border:2px solid #fff;border-radius:50%;box-shadow:0 0 10px rgba(239,68,68,.6);z-index:15;pointer-events:none;transform:translate(-50%,-50%)}.fct__marker::after{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border:2px solid #ef4444;border-radius:50%;animation:1.4s cubic-bezier(.24,0,.38,1) infinite fct-pulse-ring}@keyframes fct-pulse-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}.fct__optimal-zone{position:absolute;border:2px dashed var(--accent);background:var(--accent-soft);opacity:.9;z-index:12;pointer-events:none;border-radius:var(--radius-s);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 9999px rgba(0,0,0,.25)}.fct__optimal-label{font-size:var(--step--2);font-weight:700;color:var(--accent-strong);background:var(--paper);border:1px solid var(--accent);border-radius:var(--radius-s);padding:.1rem .3rem;line-height:1}.fct__heatmap{position:absolute;top:0;left:0;right:0;bottom:0;z-index:11;pointer-events:none}.fct__heat-point{position:absolute;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%);opacity:.65;filter:blur(2px)}.fct__heat-point--hot{background:#ef4444;box-shadow:0 0 12px 6px #ef4444}.fct__heat-point--warm{background:#f97316;box-shadow:0 0 12px 6px #f97316}.fct__heat-point--cool{background:#eab308;box-shadow:0 0 12px 6px #eab308}.fct__view--results{max-width:34rem;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:var(--space-m);text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-l)}.fct__results-title{font-family:var(--font-display);font-size:var(--step-2);font-weight:700;color:var(--ink)}.fct__results-status{padding:var(--space-2xs) var(--space-s);border-radius:var(--radius-s);font-size:var(--step-0);font-weight:700;display:inline-block;align-self:center}.fct__results-status--success{background:var(--status-supported-bg);color:var(--status-supported-fg)}.fct__results-status--missed{background:var(--status-challenged-bg);color:var(--status-challenged-fg)}.fct__results-stats{display:flex;gap:var(--space-s);justify-content:center;margin-block:var(--space-xs)}.fct__result-pill{background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--radius-m);padding:var(--space-xs) var(--space-s);font-family:var(--font-display);color:var(--ink);font-size:var(--step-0);font-weight:700;min-width:8rem}.fct__verdict{font-size:var(--step-0);line-height:var(--leading-body);color:var(--muted);text-align:start}.fct__result-controls{display:flex;flex-direction:column;gap:var(--space-xs);text-align:start;border-top:1.5px solid var(--line);padding-block-start:var(--space-s)}.fct__control-label{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--step--1);font-weight:600;color:var(--ink);cursor:pointer}.fct__control-label input{margin:0;accent-color:var(--accent);cursor:pointer}.fct__results-actions{display:flex;gap:var(--space-s);justify-content:center;margin-block-start:var(--space-s)}.fct__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.fct__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.fct__alt[open] summary{margin-block-end:var(--space-s)}