:root{font-family:Segoe UI,sans-serif;color:#18344b;background:#eef3f7;font-synthesis:none;--accent: #166889}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}#app{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px}h1{font-size:23px;font-weight:600;letter-spacing:-.5px;margin:0}header p{font-size:12px;color:#526a7e;margin:3px 0 0}nav{display:flex;gap:8px}h2{font-size:17px;font-weight:600;margin:0}h3{font-size:17px;margin:20px 0 8px}p{line-height:1.5}button{font:inherit;font-size:12px;background:#fff;border:1px solid #aebfcd;border-radius:5px;padding:7px 10px;cursor:pointer;color:#18344b}button:hover{border-color:var(--accent);background:#f0f8fc}button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}:focus-visible{outline:3px solid #c68628;outline-offset:3px}.workbench{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}.views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#cbd8e2;min-height:0;overflow:hidden}.views.single{grid-template-columns:minmax(0,1fr)}figure{margin:0;min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:#eaf1f6}figcaption{padding:7px 20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}figcaption p{font-size:12px;color:#526a7e;margin:0}.viewport{min-height:0;min-width:0;overflow:hidden;position:relative}canvas{display:block;position:absolute;width:100%;height:100%}aside{background:#e4edf3;border-top:1px solid #b6c9d8;padding:10px 20px 9px}.switch-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-bottom:12px}fieldset{display:flex;align-items:center;gap:14px;padding:0;border:0;margin:0;min-width:0}legend{float:left;padding:0;margin-right:14px;font-size:12px;color:#526a7e}.switch{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;white-space:nowrap}.switch input{appearance:none;width:30px;height:18px;border-radius:12px;background:#8296a6;margin:0;position:relative;cursor:pointer;flex-shrink:0}.switch input:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff}.switch input:checked{background:var(--accent)}.switch input:checked:after{left:15px}.switch input:disabled{opacity:.55;cursor:default}.control-row{display:grid;grid-template-columns:minmax(300px,2fr) repeat(4,minmax(110px,1fr));align-items:center;gap:26px}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}.presets button{padding:5px}.control-row label{display:block;font-size:12px;font-weight:600}output{float:right;font-weight:400;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;accent-color:var(--accent);margin:7px 0;cursor:pointer}input:disabled{cursor:default}.state{font-size:12px;margin:0;color:#166889}.readings{display:flex;flex-wrap:wrap;gap:8px 30px;border-top:1px solid #c4d4df;padding-top:7px;margin-top:8px;font-size:12px}.readings strong{font-weight:600;font-variant-numeric:tabular-nums;margin-left:8px}.viewing-guide{font-size:11px;color:#526a7e;margin:6px 0 0}dialog{max-width:980px;width:calc(100% - 32px);max-height:85dvh;padding:24px;border:1px solid #b6c9d8;border-radius:10px;color:#18344b}dialog::backdrop{background:#102a4399}.dialog-header{display:flex;justify-content:space-between;gap:20px;align-items:center}dialog p{font-size:14px}.text-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.explanation>h2{margin-top:25px}details{border-top:1px solid #cbd8e2;padding-top:18px;margin-top:20px}summary{cursor:pointer;font-weight:600}a{color:#126486;text-underline-offset:3px}@media(max-width:1100px){.control-row{grid-template-columns:minmax(260px,2fr) 1fr 1fr;gap:8px 16px}.distortion-control{grid-row:span 2}.switch-row{gap:8px 16px}aside{padding:8px 12px}}@media(max-width:600px){header{padding:7px 10px}h1{font-size:17px}header p{display:none}nav{gap:4px}nav button{font-size:11px;padding:5px}.switch-row{gap:6px 12px;margin-bottom:6px}fieldset{gap:10px}legend{display:none}.switch{font-size:11px;gap:5px}.control-row{grid-template-columns:1fr 1fr;gap:5px 16px}.distortion-control{grid-column:1 / -1;grid-row:auto}.presets{margin-bottom:5px}.control-row label,.state{font-size:11px}.readings{gap:3px 12px;margin-top:5px;font-size:11px}.viewing-guide{font-size:10px}figcaption{padding:5px 10px}figcaption h2{font-size:13px}figcaption p{display:none}.text-columns{grid-template-columns:1fr;gap:0}}@media(max-height:550px)and (min-width:601px){header{padding:5px 12px}header p{display:none}aside{padding:5px 12px}.switch-row{margin-bottom:5px}.control-row{align-items:start}.viewing-guide{margin-top:3px}}aside{max-height:70dvh;overflow-y:auto}.caveat{margin:0;padding:8px 20px;background:#fff4da;color:#654817;border-block:1px solid #dfc58e;font-size:12px;line-height:1.5}dialog .caveat{margin-top:16px;padding:12px 14px;font-size:13px}.control-row{grid-template-columns:minmax(0,3fr) minmax(220px,1fr);gap:24px;align-items:start}.distortion-control{min-width:0;grid-column:auto;grid-row:auto;--slider-gutter: 70px}.linked-slider{display:grid;grid-template-columns:var(--slider-gutter) minmax(0,1fr);align-items:center;margin-bottom:8px}.linked-slider label{font-size:13px;padding-right:12px}.linked-slider output{display:block;float:none;font-size:11px;margin-top:2px}.slider-lane{position:relative;height:25px}.slider-lane input[type=range]{appearance:none;position:absolute;left:-8px;top:0;width:calc(87.5% + 16px);height:25px;margin:0;background:transparent}.slider-lane input::-webkit-slider-runnable-track{height:5px;background:#91aebf;border-radius:3px}.slider-lane input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:#166889;border:2px solid #e4edf3}.slider-lane input::-moz-range-track{height:5px;background:#91aebf;border-radius:3px}.slider-lane input::-moz-range-thumb{box-sizing:border-box;width:16px;height:16px;border-radius:50%;background:#166889;border:2px solid #e4edf3}.preset-tick{position:absolute;top:3px;height:19px;width:1px;background:#35566d;transform:translate(-.5px);pointer-events:none}.slider-descriptions{grid-column:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}.preset-description{font-size:11px;font-weight:600;line-height:1.35;padding:2px 4px}.preset-description strong{display:block;font-variant-numeric:tabular-nums;margin-top:2px;font-weight:600}.preset-comparison{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0 0 var(--slider-gutter)}.preset-column{display:grid;grid-template-rows:30px 108px auto;gap:3px;text-align:center;min-width:0;padding:0 6px}.preset-column button{padding:4px}.preset-column svg{width:100%;height:54px;display:block;overflow:hidden}.preset-column .ray-illustration{height:108px}.preset-note{margin:6px 0;font-size:10px;color:#526a7e;line-height:1.4}.secondary-controls{display:grid;grid-template-columns:1fr;gap:20px;padding-top:12px}@media(max-width:700px){.control-row{grid-template-columns:minmax(0,1fr);gap:10px}.secondary-controls{grid-template-columns:1fr 1fr;gap:8px 16px;padding-top:0}.distortion-control{--slider-gutter: 40px}.linked-slider label{padding-right:4px}.preset-description{font-size:10px;padding-inline:2px}.preset-column{grid-template-rows:36px 82px auto;padding-inline:2px}.preset-column svg{height:42px}.preset-column .ray-illustration{height:82px}.preset-column button{font-size:11px}}.vision-illustration{display:grid;grid-template-columns:18px minmax(0,1fr) 18px;align-items:center;gap:4px;min-width:0}.peripheral-vision{font-size:11px;font-weight:600;line-height:1.15;writing-mode:vertical-rl;justify-self:center}.peripheral-vision:first-child{transform:rotate(180deg)}.direct-vision{grid-column:1 / -1;font-size:12px;font-weight:700;padding-top:3px}@media(min-width:1400px){.vision-illustration{grid-template-columns:58px minmax(0,1fr) 58px}.peripheral-vision{writing-mode:horizontal-tb;font-size:12px}.peripheral-vision:first-child{transform:none;text-align:right;justify-self:end}.peripheral-vision:nth-child(3){text-align:left;justify-self:start}}@media(max-width:700px){.vision-illustration{grid-template-columns:12px minmax(0,1fr) 12px;gap:2px}.peripheral-vision{font-size:9px}.direct-vision{font-size:10px}}.vision-illustration{width:min(100%,calc(66.667% + 14.667px),404px);justify-self:center}.appearance-illustration path{vector-effect:non-scaling-stroke;stroke-width:1.25px}@media(min-width:1400px){.vision-illustration{width:min(100%,calc(66.667% + 41.333px),484px)}}@media(max-width:700px){.vision-illustration{width:min(100%,calc(66.667% + 9.333px))}}.distortion-control{--slider-gutter: 150px}.preset-comparison{position:relative}.illustration-row-label{position:absolute;left:calc(-1 * var(--slider-gutter));width:calc(var(--slider-gutter) - 12px);display:flex;align-items:center;font-size:12px;font-weight:600;line-height:1.4}.mental-picture-label{top:33px;height:108px}.subjective-appearance-label{top:144px;height:54px}@media(max-width:700px){.distortion-control{--slider-gutter: 86px}.illustration-row-label{font-size:10px;width:calc(var(--slider-gutter) - 6px)}.mental-picture-label{top:39px;height:82px}.subjective-appearance-label{top:124px;height:42px}}.vision-illustration .appearance-illustration{grid-column:2}