.screen-tool-heading{max-width:48rem;padding:4rem 0 2.5rem}.screen-tool-heading h1{letter-spacing:-.055em;margin:0 0 1rem;font-size:clamp(2.5rem,6vw,5rem);line-height:1}.screen-tool-heading p{max-width:38rem;color:var(--muted);font-size:1.1rem;line-height:1.6}.tester-hero{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(2rem,6vw,6rem);padding:clamp(3rem,6vw,6rem) 0 clamp(3rem,5vw,5rem);display:grid}.tester-copy{max-width:35rem}.tester-hero h1{color:var(--ink);font-family:var(--serif);letter-spacing:-.08em;margin:0;font-size:clamp(5rem,9vw,9.8rem);font-weight:500;line-height:.75}.tester-hero h1 em{color:var(--accent);font-style:normal}.tester-lede{max-width:30rem;color:var(--muted);font-family:var(--serif);margin:2.8rem 0 0;font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.24}.hero-actions{flex-wrap:wrap;gap:.7rem;margin-top:2.1rem;display:flex}.hero-button{min-width:9rem}.hero-button-secondary{border:1px solid var(--line);min-height:2.7rem;color:var(--ink);font:500 .67rem var(--mono);letter-spacing:.04em;text-transform:uppercase;background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:.7rem 1rem;text-decoration:none;display:inline-flex}.hero-button-secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.hero-meta{color:var(--muted);font:500 .56rem var(--mono);letter-spacing:.06em;text-transform:uppercase;flex-wrap:wrap;gap:.75rem 1rem;margin-top:3.1rem;display:flex}.hero-meta span+span:before{content:"·";color:var(--accent);margin-right:1rem}.hero-visual{border-radius:var(--radius-lg);background:var(--paper-deep);min-height:clamp(22rem,38vw,35rem);margin:0;position:relative;overflow:hidden;box-shadow:0 1.2rem 2.8rem #16161614}.hero-visual img{object-fit:cover;object-position:center;width:100%;height:100%;min-height:clamp(22rem,38vw,35rem);display:block}.hero-visual figcaption{color:#161616ad}.tester-panel{--tester-radius:var(--radius-xl);--tester-inset:1rem;min-width:0;padding:var(--tester-inset);border:1px solid var(--line-soft);border-radius:var(--tester-radius);background:#fbfaf6ad;grid-template-rows:auto minmax(26rem,1fr);grid-template-columns:minmax(0,1.3fr) minmax(20rem,.7fr);gap:1.1rem;margin:clamp(3rem,5vw,5rem) 0;display:grid;overflow:hidden;box-shadow:0 1.5rem 4rem #1616160e}.tester-panel:focus{outline:none}.tester-panel-header{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:end;gap:2rem;padding:.35rem .9rem .4rem;display:grid}.tester-panel-header h2{font-family:var(--serif);letter-spacing:-.055em;margin:0;font-size:clamp(2.1rem,3.8vw,3.7rem);font-weight:500;line-height:.85}.tester-panel-header>p{max-width:27rem;color:var(--muted);font-family:var(--serif);justify-self:end;margin:0;font-size:1.15rem;line-height:1.25}.tester-controls{flex-direction:column;grid-area:2/2;gap:.75rem;height:100%;min-height:0;display:flex}.screen-preview{border-radius:calc(var(--tester-radius) - var(--tester-inset));color:#111;background:var(--test-color);border:0;grid-area:2/1;place-items:center;height:100%;min-height:26rem;transition:background-color .18s;display:grid;position:relative;overflow:hidden;box-shadow:0 .9rem 2.3rem #16161614}.preview-center{z-index:1;border-radius:var(--radius-md);width:min(23rem,100% - 2rem);min-width:0;color:inherit;font:inherit;cursor:pointer;background:#fff6;border:1px solid;place-items:center;margin:0;padding:2rem 2rem 1.8rem;transition:transform .15s,background-color .18s;display:grid;position:relative;box-shadow:0 1.4rem 3rem #0000001f}.preview-center:hover{transform:translateY(-3px)}.preview-fullscreen-icon{width:3.45rem;height:3.45rem;color:inherit;background:#ffffff38;border:1px solid;border-radius:50%;place-items:center;margin-bottom:1.1rem;display:grid}.preview-fullscreen-icon svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:1.25rem;height:1.25rem}.preview-prompt{font-weight:700}.preview-center small{color:inherit;opacity:.72;margin-top:.65rem;font-size:.78rem;font-weight:500;line-height:1.45;display:block}.screen-preview[data-control-theme=light]{color:#fff}.screen-preview[data-control-theme=dark]{color:#111}.screen-preview[data-control-theme=light] .preview-center{background:#00000042}.screen-preview[data-control-theme=dark] .preview-center{background:#ffffff75}.preview-statusbar{z-index:2;border:1px solid color-mix(in srgb, currentColor 20%, transparent);background:color-mix(in srgb, var(--test-color) 84%, transparent);font:.62rem var(--mono);border-radius:999px;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;display:flex;position:absolute;bottom:1rem;left:1rem;right:1rem}.preview-statusbar>span{align-items:center;gap:.4rem;min-width:0;display:flex}.preview-statusbar>span:last-child{opacity:.62}.preview-statusbar svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:.9rem;height:.9rem}.preview-statusbar strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview-statusbar code{opacity:.7;font:.58rem var(--mono)}.fullscreen-toolbar{display:none}.tester-panel:fullscreen{color:#fff;background:var(--test-color);border:0;border-radius:0;width:100vw;height:100vh;margin:0;padding:0;display:block;position:relative;overflow:hidden}.tester-panel:fullscreen .tester-panel-header{display:none}.tester-panel:fullscreen .screen-preview{width:100%;height:100%;min-height:0;box-shadow:none;background:var(--test-color);border:0;border-radius:0;position:absolute;inset:0}.tester-panel:fullscreen .preview-center,.tester-panel:fullscreen .preview-statusbar,.tester-panel:fullscreen .tester-controls{display:none}.tester-panel:fullscreen .fullscreen-toolbar{z-index:5;border-radius:var(--radius-md);color:#fff;backdrop-filter:blur(18px);background:#121212b8;border:1px solid #ffffff47;align-items:center;gap:.65rem;min-width:0;padding:.7rem 1rem;display:flex;position:absolute;bottom:clamp(.75rem,3vw,2rem);left:clamp(.75rem,3vw,2rem);right:clamp(.75rem,3vw,2rem);box-shadow:0 .8rem 2.5rem #00000040}.fullscreen-current{align-items:center;gap:.65rem;min-width:8.5rem;display:flex}.fullscreen-current i{background:var(--current-swatch);border:1px solid #ffffff8c;border-radius:50%;flex:none;width:1.8rem;height:1.8rem}.fullscreen-current span{min-width:0;display:grid}.fullscreen-current strong{text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;overflow:hidden}.fullscreen-current code{color:#fff9;font:.58rem var(--mono);margin-top:.15rem}.fullscreen-toolbar>button{color:#fff;background:#ffffff14;border:1px solid #fff3;border-radius:999px;flex:none;min-width:2.6rem;min-height:2.6rem}.fullscreen-toolbar>button:hover{background:#ffffff2b}.fullscreen-swatches{scrollbar-color:#ffffff59 transparent;scrollbar-width:thin;flex:auto;gap:.45rem;min-width:5rem;padding:.3rem .1rem;display:flex;overflow-x:auto}.fullscreen-swatches button{background:var(--swatch);border:2px solid #0000;border-radius:50%;flex:0 0 1.45rem;width:1.45rem;height:1.45rem;padding:0;box-shadow:inset 0 0 0 1px #ffffff29}.fullscreen-swatches button[aria-pressed=true]{outline-offset:1px;border-color:#fff;outline:2px solid #ffffff8c}.fullscreen-custom{align-items:center;gap:.35rem;min-width:0;display:flex}.fullscreen-custom input,.fullscreen-custom button{color:#fff;background:#ffffff14;border:1px solid #fff3;border-radius:999px;height:2.6rem}.fullscreen-custom input[type=color]{border-radius:50%;width:2.7rem;padding:.25rem}.fullscreen-custom input[type=text]{width:6.2rem;font:.65rem var(--mono);padding:0 .55rem}.fullscreen-custom button{padding:0 .65rem;font-size:.65rem}.fullscreen-toolbar .exit-button{align-items:center;gap:.4rem;padding-inline:.8rem;display:inline-flex}.fullscreen-toolbar .exit-button svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:1rem;height:1rem}.color-controls,.screen-info{border:1px solid var(--line-soft);border-radius:calc(var(--tester-radius) - var(--tester-inset));background:#fbfaf68f;flex:none;padding:1.4rem 1.5rem}.control-heading{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem;display:flex}.control-heading h2{color:var(--ink);font-family:var(--mono);letter-spacing:.11em;text-transform:uppercase;margin:0;font-size:.66rem;font-weight:500}.control-heading>span{color:var(--muted);font:.55rem var(--mono);letter-spacing:.06em;text-transform:uppercase}.swatch-grid{grid-template-columns:repeat(6,1fr);gap:.45rem;display:grid}.swatch{border-radius:var(--radius-sm);min-width:0;color:var(--muted);background:0 0;border:1px solid #0000;padding:.22rem}.swatch:hover,.swatch[aria-pressed=true]{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}.swatch>span{aspect-ratio:1.45;background:var(--swatch);border:1px solid #1616161f;border-radius:.65rem;display:block}.swatch small{font:.52rem var(--mono);text-overflow:ellipsis;white-space:nowrap;margin-top:.35rem;display:block;overflow:hidden}.custom-color{margin-top:1.1rem}.custom-color label{color:var(--muted);font:.59rem var(--mono);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.45rem;display:block}.custom-color>div{grid-template-columns:1fr 3rem auto;gap:.45rem;display:grid}.custom-color input,.custom-color button{border:1px solid var(--line-soft);min-width:0;min-height:2.7rem;color:var(--ink);background:var(--paper-light);border-radius:999px}.custom-color input[type=text],.custom-color input:not([type]){font:.65rem var(--mono);padding:0 .7rem}.custom-color input[type=color]{border-radius:50%;width:3rem;padding:.25rem}.custom-color button{border-color:var(--ink);color:var(--paper-light);background:var(--ink);padding:0 1rem;font-size:.63rem;font-weight:600}.custom-color button:hover{border-color:var(--accent);background:var(--accent)}.input-error{color:#a43c2f;min-height:1rem;margin:.35rem 0 0;font-size:.67rem}.screen-info dl{grid-template-columns:repeat(2,1fr);gap:.6rem;margin:0;display:grid}.screen-info dl>div{border-radius:var(--radius-sm);background:#fbfaf685;padding:.7rem .8rem}.screen-info dt{color:var(--muted);font:.54rem var(--mono);letter-spacing:.05em;text-transform:uppercase}.screen-info dt small{text-transform:none}.screen-info dd{color:var(--ink);font:500 .68rem var(--mono);margin:.35rem 0 0}.shortcut-guide{border:1px solid var(--line-soft);border-radius:calc(var(--tester-radius) - var(--tester-inset));background:#fbfaf68f;flex:auto;min-height:0;padding:1.4rem 1.5rem}.shortcut-guide dl{grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0;display:grid}.shortcut-guide dl>div{border-radius:var(--radius-sm);background:#fbfaf685;min-width:0;padding:.65rem}.shortcut-guide dt{align-items:center;gap:.3rem;min-height:1.45rem;display:flex}.shortcut-guide dd{color:var(--muted);font:.57rem var(--mono);margin:.45rem 0 0;line-height:1.35}kbd{border:1px solid var(--line);min-width:1.45rem;height:1.45rem;color:var(--ink);font:500 .6rem var(--mono);background:0 0;border-radius:.5rem;place-items:center;padding:0 .25rem;display:inline-grid;box-shadow:inset 0 -2px #16161614}.tester-status{min-height:0;color:var(--muted);font:.58rem var(--mono);flex:none;margin:0;padding:0 .35rem}.tester-status:empty{display:none}@media (width>=1001px){.tester-hero{min-height:calc(100svh - 4.6rem)}}@media (width<=1000px){.tester-hero{grid-template-columns:1fr}.tester-panel{--tester-radius:2.5rem;border-radius:var(--tester-radius)}.tester-copy{max-width:45rem}.hero-visual,.hero-visual img{min-height:clamp(20rem,55vw,34rem)}.tester-panel{grid-template-rows:auto auto auto;grid-template-columns:1fr}.tester-panel-header{grid-template-columns:1fr 1fr}.screen-preview{grid-area:2/1;height:auto;min-height:clamp(22rem,58vw,35rem)}.tester-controls{grid-area:3/1}}@media (width<=760px){.tester-hero h1{font-size:clamp(5rem,19vw,8rem)}.tester-panel-header{grid-template-columns:1fr;gap:1.5rem}.tester-panel-header>p{justify-self:start}.tester-panel:fullscreen .fullscreen-toolbar{flex-wrap:wrap}.fullscreen-current{flex:1}.fullscreen-swatches{flex-basis:100%;order:5}.fullscreen-custom input[type=text]{width:5.6rem}}@media (width<=560px){.tester-hero{padding-top:4rem}.tester-hero h1{font-size:clamp(4.5rem,23vw,7rem)}.tester-panel{--tester-radius:2rem;--tester-inset:.75rem;border-radius:var(--tester-radius);padding:var(--tester-inset)}.hero-actions{flex-direction:column;align-items:stretch}.hero-meta{gap:.45rem;display:grid}.hero-meta span+span:before{display:none}.hero-visual,.hero-visual img{min-height:18rem}.screen-preview{min-height:19rem}.swatch-grid{grid-template-columns:repeat(4,1fr)}.screen-info dl{gap:1rem 0}.screen-info dl>div{padding-bottom:1rem}.screen-info dl>div:nth-last-child(-n+2){padding-bottom:0}.custom-color>div{grid-template-columns:1fr 3rem}.custom-color button{grid-column:1/-1}.fullscreen-custom input[type=text]{display:none}.tester-panel:fullscreen .fullscreen-toolbar{gap:.4rem;padding:.55rem}.fullscreen-current{min-width:6.5rem}}@media (prefers-reduced-motion:reduce){.screen-preview,.preview-center{transition:none}}