@property --dev-fill{syntax: "<number>"; inherits: true; initial-value: 1;}@property --dev-t{syntax: "<number>"; inherits: false; initial-value: 0;}.develop{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.375rem;vertical-align:middle}.develop__btn{--hole: rgb(var(--app-accent) / .3);--p: 0;--dev-fill: 1;position:relative;display:inline-grid;place-items:center;height:2.5rem;padding-inline:1.125rem;border-radius:var(--app-r-sm);border:1px solid rgb(var(--app-accent) / .5);background-color:rgb(var(--app-surface));color:rgb(var(--app-accent));font-family:var(--app-font-sans);font-size:.875rem;font-weight:600;line-height:1;isolation:isolate;user-select:none;transition:border-color var(--app-dur-2) var(--app-ease),background-color var(--app-dur-2) var(--app-ease),color var(--app-dur-2) var(--app-ease),transform var(--app-dur-1) var(--app-ease)}.develop__btn:before,.develop__fill:before{content:"";position:absolute;inset:3px 7px;pointer-events:none;background:radial-gradient(circle at 2.5px 1.5px,var(--hole) 1.1px,transparent 1.5px) 0 0 / 7px 3px repeat-x,radial-gradient(circle at 2.5px 1.5px,var(--hole) 1.1px,transparent 1.5px) 0 100% / 7px 3px repeat-x}.develop__face{display:grid;place-items:center}.develop__fill{--hole: rgb(var(--app-accent-ink) / .4);position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding-inline:1.125rem;border-radius:calc(var(--app-r-sm) - 1px);background-color:rgb(var(--app-accent));color:rgb(var(--app-accent-ink));opacity:var(--dev-fill);clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0);pointer-events:none}.develop__labels{display:grid}.develop__label{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;opacity:0;transform:translateY(.4em);transition:opacity var(--app-dur-2) var(--app-ease),transform var(--app-dur-2) var(--app-ease)}.develop__label[data-on]{opacity:1;transform:none}.develop__face .develop__label[data-layer=fail]{color:rgb(var(--app-bad))}.develop__check{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.develop__check path{stroke-dasharray:1;stroke-dashoffset:1}.develop__glow{position:absolute;inset:-1px;border-radius:var(--app-r-sm);box-shadow:0 0 0 1px rgb(var(--app-accent)),0 0 26px -2px rgb(var(--app-accent) / .6);opacity:0;pointer-events:none}.develop__reason{max-width:36ch;font-size:.75rem;line-height:1.35;color:rgb(var(--app-bad))}.develop[data-state=idle] .develop__btn:hover:not(:disabled){border-color:rgb(var(--app-accent) / .85);background-color:rgb(var(--app-accent) / .07)}.develop__btn:disabled{opacity:.5;cursor:not-allowed}.develop[data-state=press] .develop__btn{animation:dev-press var(--dev-press) var(--app-ease) both}.develop[data-state=work] .develop__btn{--p: .72;transform:translateY(1px) scale(.98);border-color:rgb(var(--app-accent) / .8);cursor:progress;animation:dev-rise var(--dev-cycle) var(--app-ease) both,dev-breathe var(--dev-cycle) ease-in-out var(--dev-cycle) infinite}.develop[data-state=pass] .develop__btn{--p: 1;border-color:rgb(var(--app-accent));animation:dev-pass var(--dev-verdict) var(--app-ease) both}.develop[data-state=pass] .develop__glow{animation:dev-glow var(--dev-verdict) var(--app-ease) both}.develop[data-state=pass] .develop__check path{stroke-dashoffset:0;animation:dev-draw var(--dev-verdict) var(--app-ease) both}.develop[data-verdict=fail] .develop__btn{border-color:rgb(var(--app-bad) / .7);color:rgb(var(--app-bad))}.develop[data-verdict=fail] .develop__fill{background-color:rgb(var(--app-bad))}.develop[data-state=fail] .develop__btn{--p: 0;animation:dev-fail var(--dev-verdict) var(--app-ease) both}.develop[data-state=done][data-verdict=pass] .develop__btn{--p: 1;border-color:rgb(var(--app-accent))}.develop[data-state=done][data-verdict=pass] .develop__check path{stroke-dashoffset:0}.develop[data-state=done] .develop__btn{animation:dev-hold var(--dev-hold) linear both}@keyframes dev-press{0%{transform:none}to{transform:translateY(1px) scale(.98)}}@keyframes dev-rise{0%{--p: 0}to{--p: .72}}@keyframes dev-breathe{0%,to{--p: .72}50%{--p: .8}}@keyframes dev-pass{0%{--p: .72;transform:translateY(1px) scale(.98)}30%{--p: 1;transform:scale(1.02)}60%{--p: 1;transform:none}to{--p: 1;transform:none}}@keyframes dev-glow{0%{opacity:0}30%{opacity:1}to{opacity:0}}@keyframes dev-draw{0%,30%{stroke-dashoffset:1}60%,to{stroke-dashoffset:0}}@keyframes dev-fail{0%{--p: .72;transform:translateY(1px) scale(.98)}6.667%{transform:translate(-6px)}13.333%{transform:translate(5px)}20%{transform:translate(-3px)}26.667%{transform:translate(2px)}33.333%{--p: 0;transform:none}to{--p: 0;transform:none}}@keyframes dev-hold{0%,70%{--dev-t: 0;--dev-fill: 1}to{--dev-t: 1;--dev-fill: 0}}@media(prefers-reduced-motion:reduce){.develop__btn,.develop__btn *,.develop__glow{animation:none!important;transition:none!important}.develop[data-state] .develop__btn{transform:none}}@property --p{syntax: "<number>"; inherits: true; initial-value: 0;}.filmstrip{--frame-h: 2.75rem;--cell-min: 4.75rem;--band-pad: 10px;max-width:100%;overflow-x:auto;padding:4px 2px 2px;scrollbar-width:thin}.filmstrip[data-size=sm]{--frame-h: 1.875rem;--cell-min: 3.75rem;--band-pad: 8px}.filmstrip__list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(var(--cell-min),1fr);margin:0;padding:0;list-style:none}.filmstrip__cell{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0}.filmstrip__cell:before{content:"";position:absolute;inset:0 0 auto;height:calc(var(--frame-h) + var(--band-pad) * 2);border-block:1px solid var(--app-hair);background:radial-gradient(circle at 3px 2px,rgb(var(--app-ink) / .16) 1.3px,transparent 1.8px) 1px 2px / 8px 4px repeat-x,radial-gradient(circle at 3px 2px,rgb(var(--app-ink) / .16) 1.3px,transparent 1.8px) 1px calc(100% - 2px) / 8px 4px repeat-x,rgb(var(--app-well));pointer-events:none}.filmstrip__cell:first-child:before{border-inline-start:1px solid var(--app-hair);border-start-start-radius:var(--app-r-sm);border-end-start-radius:var(--app-r-sm)}.filmstrip__cell:last-child:before{border-inline-end:1px solid var(--app-hair);border-start-end-radius:var(--app-r-sm);border-end-end-radius:var(--app-r-sm)}.filmstrip__frame{position:relative;z-index:1;height:var(--frame-h);margin:var(--band-pad) 4px;border-radius:3px;border:1px dashed rgb(var(--app-ink) / .2);overflow:hidden;transition:background-color var(--app-dur-3) var(--app-ease),border-color var(--app-dur-3) var(--app-ease),--p var(--app-dur-3) var(--app-ease)}.filmstrip__num{position:absolute;z-index:2;top:3px;left:5px;font-family:var(--app-font-mono);font-size:.625rem;line-height:1;letter-spacing:.02em;color:rgb(var(--app-faint))}.filmstrip__label{margin-top:.5rem;padding-inline:2px;text-align:center;font-size:.75rem;line-height:1.25;color:rgb(var(--app-subtle));overflow-wrap:anywhere}.filmstrip[data-size=sm] .filmstrip__label{font-size:.6875rem;margin-top:.375rem}.filmstrip__cell[data-phase=printed] .filmstrip__frame{border:1px solid transparent;background-color:rgb(var(--app-ink) / .78);box-shadow:inset 0 0 0 1px var(--app-hair-strong)}.filmstrip__cell[data-phase=printed] .filmstrip__num{color:rgb(var(--app-canvas) / .7)}.filmstrip__cell[data-phase=printed] .filmstrip__label{color:rgb(var(--app-ink-2))}.filmstrip__cell[data-phase=developing] .filmstrip__frame{border:1px solid rgb(var(--app-accent));background-color:rgb(var(--app-surface));overflow:visible}.filmstrip__cell[data-phase=developing] .filmstrip__frame:after{content:"";position:absolute;inset:0;border-radius:2px;background-color:rgb(var(--app-accent) / .8);clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0)}.filmstrip__cell[data-phase=developing] .filmstrip__frame:before{content:"";position:absolute;inset:-1px;border-radius:3px;box-shadow:0 0 0 1px rgb(var(--app-accent) / .35),0 0 18px -3px rgb(var(--app-accent) / .75);animation:filmstrip-breathe 2.4s var(--app-ease) infinite alternate;pointer-events:none}.filmstrip__cell[data-phase=developing] .filmstrip__num{color:rgb(var(--app-accent))}.filmstrip__cell[data-phase=developing] .filmstrip__label{color:rgb(var(--app-accent));font-weight:600}@keyframes filmstrip-breathe{0%{opacity:.55}to{opacity:1}}@media(prefers-reduced-motion:reduce){.filmstrip__frame{transition:none}.filmstrip__cell[data-phase=developing] .filmstrip__frame:before{animation:none}}