@layer components{.tf{border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--bg-0)}.tf-grid{flex-direction:column;display:flex}.tf-col{display:contents}.tf-area{border-top:1px solid var(--line);min-width:0;padding:16px}.tf-area--design{border-top:0;order:1}.tf-area--readouts{order:2}.tf-area--plot{order:3}.tf-area--controls{order:4}.tf-area--swatches{order:5}.tf-area--drawing{order:6}.tf-area--design,.tf-area--controls{flex-direction:column;gap:20px;display:flex}@media (min-width:640px){.tf-area{padding:20px 24px}}@media (min-width:1024px){.tf-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);display:grid}.tf-col{flex-direction:column;gap:26px;min-width:0;padding:24px;display:flex}.tf-col--side{border-right:1px solid var(--line)}.tf-col--main{gap:22px}.tf-area{border-top:0;padding:0}}.tf-field{min-width:0}.tf-field__head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;display:flex}.tf-label{color:var(--fg-muted);font-size:.9375rem;display:block}.tf-output{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg);font-size:.9375rem}.tf-range{appearance:none;cursor:pointer;background:0 0;width:100%;height:24px;margin-top:6px;display:block}.tf-range::-webkit-slider-runnable-track{background:var(--line-strong);height:2px}.tf-range::-moz-range-track{background:var(--line-strong);height:2px}.tf-range::-webkit-slider-thumb{appearance:none;background:var(--beam-1);border:2px solid var(--bg-0);border-radius:50%;width:14px;height:14px;margin-top:-6px}.tf-range::-moz-range-thumb{background:var(--beam-1);border:2px solid var(--bg-0);border-radius:50%;width:14px;height:14px}.tf-range:focus-visible{outline:2px solid var(--beam-1);outline-offset:2px}.tf-select-wrap{margin-top:8px;position:relative}.tf-select{appearance:none;border:1px solid var(--line-strong);background:var(--bg-1);width:100%;min-height:44px;color:var(--fg);cursor:pointer;border-radius:6px;padding:0 38px 0 12px;font-size:1rem}.tf-select:hover{border-color:var(--fg-muted)}.tf-select-icon{color:var(--fg-muted);pointer-events:none;position:absolute;top:50%;right:12px;translate:0 -50%}.tf-formula{font-family:var(--font-mono);color:var(--fg-muted);margin-top:10px;font-size:.8125rem;line-height:1.5}.tf-toolbar{flex-wrap:wrap;gap:8px 14px;margin-bottom:16px;display:flex}.tf-seg{flex-wrap:wrap;gap:4px;display:inline-flex}.tf-seg button{border:1px solid var(--line-strong);background:var(--bg-0);min-height:32px;color:var(--fg-muted);cursor:pointer;border-radius:6px;padding:0 10px;font-size:.8125rem;transition:border-color .15s ease-out,color .15s ease-out}.tf-seg button:hover{border-color:var(--fg-muted);color:var(--fg)}.tf-seg button[aria-pressed=true]{border-color:var(--beam-1);background:color-mix(in oklab, var(--beam-1) 18%, var(--bg-0));color:var(--fg)}.tf-btn{border:1px solid var(--line-strong);background:var(--bg-1);min-height:34px;color:var(--fg);cursor:pointer;border-radius:6px;padding:0 12px;font-size:.875rem}.tf-btn:hover:not(:disabled){border-color:var(--beam-1)}.tf-btn:disabled,.tf-icon-btn:disabled{opacity:.4;cursor:default}.tf-icon-btn{border:1px solid var(--line);background:var(--bg-1);width:32px;height:32px;color:var(--fg-muted);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.tf-icon-btn:hover:not(:disabled){border-color:var(--fg-muted);color:var(--fg)}.tf-flip{rotate:180deg}.tf-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.tf-small{color:var(--fg-muted);margin-top:10px;font-size:.8125rem;line-height:1.55}.tf-note{color:var(--fg);font-size:.9375rem;line-height:1.6}.tf-h3{font-family:var(--font-heading);letter-spacing:-.01em;color:var(--fg);font-size:1.0625rem;font-weight:600}.tf-nojs{font-family:var(--font-mono);color:var(--signal);margin-top:10px;font-size:.8125rem;display:none}@media (scripting:none){.tf-nojs{display:block}}.tf-readouts{border:1px solid var(--line);background:var(--line);border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;display:grid;overflow:hidden}@media (min-width:640px){.tf-readouts{grid-template-columns:repeat(4,minmax(0,1fr))}}.tf-readouts>div{background:var(--bg-1);flex-direction:column;justify-content:space-between;gap:6px;min-width:0;padding:10px 12px;display:flex}.tf-readouts dt{color:var(--fg-muted);font-size:.8125rem;line-height:1.35}.tf-readouts dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg);flex-direction:column;font-size:1rem;line-height:1.35;display:flex}.tf-readouts small{color:var(--fg-muted);margin:0 3px;font-size:.8125rem}.tf-readouts .tf-readouts__main{background:var(--bg-0);flex-flow:wrap;grid-column:1/-1;justify-content:space-between;align-items:baseline;gap:6px 16px;padding:14px 16px}.tf-readouts__main dt{color:var(--fg);font-size:.9375rem}.tf-readouts__main dd{letter-spacing:-.02em;color:var(--signal);font-size:clamp(1.875rem,1.6rem + 1.2vw,2.5rem);font-weight:500;line-height:1;display:block}.tf-readouts__main small{letter-spacing:0;font-size:1rem}.tf-fig{min-width:0}.tf-fig__head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-bottom:12px;display:flex}.tf-fig__title{color:var(--fg);font-size:.9375rem;font-weight:500}.tf-legend{color:var(--fg);flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;font-size:.8125rem;list-style:none;display:flex}.tf-legend li{white-space:nowrap;align-items:center;gap:8px;display:inline-flex}.tf-legend svg{width:26px;height:8px;overflow:visible}.tf-legend line{stroke-width:2px}.tf-legend__s line{stroke:var(--chart-1);stroke-dasharray:7 4}.tf-legend__p line{stroke:var(--chart-2);stroke-dasharray:2 3}.tf-legend__avg line{stroke:var(--fg);stroke-width:1.5px}.tf-fig__body{grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr);display:grid}.tf-fig__ytitle{writing-mode:vertical-rl;color:var(--fg-muted);white-space:nowrap;grid-area:1/1;align-self:center;margin-right:6px;font-size:.75rem;rotate:180deg}.tf-plot{aspect-ratio:6/5;grid-area:1/2;margin-bottom:34px;margin-left:40px;position:relative}@media (min-width:640px){.tf-plot{aspect-ratio:5/3}}.tf-plot>svg,.tf-plot__draw{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.tf-gridlines line{stroke:var(--line);stroke-width:1px;vector-effect:non-scaling-stroke;shape-rendering:crispedges}.tf-frame{fill:none;stroke:var(--line-strong);stroke-width:1px;vector-effect:non-scaling-stroke;shape-rendering:crispedges}.tf-hatch-line{stroke:var(--fg-faint);stroke-opacity:.4;stroke-width:1px}.tf-marker{stroke:var(--signal);stroke-opacity:.75;stroke-width:1px;vector-effect:non-scaling-stroke}.tf-series{fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke}.tf-series--s{stroke:var(--chart-1);stroke-width:1.75px;stroke-dasharray:7 4}.tf-series--p{stroke:var(--chart-2);stroke-width:1.75px;stroke-dasharray:2 3}.tf-series--avg{stroke:var(--fg);stroke-width:1.5px}.tf-dot,.tf-dot-halo{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}.tf-dot{stroke:var(--signal);stroke-width:9px}.tf-dot-halo{stroke:var(--bg-0);stroke-width:14px}.tf-strip{border-radius:1px;height:5px;position:absolute;top:calc(100% + 2px);left:0;right:0}.tf-yticks,.tf-xticks{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-muted);pointer-events:none;font-size:.75rem;position:absolute}.tf-yticks{width:40px;inset:0 calc(100% + 8px) 0 auto}.tf-yticks span{position:absolute;right:0;translate:0 -50%}.tf-xticks{height:14px;top:calc(100% + 12px);left:0;right:0}.tf-xticks span{position:absolute;translate:-50%}@media (max-width:639px){.tf-xticks span[data-minor]{display:none}}.tf-fig__xtitle{text-align:center;color:var(--fg-muted);grid-area:2/2;margin-left:40px;font-size:.75rem}.tf-marker-label{background:var(--bg-0);font-family:var(--font-mono);color:var(--signal);white-space:nowrap;pointer-events:none;border-radius:3px;padding:1px 4px;font-size:.75rem;position:absolute;bottom:6px;translate:6px}.tf-marker-label[data-flip]{translate:calc(-100% - 6px)}.tf-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.tf-swatch{border:1px solid var(--line);background:var(--bg-1);border-radius:8px;min-width:0;padding:12px}.tf-swatch__chip{border:1px solid var(--line-strong);border-radius:6px;height:44px;display:block}.tf-swatch__title{color:var(--fg);margin-top:10px;font-size:.875rem}.tf-swatch__y{color:var(--fg);margin-top:4px;font-size:1rem}.tf-swatch__y small{color:var(--fg-muted);font-size:.8125rem}.tf-swatch__xy{color:var(--fg-muted);white-space:pre-wrap;margin-top:2px;font-size:.8125rem}.tf-drawing{position:relative}.tf-drawing svg{aspect-ratio:4/3;width:100%;height:auto;display:block;overflow:hidden}.tf-turn{transform-box:view-box;transform-origin:200px 112px}@media (prefers-reduced-motion:no-preference){.tf-turn{transition:transform .2s ease-out}}.tf-m--SiO2{--m:color-mix(in oklab, var(--fg) 34%, var(--bg-2))}.tf-m--MgF2{--m:color-mix(in oklab, var(--chart-3) 55%, var(--bg-2))}.tf-m--TiO2{--m:color-mix(in oklab, var(--beam-1) 75%, var(--bg-2))}.tf-m--Ta2O5{--m:color-mix(in oklab, var(--chart-4) 75%, var(--bg-2))}.tf-m{fill:var(--m)}.tf-sub{fill:color-mix(in oklab, var(--fg) 7%, var(--bg-1))}.tf-outline{fill:none;stroke:var(--fg);stroke-opacity:.85;stroke-width:1.25px;stroke-linejoin:round}.tf-outline--break{stroke-width:1px}.tf-normal{fill:none;stroke:var(--fg-muted);stroke-width:1px}.tf-ray,.tf-ray-head{fill:none;stroke:var(--fg);stroke-width:1.75px}.tf-beam,.tf-beam-head{fill:none;stroke-linecap:round;stroke-linejoin:round}.tf-beam{stroke-width:3.5px}.tf-beam--in{stroke-width:2.25px}.tf-beam-head{stroke-width:2px}.tf-arc{fill:none;stroke:var(--signal);stroke-width:1.25px}.tf-arc-label{font-family:var(--font-mono);fill:var(--signal);font-size:13px}.tf-mats{color:var(--fg);flex-wrap:wrap;gap:8px 18px;margin:12px 0 0;padding:0;font-size:.875rem;list-style:none;display:flex}.tf-mats li{align-items:center;gap:8px;display:inline-flex}.tf-mats .tf-mono{color:var(--fg-muted);font-size:.8125rem}.tf-chip{background:var(--m);border-radius:2px;flex:none;width:12px;height:12px;display:inline-block}.tf-chip--sub{background:color-mix(in oklab, var(--fg) 7%, var(--bg-1));box-shadow:inset 0 0 0 1px var(--line-strong)}.tf-layers{border-top:1px solid var(--line);gap:20px;padding:16px;display:grid}@media (min-width:640px){.tf-layers{padding:20px 24px 24px}}@media (min-width:1024px){.tf-layers{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;padding:24px}}.tf-layers__list{min-width:0}.tf-layers__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.tf-layers__scroll{overscroll-behavior:contain;border:1px solid var(--line);background:var(--bg-1);border-radius:8px;max-height:24rem;margin-top:12px;overflow-y:auto}.tf-layers__end{color:var(--fg-muted);padding:8px 12px;font-size:.8125rem}.tf-layer-list{margin:0;padding:0;list-style:none}.tf-layer{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 12px;display:flex}.tf-layer-list .tf-layer:last-child{border-bottom:1px solid var(--line)}.tf-select--sm{background:var(--bg-0);flex:0 9rem;width:auto;min-width:7rem;min-height:44px;padding:0 10px;font-size:1rem}.tf-layer__thick{font-family:var(--font-mono);color:var(--fg-muted);align-items:center;gap:6px;font-size:.8125rem;display:inline-flex}.tf-layer__thick input{border:1px solid var(--line-strong);background:var(--bg-0);width:6rem;min-height:44px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg);border-radius:6px;padding:0 8px;font-size:1rem}.tf-layer__qw{min-width:4.5rem;color:var(--fg-muted);flex:1 0 auto;font-size:.8125rem}.tf-layer__btns{gap:6px;display:inline-flex}.tf-layers__notes{min-width:0}.tf-layers__notes .tf-small{margin-top:12px}}