:root{--bg:#000;--fg:#fff;--ink:100%;--muted:hsla(0,0%,var(--ink),.6);--label:var(--muted);--track:hsla(0,0%,var(--ink),.3);--tick:hsla(0,0%,var(--ink),.45);--status:var(--muted);--faint:hsla(0,0%,var(--ink),.4);color-scheme:dark;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--fg);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;background:var(--bg)}
.slide{position:relative;width:100%;max-width:1920px;aspect-ratio:16/9;max-height:100svh;background:var(--bg);isolation:isolate}
.header{position:absolute;inset:24px 24px auto;z-index:2;display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:clamp(14px,1.04vw,20px);line-height:1.5;font-weight:600}
.reference{--reference-gap:12px;display:flex;gap:var(--reference-gap);align-items:baseline;white-space:nowrap}.reference strong{font-weight:600;color:var(--muted)}.reference a{color:#78a7ed;text-decoration:none;font-weight:400}.reference a:hover{text-decoration:underline}
.artwork{position:absolute;inset:0;pointer-events:none}.canvas{position:relative;width:100%;height:100%}
.logotype{position:absolute;left:19.583333%;top:35.87915%;width:60.833333%;height:15%;object-fit:fill}
.wordmark{position:absolute;left:19.583333%;top:57.12539%;width:60.833333%;height:3.166066%}
.wordmark>svg,.wordmark>img{display:block;width:100%;height:100%;overflow:visible}
.symbol-logotype{display:none}
.slide[data-view="symbol"] .full-logotype,.slide[data-view="wordmark"] .logotype{display:none}
.slide[data-view="symbol"] .symbol-logotype{display:block}
.slide:not([data-view="full"]) .wordmark-rule{display:none}
.wordmark-glyphs{transform-box:view-box;transform-origin:center}
.slide[data-view="wordmark"] .wordmark-glyphs{transform:scale(2.5)}
.slide[data-view="wordmark"] .wordmark{top:50%!important;transform:translateY(-50%)}
.artwork{overflow:hidden}
.footer{position:absolute;inset:auto 24px 18px;z-index:3}.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,4vw,80px)}
.control{min-width:0}.control label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--label);font-size:clamp(14px,1.04vw,20px);line-height:1.5;font-weight:500}.control output{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
input[type=range]{--progress:0%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:34px;margin:4px 0 0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;border-radius:4px}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--fg) var(--progress),var(--track) var(--progress));border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:var(--track);border-radius:2px}input[type=range]::-moz-range-progress{height:2px;background:var(--fg)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;background:var(--fg);border:2px solid var(--fg);border-radius:50%;box-shadow:0 0 0 5px var(--bg)}
input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--fg);border:2px solid var(--fg);border-radius:50%;box-shadow:0 0 0 5px var(--bg)}
input[type=range]:focus-visible{outline:2px solid #78a7ed;outline-offset:5px}input[type=range]:disabled{cursor:wait;opacity:.45}
.ticks{margin:0 6px;display:flex;justify-content:space-between;height:5px}.ticks span{height:3px;width:1px;background:var(--tick)}
.load-state{min-height:16px;margin-top:9px;text-align:right;font-size:12px;color:var(--status)}button{font:inherit;color:var(--fg);background:transparent;border:1px solid #777;border-radius:4px;padding:3px 10px;margin-left:10px;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #78a7ed;outline-offset:4px}
noscript{position:absolute;bottom:140px;left:24px;color:#ccc}
.header{flex-wrap:wrap}
.view-selector{display:flex;align-items:baseline;gap:clamp(16px,2vw,40px);max-width:100%;overflow-x:auto;scrollbar-width:thin;padding:4px;margin:-4px}
.view-selector .view-option{flex:none;white-space:nowrap;font:inherit;color:var(--muted);background:none;border:0;border-radius:0;margin:0;padding:0;opacity:1;line-height:inherit}
.view-selector .view-option[aria-pressed="true"]{color:var(--fg);opacity:1}
.view-selector .view-option:hover{color:var(--fg)}
/* The viewport controls the layout; only the artwork keeps its proportions. */
body{display:block}
.slide{width:100%;max-width:none;min-height:100svh;max-height:none;aspect-ratio:auto;display:flex;flex-direction:column;padding:80px;gap:24px}
.header{position:relative;inset:auto;flex:none;margin:0}
.artwork{position:relative;inset:auto;flex:1;min-height:max(220px,16vw)}
.canvas{position:absolute;left:50%;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%)}
/* The visible composition spans y=387.495 to 651.148 in the 1080px canvas. */
.slide[data-view="symbol"] .canvas{transform-origin:50% 48.0853%;transform:translate(-50%,-48.0853%) scale(1.683)}
.slide[data-view="symbol"] .artwork{min-height:max(220px,32vw)}
.footer{position:relative;inset:auto;flex:none;margin:0}
.load-state:has(#status:empty):has(#retry[hidden]){display:none}
@media(max-width:1000px){.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 30px}.header{font-size:14px}.reference{--reference-gap:8px}.control label{font-size:14px}}
@media(max-width:500px){.controls{grid-template-columns:1fr;gap:16px}.reference{white-space:normal;flex-wrap:wrap}.view-selector{gap:16px}.load-state{text-align:left}}

:root[data-theme="light"]{color-scheme:light;--bg:#fff;--fg:#000;--ink:0%}
.header,.footer{opacity:1}
.logotype [fill="white"],.wordmark [fill="white"]{fill:var(--fg)}
.logotype [fill="black"],.wordmark [fill="black"]{fill:var(--bg)}
.wordmark [stroke="white"]{stroke:var(--fg)}
.slide[data-view="full"] .canvas{transform-origin:50% 48.0853%;transform:translate(-50%,-48.0853%) scale(1.1)}
 .header,.reference strong,.reference a{font-weight:500}
.theme-selector{display:inline-flex;align-items:baseline;gap:clamp(8px,1vw,20px);color:var(--muted);margin-right:calc(clamp(16px,2vw,40px) - var(--reference-gap));white-space:nowrap}
.reference .theme-option{font:inherit;line-height:inherit;color:var(--muted);padding:0;margin:0;border:0;border-radius:0;background:transparent}
.reference .theme-option:hover,.reference .theme-option[aria-pressed="true"]{color:var(--fg)}
:root[data-theme="light"] .reference a{color:hsl(216,90%,40%)}

.view-selector .view-option,.reference .theme-option{border-bottom:1px solid transparent}
.view-selector .view-option[aria-pressed="true"],.reference .theme-option[aria-pressed="true"]{border-bottom-color:currentColor}

/* Print the currently selected SVG and live parameter outputs on one A4 sheet. */
@page{size:A4 landscape;margin:0}
@media print{
  :root,body{width:297mm;height:210mm;min-height:0;margin:0;padding:0;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .slide{width:297mm;height:209mm;min-height:0;max-height:209mm;padding:12mm;gap:6mm;overflow:hidden;break-inside:avoid;break-after:avoid}
  .header{font-size:7.5pt;line-height:1.5;flex-wrap:nowrap;gap:5mm}
  .view-selector{overflow:visible;padding:0;margin:0;gap:4mm}
  .reference{--reference-gap:2mm;flex-wrap:nowrap;white-space:nowrap}
  .theme-selector{gap:2mm;margin-right:calc(4mm - var(--reference-gap))}
  .artwork,.slide[data-view="symbol"] .artwork{min-height:0;flex:1}
  .controls{display:flex;justify-content:space-between;gap:6mm}
  .control{flex:none}
  .reference a{font-size:0}
  .reference a::after{content:attr(href);font-size:7.5pt}
  .control label{font-size:9pt;gap:3mm;justify-content:flex-start}
  .control input,.ticks,.load-state,noscript{display:none!important}
  button:focus-visible,a:focus-visible{outline:none}
}

.reference .print-button{display:inline-flex;align-self:center;align-items:center;justify-content:center;padding:0;margin:0;margin-right:calc(clamp(16px,2vw,40px) - var(--reference-gap));border:0;border-radius:0;background:none;color:var(--muted)}
.reference .print-button:hover{color:var(--fg)}
.print-button .material-symbols-sharp{font-size:24px;font-variation-settings:"opsz" 20,"wght" 400,"FILL" 0,"GRAD" 0}
@media print{.reference .print-button{display:none}}

@media screen and (min-width:1001px){.controls{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,3vw,60px)}}
.favorites-control{border-bottom:1px solid var(--track);min-width:0;font-size:clamp(14px,1.04vw,20px);font-weight:500;color:var(--label)}
.favorite-actions{display:flex;align-items:center;gap:12px;min-height:34px}
.favorite-actions button{padding:0;margin:0;border:0;border-radius:0;color:var(--muted)}
.favorite-actions button:hover,.favorite-actions button[aria-pressed="true"]{color:var(--fg)}
#save-favorite{font-size:26px;line-height:1}#favorite-status{display:block;font-size:12px}
#favorites-empty{color:var(--faint);font-size:13px;line-height:1.4}
#favorites-empty[hidden]{display:none}
#favorite-shortcuts{display:flex;flex-wrap:wrap;gap:8px}
.favorite-actions{align-items:center}
#save-favorite{flex:none;display:flex;align-items:center;justify-content:center;height:34px}
#save-favorite .material-symbols-sharp{font-size:24px;font-variation-settings:"opsz" 20,"wght" 400,"FILL" 0,"GRAD" 0}
#save-favorite[aria-pressed="true"] .material-symbols-sharp{font-variation-settings:"opsz" 20,"wght" 400,"FILL" 1,"GRAD" 0}
#favorite-shortcuts button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:none;min-height:34px;border:0;border-radius:.25rem;color:var(--bg);background:var(--muted);padding:0 4px;font-size:12px;line-height:1.25;font-variant-numeric:tabular-nums}
#favorite-shortcuts button[aria-pressed="true"]{color:var(--bg);background:var(--fg)}
#favorite-shortcuts button:disabled{opacity:.4;cursor:wait}
@media print{.favorites-control{display:none!important}}

.favorites-control>span:first-child{display:block;line-height:1.5}
#favorite-shortcuts button span{white-space:nowrap}

:root[data-theme="random"] .header,:root[data-theme="random"] .footer{opacity:1}
:root[data-theme="random"] .reference a{color:var(--fg)}

.custom-theme{display:inline-flex;align-items:baseline;gap:0;color:var(--muted)}
.custom-theme .theme-option{margin-right:.3em}
#custom-color{width:6.5ch;text-align:center;min-width:0;padding:0;margin:0;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:inherit;font:inherit;line-height:inherit}
#custom-color:focus-visible{outline:0;background:var(--fg);color:var(--bg)}
.custom-theme{border-bottom:1px solid transparent}
.custom-theme:has([aria-pressed="true"]){color:var(--fg);border-bottom-color:currentColor}
.custom-theme .theme-option,.custom-theme .theme-option[aria-pressed="true"],.custom-theme #custom-color{border-bottom:0}
#custom-color[aria-invalid="true"]{border-bottom-style:dashed;border-bottom-color:currentColor}
:root[data-theme="custom"] .header,:root[data-theme="custom"] .footer{opacity:1}
:root[data-theme="custom"] .reference a{color:var(--fg)}