/* An editable, self-contained memory scene for the Everafter template. */
.memory-reel{position:relative;isolation:isolate;width:100%;padding:82px 0 95px;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#e6d4b855 0,transparent 62%);border-top:1px solid #c8cbb970;--reel-ink:#4b3b2d;--reel-rust:#994631;--spool-turn:0deg}
.memory-reel-copy{text-align:center;position:relative;padding-inline:24px;margin:auto;max-width:680px}
.memory-reel-copy .eyebrow{color:var(--reel-rust);margin-bottom:20px;font-size:11px;font-weight:700}
.memory-reel-copy h2{font-weight:600;font-size:clamp(48px,5.5vw,76px);line-height:1.02;color:#39422f;text-shadow:0 2px 0 #fff8;letter-spacing:-.04em}
.memory-reel-copy h2 em{color:var(--reel-rust);font-weight:500}
.memory-reel-copy>p:last-child{font-size:16px;line-height:1.75;color:#526044;margin-top:23px;font-weight:500}
.memory-machine{width:min(560px,calc(100% - 68px));margin:47px auto 0;position:relative;perspective:1000px;z-index:2}
.memory-machine-note{display:block;text-align:center;color:var(--reel-rust);font-size:29px;font-weight:600;transform:rotate(-4deg);margin-bottom:22px}
.memory-cassette{position:relative;background:linear-gradient(118deg,#fff7e8ce 0%,#e7d0abbd 29%,#fbedd3dd 49%,#b99c77a8 100%);border:2px solid #9a7b5399;border-radius:16px 16px 21px 21px;box-shadow:inset 0 1px 2px #fff,inset 0 0 0 5px #fdf2d985,inset 0 -8px 12px #8b674523,0 19px 30px -17px #765a3b86,0 3px 0 #ae9170;transform:rotate(-3deg);padding:20px 26px 17px;overflow:hidden}
.memory-cassette:after{content:'';position:absolute;inset:2px;border-radius:inherit;background:linear-gradient(125deg,transparent 18%,#fff9df48 18.3%,transparent 35%,#fff8df55 36%,transparent 53%);pointer-events:none}
.cassette-screw{position:absolute;width:8px;height:8px;border-radius:50%;background:linear-gradient(125deg,#68503b,#efdab5 46%,#a78b69 53%,#564834);box-shadow:inset 0 0 0 1px #8b7457,0 1px 0 #fff9;z-index:2}
.cassette-screw:after{content:'';position:absolute;inset:3px 1px;background:#65523b;transform:rotate(-25deg)}
.screw-tl{top:9px;left:9px}.screw-tr{top:9px;right:9px}.screw-bl{bottom:10px;left:11px}.screw-br{bottom:10px;right:11px}
.cassette-label{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1;padding:6px 7px 13px;border-bottom:3px solid #a34e37;color:var(--reel-ink)}
.cassette-label>span:first-child{font-size:10px;font-weight:700;letter-spacing:.13em;border:1px solid #a9896588;border-radius:3px;padding:4px 6px;white-space:nowrap}
.cassette-label>.hand{font-size:35px;color:#933d2a;font-weight:600;white-space:nowrap}
.cassette-label>span:last-child{max-width:72px;font-size:8px;line-height:1.55;letter-spacing:.13em;text-align:right;font-weight:700}
.cassette-window{margin:16px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 18px;border-radius:12px;background:linear-gradient(135deg,#917248b0,#342b249c 59%,#685339c9);border:1px solid #8f724e;box-shadow:inset 0 3px 10px #31201460,0 1px 0 #fff9;position:relative}
.cassette-spool{position:relative;flex:0 0 112px;aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 2px 2px #0003)}
.spool-tape{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#594031 0px,#594031 1px,#79604b 1.7px,#3c3027 2.6px);border:2px solid #bdab86;box-shadow:0 0 0 3px #f4dfb04d,inset 0 0 0 6px #251e18}
.spool-right .spool-tape{inset:7px;box-shadow:0 0 0 9px #e3c79122,inset 0 0 0 4px #251e18}
.spool-wheel{position:absolute;inset:23%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ebe0c0 0deg 22deg,#81704f 24deg 40deg,#f8efd4 41deg 60deg);box-shadow:0 0 0 2px #a78a64,inset 0 0 0 3px #e8ddbf;transform:rotate(var(--spool-turn))}
.spool-hub{position:absolute;inset:39%;border-radius:50%;background:#392c21;border:4px solid #bea888;box-shadow:0 0 0 1px #f4e3c4,inset 0 1px 4px #000a}
.cassette-middle{text-align:center;min-width:0;color:#f8efd5;display:flex;flex-direction:column;align-items:center;font-size:9px;letter-spacing:.035em;line-height:1.5;text-shadow:0 1px 2px #3b2d22}
.cassette-heart{font-family:var(--serif);font-size:35px;line-height:1.05;color:#f5d6ab;margin-bottom:6px}
.cassette-meter{display:flex;align-items:flex-end;gap:3px;height:13px;margin-top:9px;opacity:.8}
.cassette-meter i{width:3px;height:5px;background:#e7c19a;border-radius:1px;transform-origin:center bottom;animation:memory-meter 1.3s ease-in-out infinite alternate;animation-play-state:paused}
.cassette-meter i:nth-child(2n){height:11px;animation-delay:-.3s}.cassette-meter i:nth-child(3n){height:8px;animation-delay:-.75s}.cassette-meter i:nth-child(5){height:13px;animation-delay:-1s}
.memory-reel.is-playing .cassette-meter i{animation-play-state:running}
.cassette-foot{display:flex;align-items:center;justify-content:space-between;color:#67492e;font-size:8px;font-weight:700;letter-spacing:.13em;padding-inline:2px}
.cassette-slots{display:flex;align-items:center;gap:20px;position:relative;padding:7px 22px 0;border:1px solid #a7896580;border-bottom:0;border-radius:15px 15px 0 0;transform:translateY(7px)}
.cassette-slots i{width:8px;height:8px;display:block;background:#756247;border-radius:50%;box-shadow:inset 0 2px 2px #3b2a20,0 1px 0 #fff9}.cassette-slots i:nth-child(2){width:25px;height:5px;border-radius:2px}
.memory-loose-tape{width:111%;max-width:none;margin:-3px -5.5% 0;color:#73553b;height:auto;overflow:visible;filter:drop-shadow(0 3px 1px #80654828)}
.memory-film-window{position:relative;width:min(1110px,100%);margin:9px auto 0;padding:7px 0 10px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.memory-film-window.is-dragging{cursor:grabbing}
.memory-film-track{display:flex;align-items:stretch;width:max-content;will-change:transform;transform:translate3d(0,0,0);background:#42352a;box-shadow:0 13px 23px -15px #3d2e2a99}
.memory-film-group{display:flex;flex-shrink:0;gap:18px;padding:23px 9px;position:relative;background:linear-gradient(#fff0,#1b171428)}
.memory-film-group:before,.memory-film-group:after{content:'';position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(to right,transparent 0,transparent 8px,#d6cbb1 8px,#d6cbb1 18px,transparent 18px,transparent 25px);opacity:.85}
.memory-film-group:before{top:7px}.memory-film-group:after{bottom:7px}
.memory-frame{position:relative;width:222px;flex-shrink:0;background:#f3e8d2;border:1px solid #22190fc2;padding:8px 8px 12px;box-shadow:0 2px 3px #150f0d44;color:#563d2b;overflow:hidden}
.memory-frame-count{display:block;font-size:7px;letter-spacing:.1em;font-weight:600;margin-bottom:7px;color:#705940}
.memory-frame>img{width:100%;height:auto;aspect-ratio:1.28;object-fit:cover;pointer-events:none;filter:saturate(.87);border:1px solid #a1856040}
.memory-frame figcaption{font-family:var(--hand);font-size:23px;font-weight:600;line-height:1.12;height:calc(2.24em + 9px);display:flex;align-items:center;justify-content:center;text-align:center;padding-top:9px;overflow:hidden;overflow-wrap:anywhere}
.memory-reel-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:26px auto 0}
.memory-reel-controls button{min-height:44px;background:transparent;border:1px solid #a995785c;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#594832;transition:background .2s,transform .2s}
.memory-reel-controls button:hover{background:#e8dcc2;transform:translateY(-2px)}
.memory-reel-controls button:focus-visible{outline:3px solid var(--reel-rust);outline-offset:5px}
.reel-step{width:44px;border-radius:50%;padding:10px}.reel-step svg{width:19px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.memory-reel-controls .reel-play{border-radius:30px;padding:9px 17px;gap:8px;font-size:12px;font-weight:700;background:#eee6d5}
.reel-play svg{height:19px;width:19px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.reel-play-icon{display:none;fill:currentColor;stroke-width:0!important}.memory-reel.is-paused .reel-pause-icon{display:none}.memory-reel.is-paused .reel-play-icon{display:block}
.memory-reel-footer{text-align:center;margin:23px 24px 0;color:var(--reel-rust);font-size:27px;font-weight:600;transform:rotate(-2deg)}
@keyframes memory-meter{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media(max-width:600px){.memory-reel{padding:63px 0 66px}.memory-reel-copy h2{font-size:49px}.memory-reel-copy>p:last-child{font-size:15px;line-height:1.75;max-width:345px;margin:21px auto 0}.memory-reel-copy>p:last-child br{display:none}.memory-reel-copy .eyebrow{font-size:10px}.memory-machine{width:calc(100% - 55px);margin-top:35px;max-width:420px}.memory-machine-note{font-size:24px;margin-bottom:22px}.memory-cassette{border-radius:12px 12px 17px 17px;padding:15px 14px 13px;border-width:1px;box-shadow:inset 0 1px 2px #fff,inset 0 0 0 4px #fdf2d985,inset 0 -8px 12px #8b674523,0 14px 23px -15px #765a3ba8,0 2px 0 #ae9170}.cassette-label{padding:2px 2px 9px;gap:8px;border-bottom-width:2px}.cassette-label>.hand{font-size:26px}.cassette-label>span:first-child{font-size:7px;padding:3px 4px}.cassette-label>span:last-child{font-size:6px;max-width:46px}.cassette-window{margin:11px 0 11px;padding:12px 10px;gap:9px;border-radius:9px}.cassette-spool{flex-basis:28%;max-width:88px}.cassette-middle{font-size:7px}.cassette-heart{font-size:29px;margin-bottom:3px}.cassette-meter{margin-top:5px;height:10px;gap:2px}.cassette-meter i{width:2px}.cassette-foot{font-size:6px;letter-spacing:.09em}.cassette-slots{padding:5px 14px 0;gap:13px;transform:translateY(5px)}.cassette-slots i{width:6px;height:6px}.cassette-slots i:nth-child(2){width:19px;height:4px}.cassette-screw{width:6px;height:6px}.cassette-screw:after{inset:2px 1px;height:1px}.screw-tl{top:6px;left:6px}.screw-tr{top:6px;right:6px}.screw-bl{bottom:7px;left:7px}.screw-br{bottom:7px;right:7px}.memory-film-window{margin-top:0;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}.memory-frame{width:182px;padding:7px 7px 10px}.memory-film-group{gap:13px;padding-inline:6.5px}.memory-frame-count{font-size:6px}.memory-frame figcaption{font-size:22px}.memory-reel-controls{margin-top:20px;gap:10px}.memory-reel-controls .reel-play{font-size:11px;padding-inline:13px}.memory-reel-footer{font-size:24px;max-width:320px;margin:21px auto 0;padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.cassette-meter i{animation:none!important}.memory-reel-controls button{transition:none}.memory-reel-controls button:hover{transform:none}}