@layer reset{*{box-sizing:border-box;margin:0;padding:0}:root{interpolate-size:allow-keywords}}@layer tokens{:root{--font-sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;--color-ink:#000;--color-paper:#fff;--color-accent:#0075ff;--color-accent-darker:#005bc7;--color-ink-10:#1a1a1a;--color-ink-30:#4d4d4d;--color-ink-50:gray;--color-ink-70:#b3b3b3;--color-ink-85:#d9d9d9;--color-ink-90:#e6e6e6;--color-ink-95:#f2f2f2;--color-ink-95-90:#f2f2f2e6;--color-surface:var(--color-ink-95);--color-surface-hover:var(--color-ink-90);--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:9999px;--grid-margin:10px;--grid-gutter:10px;--bar-height:2rem;--panel-motion-duration:.18s;--panel-motion-ease:cubic-bezier(.2, 0, 0, 1);--fs-base:14px}}@layer base{.app-shell{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-sans);font-size:var(--fs-base);-webkit-text-size-adjust:100%;min-height:100vh;line-height:1.5}button{border:1px solid var(--color-ink-85);border-radius:var(--radius-full);background:var(--color-paper);color:var(--color-ink);cursor:pointer;font-family:var(--font-mono);-webkit-user-select:none;user-select:none;padding:4px 12px;transition:background .12s,color .12s,border-color .12s}input[type=range]{accent-color:var(--color-accent)}input[type=number]{border:1px solid var(--color-ink-85);border-radius:var(--radius-full);background:var(--color-paper);color:var(--color-ink);font-family:var(--font-mono);min-width:0;padding:4px 12px}input:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{box-shadow:0 0 0 2px var(--color-accent);outline:none}input:invalid{border-color:var(--color-accent)}code{font-family:var(--font-mono)}}@layer layout{.app-grid{gap:var(--grid-gutter);inset:var(--grid-margin);grid-template-rows:auto minmax(0,1fr);grid-template-columns:repeat(12,minmax(0,1fr));display:grid;position:fixed}.panel--title{grid-area:1/1/2/7}.panel--examples{grid-area:1/7/2/10}.panel--controls{grid-area:1/10/2/13}.stage{z-index:0;grid-area:2/1/3/10;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative}.app-status{color:var(--color-ink);font-family:var(--font-mono);pointer-events:none;text-transform:uppercase;z-index:1;grid-area:2/1/3/10;place-self:end start}@media (width<=760px){.app-grid{padding:var(--grid-margin);grid-template-rows:none;grid-template-columns:minmax(0,1fr);position:static;inset:auto}.panel--title,.panel--examples,.panel--controls,.stage,.app-status{grid-area:auto}.stage,.app-status{order:-1;align-self:start}}}@layer components{.panel{z-index:2;position:relative}.panel__bar{background:var(--color-ink-95);border-radius:var(--radius-full);cursor:pointer;align-items:center;gap:var(--grid-gutter);min-height:var(--bar-height);-webkit-user-select:none;user-select:none;justify-content:space-between;padding:4px 12px;list-style:none;transition:background .12s;display:flex}.panel__bar::-webkit-details-marker{display:none}.panel__title{font-family:var(--font-sans);text-overflow:ellipsis;white-space:nowrap;font-weight:400;overflow:hidden}.panel__chevron{background:var(--color-ink-85);border-radius:var(--radius-full);color:var(--color-paper);height:calc(var(--bar-height) - 16px);width:calc(var(--bar-height) - 16px);flex-shrink:0;justify-content:center;align-items:center;transition:background .12s,color .12s;display:flex}.panel__chevron>svg{transition:transform .12s}.panel__body{background:var(--color-ink-95-90);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);clip-path:inset(0 round var(--radius-lg));left:0;right:0;top:calc(100% + var(--grid-gutter));transition:clip-path var(--panel-motion-duration) var(--panel-motion-ease), opacity var(--panel-motion-duration) var(--panel-motion-ease), visibility 0s;flex-direction:column;gap:16px;padding:12px;display:flex;position:absolute}.panel::details-content{content-visibility:visible}.panel__body--scroll{max-height:calc(100dvh - var(--grid-margin) * 2 - var(--bar-height) - var(--grid-gutter));overscroll-behavior:contain;overflow:hidden auto}@media (width<=760px){.panel__body{margin-top:var(--grid-gutter);position:static}.panel__body--scroll{max-height:none;overflow:visible}.panel::details-content{height:0;transition:height var(--panel-motion-duration) var(--panel-motion-ease), content-visibility var(--panel-motion-duration) allow-discrete;overflow:hidden}.panel[open]::details-content{height:auto}}.panel__copy{color:var(--color-ink-30);line-height:1.5}.link-list,.index-list{flex-direction:column;gap:4px;list-style:none;display:flex}.link-list__item,.index-list__item{border-radius:var(--radius-md);color:var(--color-ink);padding:4px 6px;text-decoration:none;transition:background .12s,color .12s;display:block}.link-list__item{font-family:var(--font-mono)}.link-list__item span,.index-list__name span{color:var(--color-ink-50);margin-left:.4em}.index-list{counter-reset:example}.index-list__name{font-family:var(--font-mono);display:block}.index-list__name:before{color:var(--color-ink-50);content:counter(example, decimal-leading-zero) " ";counter-increment:example}.index-list__desc{color:var(--color-ink-50);line-height:1.4;display:block}.photo-canvas{border-radius:var(--radius-sm);touch-action:none;max-width:100%;display:block}.dropzone-stack{flex-direction:column;gap:8px;width:100%;max-width:min(100%,40rem);display:flex}.dropzone{background:var(--color-surface);border:1px dashed var(--color-ink-85);border-radius:var(--radius-md);color:var(--color-ink-50);cursor:pointer;font-family:var(--font-sans);text-align:center;padding:80px 40px;line-height:1.5;transition:background .12s,border-color .12s,color .12s}.dropzone:focus-visible{box-shadow:0 0 0 2px var(--color-accent)}.dropzone b{color:var(--color-ink);font-weight:500}.control-group__label{border-bottom:1px solid var(--color-ink-70);color:var(--color-ink-50);font-family:var(--font-mono);text-transform:uppercase;margin-bottom:8px;padding-bottom:4px;display:block}.button-group{flex-wrap:wrap;gap:4px;display:flex}.button--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-paper)}.button--block{width:100%;margin-top:8px}.slider-control{grid-template-columns:1fr auto;grid-template-areas:"name value""slider slider";align-items:center;gap:6px 4px;margin-top:4px;display:grid}.slider-control__name{color:var(--color-ink);font-family:var(--font-mono);grid-area:name}.slider-control__input{grid-area:slider;width:100%}.slider-control__value{color:var(--color-ink);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;grid-area:value}.export-field{font-family:var(--font-mono);grid-template-columns:minmax(0,1fr) minmax(4rem,.55fr) auto;align-items:center;gap:4px;margin-top:4px;display:grid}.export-field span{color:var(--color-ink-50)}.field-help{color:var(--color-ink-50);font-family:var(--font-sans);margin-top:4px;line-height:1.4;display:block}.format-fieldset{border:0;flex-wrap:wrap;gap:8px;margin:8px 0 0;display:flex}.format-fieldset legend{color:var(--color-ink-50);font-family:var(--font-mono);width:100%;margin-bottom:4px}.format-fieldset label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:4px;display:inline-flex}.progress-bar{background:var(--color-ink-85);border-radius:var(--radius-full);width:100%;height:4px;display:none;overflow:hidden}.progress-bar__fill{background:var(--color-accent);border-radius:var(--radius-full);transform-origin:0;width:100%;height:100%;transition:transform .2s;transform:scaleX(0)}.error-message{background:var(--color-paper);border:1px solid var(--color-ink);border-radius:var(--radius-lg);color:var(--color-ink);font-family:var(--font-sans);padding:4px 12px;line-height:1.5;display:none}.hint-panel{border-top:1px solid var(--color-ink-70);color:var(--color-ink-50);font-family:var(--font-sans);padding-top:8px;line-height:1.5}}@layer states{@media (hover:hover) and (pointer:fine){button:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-paper)}.button--primary:hover{background:var(--color-accent-darker);border-color:var(--color-accent-darker)}.panel__bar:hover{background:var(--color-surface-hover)}.panel__bar:hover .panel__chevron{background:var(--color-ink-70);color:var(--color-paper)}.link-list__item:hover,.index-list__item:hover{background:var(--color-surface-hover);color:var(--color-ink)}.link-list__item:hover span,.index-list__item:hover .index-list__desc,.index-list__item:hover .index-list__name:before,.index-list__item:hover .index-list__name span{color:var(--color-ink-30)}}.panel[open]>.panel__bar>.panel__chevron>svg{transform:rotate(180deg)}.panel:not([open]) .panel__body{clip-path:inset(0 0 100% 0 round var(--radius-lg));opacity:0;pointer-events:none;visibility:hidden;transition:clip-path var(--panel-motion-duration) var(--panel-motion-ease), opacity var(--panel-motion-duration) var(--panel-motion-ease), visibility 0s linear var(--panel-motion-duration)}.dropzone.is-dragging{background:var(--color-ink-90);border-color:var(--color-ink-50);color:var(--color-ink-50)}.button.is-active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-paper)}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-sans-latin-400-normal-CDDApCn2.woff2)format("woff2"),url(/assets/ibm-plex-sans-latin-400-normal-CYLoc0-x.woff)format("woff")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-sans-latin-500-normal-6ng42L7E.woff2)format("woff2"),url(/assets/ibm-plex-sans-latin-500-normal-BgVn5rGT.woff)format("woff")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2)format("woff2"),url(/assets/ibm-plex-mono-latin-400-normal-CvHOgSBP.woff)format("woff")}