/* Minimal input film. Scoped separately from the interactive product. */
#product-film{width:100%;min-width:0}
#product-film[hidden]{display:none}
.film-card{height:430px;position:relative;isolation:isolate;overflow:hidden;background:transparent;border:0;border-radius:0;padding:22px;color:var(--ink,#171717)}
.film-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;min-height:15px;font:9px/1.4 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.8px}
.film-index{color:#8f8f8f}.film-edit{color:#666666;letter-spacing:0}
.film-title{display:flex;align-items:center;gap:10px;position:relative;width:max-content;max-width:100%;font:500 23px/1.1 var(--font,Inter,sans-serif);letter-spacing:-.9px}
.film-title svg{width:12px;height:12px;fill:none;stroke:#939393;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.film-input-views{position:absolute;top:120px;left:22px;right:22px;height:210px}
.film-view{position:absolute;inset:0;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.3,1)}
.film-card[data-view=note] .film-note-view,.film-card[data-view=workout] .film-workout-view,.film-card[data-view=energy] .film-energy-view{opacity:1;transform:translateY(0)}
.film-note-placeholder{position:absolute;left:0;top:7px;font:400 21px/1.4 var(--font,Inter,sans-serif);letter-spacing:-.55px;color:#b4b4b4;transition:opacity .2s}
.has-note .film-note-placeholder{opacity:0}
.film-note-value{min-height:94px;padding:6px 0 0;margin:0;max-width:310px;font:400 25px/1.35 var(--font,Inter,sans-serif);letter-spacing:-.9px;overflow-wrap:anywhere}
.film-note-value.is-active:after,.film-name-input.is-active>span:after,.film-choice-value.is-active:after{content:'';display:inline-block;vertical-align:-2px;width:1px;height:1em;background:var(--accent,#171717);margin-left:1px}
.film-view-hint{position:absolute;bottom:0;left:0;font:9px/1.5 var(--mono,'IBM Plex Mono',monospace);letter-spacing:-.2px;color:#9c9c9c}
.film-save,.film-apply{position:absolute;left:22px;right:22px;bottom:26px;display:flex;justify-content:center;align-items:center;height:42px;padding:0 14px;background:var(--accent,#171717);color:white;font:500 11px/1.2 var(--font,Inter,sans-serif);transition:background .25s}
.is-saved .film-save{background:#444444}
.film-menu{position:absolute;top:93px;left:21px;right:21px;width:auto;background:#ffffff;border:1px solid var(--line,#dedede);padding:5px;opacity:0;transform:translateY(-5px);transition:opacity .2s,transform .2s;z-index:3;pointer-events:none}
.film-menu>span{display:flex;justify-content:space-between;align-items:center;padding:11px 10px;font:11px/1.3 var(--font,Inter,sans-serif)}
.film-menu>span:nth-child(2){background:#eeeeee;color:var(--accent,#171717)}
.film-menu i{font:8px var(--mono,'IBM Plex Mono',monospace);color:#a4a4a4}
.is-menu-open .film-menu{opacity:1;transform:translateY(0)}
.film-workout-heading,.film-workout-row{display:grid;grid-template-columns:minmax(0,1fr) 36px 32px;align-items:center;gap:8px}
.film-workout-heading{height:22px;font:8px/1.4 var(--mono,'IBM Plex Mono',monospace);color:#888}
.film-workout-heading>span:not(:first-child){text-align:center}
.film-workout-row{height:34px;border-bottom:1px solid var(--line,#dedede)}
.film-workout-row>span{font:500 11px/1.3 var(--font,Inter,sans-serif);letter-spacing:-.15px;white-space:nowrap}
.film-workout-row>strong{display:grid;place-items:center;min-width:0;height:25px;border:1px solid transparent;font:400 13px/1 var(--font,Inter,sans-serif);font-variant-numeric:tabular-nums;color:#666;transition:background .2s,border-color .2s,color .2s}
.film-workout-row>strong.is-active{background:#eee;border-color:#bbb;color:#171717}
.film-field-label{font:10px/1.4 var(--mono,'IBM Plex Mono',monospace);color:#888888;margin:0 0 10px}
.film-choices{display:flex;gap:8px}
.film-choices>span{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;height:39px;border:1px solid var(--line,#dedede);padding:0 12px;font:11px var(--font,Inter,sans-serif);color:#666666;transition:background .2s,color .2s,border-color .2s}
.film-choices>span.is-selected{background:#eeeeee;border-color:#bbbbbb;color:#171717}
.film-rating-label{margin-top:17px}
.film-ratings{display:flex;gap:7px}
.film-ratings>span{flex:1;display:grid;place-items:center;height:31px;border:1px solid var(--line,#dedede);font:11px var(--mono,'IBM Plex Mono',monospace);color:#8d8d8d;transition:background .2s,color .2s,border-color .2s}
.film-ratings>span.is-selected{background:var(--accent,#171717);border-color:var(--accent,#171717);color:#ffffff}
.film-rating-scale{display:flex;justify-content:space-between;font:8px var(--mono,'IBM Plex Mono',monospace);color:#a8a8a8;margin-top:6px}
.film-editor{position:absolute;inset:0;background:var(--paper,#f7f7f7);padding:22px;opacity:0;transform:translateX(25px);pointer-events:none;transition:opacity .25s,transform .4s cubic-bezier(.2,.7,.3,1);z-index:4}
.is-editing .film-editor{opacity:1;transform:translateX(0)}
.film-editor-header{display:flex;justify-content:space-between;align-items:center;color:#8f8f8f;font:8px/1.4 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.9px}
.film-editor-header>span:last-child{font:20px/12px var(--font,Inter,sans-serif);letter-spacing:0}
.film-editor h3{font:500 21px/1.2 var(--font,Inter,sans-serif);letter-spacing:-.65px;margin:16px 0 16px}
.film-types{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:17px}
.film-types>span{display:grid;place-items:center;height:28px;border:1px solid var(--line,#dedede);font:9px var(--mono,'IBM Plex Mono',monospace);color:#979797;transition:background .2s,border-color .2s,color .2s}
.film-types>span.is-selected{border-color:#bbbbbb;background:#eeeeee;color:var(--accent,#171717)}
.film-editor-label{display:block;font:9px var(--mono,'IBM Plex Mono',monospace);color:#8d8d8d;margin:0 0 7px}
.film-name-input{height:33px;display:flex;align-items:center;border-bottom:1px solid var(--line,#dedede);font:13px var(--font,Inter,sans-serif);margin-bottom:15px;transition:border-color .2s}
.film-name-input.is-active{border-color:var(--accent,#171717)}
.film-choice-editor{opacity:.35;transition:opacity .2s}
.is-choosing .film-choice-editor{opacity:1}
.film-choice-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.film-choice-fields>span{display:flex;align-items:center;height:31px;padding:0 9px;border:1px solid var(--line,#dedede);font:10px var(--font,Inter,sans-serif);color:#b3b3b3;min-width:0;transition:border-color .2s,color .2s}
.film-choice-fields.has-choices>span{color:#3d3d3d}
.film-choice-fields>span.is-active{border-color:var(--accent,#171717);color:#3d3d3d}
.film-add-score{display:flex;align-items:center;gap:6px;font:9px var(--mono,'IBM Plex Mono',monospace);color:#989898;margin-top:15px;transition:color .2s}
.film-add-score>i{font:14px var(--font,Inter,sans-serif);font-style:normal}
.film-add-score.is-selected{color:var(--accent,#171717)}
.film-apply{left:22px;right:22px;bottom:26px;height:40px}
.film-cursor{position:absolute;top:0;left:0;z-index:5;width:0;height:0;pointer-events:none;will-change:transform;transition:opacity .3s}
.film-cursor:before{content:'';position:absolute;left:-5px;top:-5px;width:10px;height:10px;border:1px solid #777777;border-radius:50%;background:#ffffffbb;transition:transform .1s,background .1s}
.film-cursor.is-pressing:before{transform:scale(.7);background:#777777}
.film-cursor>i{position:absolute;left:-15px;top:-15px;display:block;width:30px;height:30px;border:1px solid #777777;border-radius:50%;transform:scale(var(--click-scale,.25));opacity:var(--click-opacity,0)}
.film-cursor.is-finished{opacity:0}
.film-caption{display:flex;align-items:baseline;gap:9px;max-width:272px;margin:17px auto 6px;min-height:18px}
.film-chapter-count{font:7px/1.4 var(--mono,'IBM Plex Mono',monospace);letter-spacing:.4px;color:#9c9c9c;flex-shrink:0}
.film-caption p{font:10px/1.4 var(--font,Inter,sans-serif);color:#666666;margin:0}
.film-controls{display:flex;align-items:center;gap:11px;max-width:272px;margin-inline:auto}
.film-play,.film-replay{width:24px;height:40px;padding:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#666666;border:0;background:none;cursor:pointer}
.film-play svg{width:13px;height:13px;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.film-pause-icon{display:none}.film-is-playing .film-pause-icon{display:block}.film-is-playing .film-play-icon{display:none}
.film-replay{width:44px;font:9px/1.4 var(--mono,'IBM Plex Mono',monospace)}
.film-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;min-width:0}
.film-chapters button{padding:5px 0;color:#9d9d9d;font:9px/1.4 var(--mono,'IBM Plex Mono',monospace);text-align:left;min-height:40px;white-space:nowrap;border:0;background:none;cursor:pointer}
.film-chapters button>span{display:block;position:relative;height:1px;background:#dadada;margin-bottom:7px;overflow:hidden}
.film-chapters button i{position:absolute;inset:0;background:var(--accent,#171717);transform:scaleX(var(--film-progress,0));transform-origin:left}
.film-chapters button.is-current{color:var(--accent,#171717)}
.film-chapters button:hover,.film-play:hover,.film-replay:hover{color:var(--ink,#171717)}
.film-try{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;max-width:272px;font:9px var(--mono,'IBM Plex Mono',monospace);color:#666666;min-height:30px;padding:7px;margin:5px auto 0;border:0;background:none;cursor:pointer}
.film-try:hover{color:var(--accent,#171717)}
@media(max-width:480px){.film-card{padding:18px;height:430px}.film-input-views{left:18px;right:18px;top:116px}.film-title{font-size:22px}.film-note-value{font-size:23px;max-width:280px}.film-note-placeholder{font-size:18px}.film-save{left:18px;right:18px;bottom:26px;height:40px}.film-editor{padding:20px 18px}.film-editor h3{font-size:20px;margin:15px 0}.film-apply{left:18px;right:18px;bottom:26px}.film-types{gap:5px;margin-bottom:15px}.film-types>span{font-size:8px}.film-caption{gap:7px}.film-caption p{font-size:9px}.film-chapter-count{font-size:6px}.film-chapters{gap:7px}.film-chapters button{font-size:9px}.film-controls{gap:7px}.film-view-hint{font-size:8px}.film-menu{left:14px;right:14px;top:84px}.film-try{font-size:8px}}
@media(prefers-reduced-motion:reduce){.film-card *{transition:none!important;animation:none!important}.film-cursor{display:none}}