@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-vietnamese-wdth-normal-rJmnGBSt.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-ext-wdth-normal-7khWdh9v.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-wdth-normal-DY7AcnAa.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--house:#0c0c0b;--house-lift:#1e1d1a;--screen:#ece8dc;--screen-dim:#a8a394;--film:#1b1a17;--film-frame:#2a2926;--amber:#f4ad1c;--amber-lit:#ffc13d;--holes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Crect x='3.5' y='2.5' width='7' height='5' rx='1.5' fill='%23b9b3a2'/%3E%3C/svg%3E");--grease:#e03a2c;--holes-dim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Crect x='3.5' y='2.5' width='7' height='5' rx='1.5' fill='%2355534c'/%3E%3C/svg%3E");--ink:#131412;--line:#7d7a70;--track:#6b685f;--font:"Archivo Variable", system-ui, sans-serif;--ease:cubic-bezier(.16, 1, .3, 1);--tap:44px;--gutter:16px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{background:var(--house);color:var(--screen);font:400 1rem/1.35 var(--font);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}button,label,.strip,.viewer canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}::selection{background:var(--amber);color:var(--ink)}:focus-visible{outline:2px solid var(--screen);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{height:100dvh;padding-top:env(safe-area-inset-top);grid-template:"head""viewer"minmax(0,1fr)"alert""data""strength""strip""bar"/minmax(0,1fr);display:grid}.head{min-height:var(--tap);padding:4px 4px 4px var(--gutter);grid-area:head;justify-content:space-between;align-items:center;gap:12px;display:flex}.name{letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0;font-size:.8125rem;font-weight:600;font-stretch:122%}.where{white-space:nowrap;gap:3px;min-width:0;margin:0;padding-block:6px;line-height:1.1;display:grid}.where strong{letter-spacing:.14em;text-transform:uppercase;font-size:1.0625rem;font-weight:600;font-stretch:122%}.where span{color:var(--amber);text-overflow:ellipsis;font-size:.9375rem;overflow:hidden}.steps{flex:none;align-items:center;display:flex}.count{text-align:center;min-width:3.4em;color:var(--screen-dim);font-size:.875rem}.icon-btn{width:var(--tap);height:var(--tap);color:var(--screen);cursor:pointer;transition:background-color .15s var(--ease);background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid}.icon-btn:active{background:var(--house-lift)}@media (hover:hover){.icon-btn:hover{background:var(--house-lift)}}.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.viewer{min-height:0;padding:4px var(--gutter) 8px;grid-area:viewer;place-items:center;display:grid;container-type:size}.viewer canvas{touch-action:pan-y;max-width:100cqw;max-height:100cqh;display:block}.app--empty .viewer canvas{display:none}.app--empty .viewer{padding:0}.intro{grid-template:auto minmax(0,1fr) auto/minmax(0,1fr);align-items:center;width:100%;min-width:0;height:100%;padding-block:calc(clamp(12px,4vh,40px) + 3.5vw);display:grid;position:relative;overflow-x:clip}.intro__card{z-index:1;padding:24px var(--gutter);text-align:center;animation:arrive .5s var(--ease) both;justify-items:center;gap:16px;display:grid;position:relative}@keyframes arrive{0%{opacity:0;transform:translateY(8px)}}.title span{display:block}.title{letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;margin:0 0 8px;font-size:clamp(1.75rem,min(9.5vw,9vh),4.5rem);font-weight:700;font-stretch:122%;line-height:.98}.intro__card p{max-width:26ch;color:var(--screen-dim);text-wrap:balance;margin:0}.intro__card .btn{min-height:56px;padding:0 28px;font-size:1.125rem}.run{--frame:clamp(60px, 11vh, 112px);margin-inline:-8%;position:relative;rotate:-4deg}.run--back{rotate:3deg}.run__film{background:var(--holes) repeat-x left top, var(--holes) repeat-x left bottom, var(--film);margin-right:calc(8% + var(--frame) * .55);padding:10px 0;overflow:clip;-webkit-mask-image:linear-gradient(90deg,#0000 6%,#000 34%);mask-image:linear-gradient(90deg,#0000 6%,#000 34%)}.run--back .run__film{margin-right:0;margin-left:calc(8% + var(--frame) * .55);-webkit-mask-image:linear-gradient(270deg,#0000 6%,#000 34%);mask-image:linear-gradient(270deg,#0000 6%,#000 34%)}.cassette{top:50%;right:calc(8% - var(--frame) * .3);height:calc(var(--frame) + 72px);font-family:var(--font);position:absolute;translate:0 -50%}.run--back .cassette{right:auto;left:calc(8% - var(--frame) * .3);scale:-1 1}.run--back .cassette text{transform-box:fill-box;transform-origin:50%;transform:scaleX(-1)}.run__track{will-change:transform;width:max-content;padding-block:4px;animation:90s linear infinite run;display:flex}.run--back .run__track{animation-duration:120s;animation-direction:reverse}.intro--held .run__track{animation-play-state:paused}.hold{z-index:1;color:var(--screen-dim);position:absolute;bottom:4px;right:4px}@media (prefers-reduced-motion:reduce){.hold{display:none}}@keyframes run{to{transform:translate(-25%)}}.run__cell{color:var(--amber);justify-items:center;gap:5px;padding-right:6px;line-height:1;display:grid}.run__cell .edge{opacity:.72}.run__frame{height:var(--frame);aspect-ratio:1.5;background:var(--film-frame);display:block}.run__frame img{filter:saturate(.42)brightness(.86)contrast(1.05);width:100%;height:100%;animation:expose .6s var(--ease) both;display:block}@keyframes expose{0%{opacity:0}}.alert{padding:2px 4px 2px var(--gutter);background:var(--screen);color:var(--ink);grid-area:alert;align-items:center;gap:4px;margin-bottom:8px;display:flex}.alert p{text-wrap:pretty;flex:1;margin:0;padding-block:8px;font-weight:600}.alert .icon-btn{color:var(--ink);flex:none}.alert .icon-btn:active{background:#d6d1c3}.alert .icon-btn:focus-visible{outline-color:var(--ink)}@media (hover:hover){.alert .icon-btn:hover{background:#d6d1c3}}.data{min-height:24px;padding:0 var(--gutter);grid-area:data;justify-content:space-between;align-items:baseline;gap:12px;font-size:.875rem;display:flex}.data p{margin:0}.data .said{text-align:right;gap:12px;font-weight:600;display:flex}.edge{letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:600;font-stretch:68%}.data .edge{color:var(--screen-dim);white-space:nowrap}.strength{padding:0 var(--gutter);color:var(--screen-dim);grid-area:strength;grid-template-columns:auto minmax(0,1fr) 3.2em;align-items:center;gap:12px;font-size:.875rem;display:grid}.strength output{text-align:right;color:var(--screen);font-weight:600}.strength input{appearance:none;width:100%;height:var(--tap);cursor:pointer;background:0 0;margin:0}.strength input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--screen) var(--fill,100%), var(--track) var(--fill,100%));height:2px}.strength input::-moz-range-track{background:linear-gradient(to right, var(--screen) var(--fill,100%), var(--track) var(--fill,100%));height:2px}.strength input::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--house);background:var(--grease);border-radius:50%;width:24px;height:24px;margin-top:-11px}.strength input::-moz-range-thumb{border:3px solid var(--house);background:var(--grease);border-radius:50%;width:18px;height:18px}.strength input:focus-visible{outline-offset:-8px}.strip{background:var(--holes-dim) repeat-x left top, var(--holes-dim) repeat-x left bottom, var(--film);grid-area:strip;margin-top:6px;padding:10px 0}.strip ul{width:fit-content;max-width:100%;padding:2px var(--gutter) 4px;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;gap:6px;margin:0 auto;list-style:none;display:flex;overflow-x:auto}.strip ul::-webkit-scrollbar{display:none}.strip li{scroll-snap-align:start;flex:none}.frame{min-width:76px;color:var(--amber);font:inherit;cursor:pointer;background:0 0;border:0;justify-items:center;gap:5px;padding:0;display:grid}.frame:disabled{cursor:default}.frame:focus-visible{outline-color:var(--amber);outline-offset:3px}.frame__img{height:80px;aspect-ratio:var(--ar,1.5);background:var(--film-frame);display:block;position:relative}.frame__img canvas{opacity:0;width:100%;height:100%;transition:opacity .26s var(--ease);display:block}.frame--developed .frame__img canvas{opacity:1}.frame--pending .frame__img{animation:1.4s ease-in-out infinite alternate develop}@keyframes develop{to{background:#3d3b36}}.frame__name{white-space:nowrap;opacity:.72;transition:opacity .15s var(--ease);line-height:1}.frame[aria-pressed=true] .frame__name,.frame:active .frame__name{opacity:1}@media (hover:hover){.frame:not(:disabled):hover .frame__name{opacity:1}}.ring{pointer-events:none;fill:none;width:calc(100% + 18px);height:calc(100% + 18px);stroke:var(--grease);stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round;position:absolute;inset:-9px;overflow:visible}.ring path{stroke-dasharray:1;animation:ring .26s var(--ease) both}@keyframes ring{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.bar{padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));grid-area:bar;grid-template-columns:auto minmax(0,1fr);gap:10px;display:grid}[inert]{opacity:.6;transition:opacity .15s var(--ease)}.app--empty .bar,.app--empty .strength,.app--empty .strip,.app--empty .steps{display:none}.btn{border:1.5px solid var(--line);min-height:48px;color:var(--screen);font:600 1rem/1 var(--font);cursor:pointer;transition:background-color .15s var(--ease), transform .15s var(--ease);background:0 0;border-radius:4px;justify-content:center;align-items:center;gap:8px;padding:0 18px;display:inline-flex}.btn:active{background:var(--house-lift);transform:scale(.98)}.btn--primary{border-color:var(--amber);background:var(--amber);color:var(--ink)}.btn--primary:active{background:var(--amber-lit)}@media (hover:hover){.btn:hover{background:var(--house-lift)}.btn--primary:hover{border-color:var(--amber-lit);background:var(--amber-lit)}}.btn:disabled{border-color:var(--house-lift);background:var(--house-lift);color:var(--screen-dim);cursor:default;transform:none}@media (width>=880px),(orientation:landscape) and (width>=600px){.app{grid-template:"viewer head""viewer strength""viewer data""viewer alert""viewer."minmax(0,1fr)"viewer bar""strip strip"/minmax(0,1fr) clamp(260px,30vw,360px)}.app:not(.app--empty) .head{flex-wrap:wrap;gap:0}.app:not(.app--empty) .where{flex:100%}.steps{margin-left:-12px}.app--empty{grid-template:"head""viewer"minmax(0,1fr)"alert""data"/minmax(0,1fr)}.viewer{padding:24px}.head{padding-top:20px}.data{flex-direction:column;gap:6px;padding-top:12px}.data .said{text-align:left;flex-direction:column;gap:6px}.bar{grid-template-columns:1fr;padding-bottom:20px}.bar .btn--primary{order:-1}.strip{margin-top:0}.frame__img{height:clamp(52px,12vh,96px)}}@media (orientation:landscape) and (height<=520px){.viewer{padding:8px 12px}.head{padding-top:4px}.bar{gap:8px;padding-block:8px}.btn{min-height:44px}.strip{padding-block:8px}.intro{padding-block:calc(6px + 1.5vw)}.run{--frame:36px;rotate:-1deg}.run--back{rotate:1deg}.title{margin-bottom:0;font-size:1.375rem}.title span{display:inline}.intro__card p{max-width:none}.intro__card{gap:10px;padding-block:8px}.intro__card .btn{min-height:48px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}