:root{--collision:#e43166;--acid:#b9d34a}
.feature-page{padding:23px 22px 34px;min-height:calc(100svh - var(--nav-height));overflow:hidden;position:relative;isolation:isolate}
.feature-page:before{content:'';position:absolute;right:-65px;top:96px;width:165px;height:215px;border:.6px solid var(--guide);border-left-color:transparent;border-radius:50%;z-index:-1}
.feature-header{border-top:.7px solid var(--ink);padding-top:13px}
.feature-header .feature-topline{display:flex;justify-content:space-between;align-items:center;font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));letter-spacing:.1em}
.feature-topline button{font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));padding:8px 0}
.feature-header h1{font-size:max(8px, round(nearest, calc((34px) * var(--type-scale, 1)), 4px));line-height:1.05;font-weight:400;letter-spacing:-.03em;margin:24px 0 8px}
.feature-header h1 span{display:block}
.feature-header>p{font-size:max(8px, round(nearest, calc((15px) * var(--type-scale, 1)), 4px));letter-spacing:.07em}
.feature-subtitle{font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));line-height:1.8;color:#697262;margin:18px 0 22px}
.feature-label{font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));letter-spacing:.11em;color:#707967}
.feature-button{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));padding:11px 0;color:var(--blue);text-align:left}
.feature-field{border:0;border-bottom:.7px solid var(--frame);border-radius:0;background:transparent;padding:11px 0;font-size:max(8px, round(nearest, calc((14px) * var(--type-scale, 1)), 4px));line-height:1.6;width:100%;caret-color:var(--blue)}
.feature-field::placeholder{color:#737b6a}
.feature-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:12px 0}
.feature-status{font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));color:#65725b;line-height:1.8;min-height:18px}
.feature-empty{border-left:.7px solid var(--guide);padding:18px 20px;margin:28px 0;font-size:max(8px, round(nearest, calc((14px) * var(--type-scale, 1)), 4px));line-height:1.8;max-width:28ch}
.feature-empty small{display:block;font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));letter-spacing:.04em;margin-top:12px;color:#737c68}
.music-disc-stage{position:relative;height:243px;margin:5px 0 8px}
.music-disc-stage svg{width:100%;height:100%;overflow:visible}
.music-disc{transform-origin:165px 123px}
.music-track-title{font-size:max(8px, round(nearest, calc((22px) * var(--type-scale, 1)), 4px));font-weight:400;margin-top:4px}
.music-track-sub{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));color:#697460;margin-top:6px}
.music-progress{margin:20px 0 0;width:100%;height:14px;accent-color:var(--blue)}
.music-times{display:flex;justify-content:space-between;font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));color:#6c7863;margin-top:2px;font-variant-numeric:tabular-nums}
.music-controls{display:flex;justify-content:center;gap:32px;align-items:center;margin:17px 0 20px}
.music-controls button{width:42px;height:42px;padding:10px;display:grid;place-items:center}
.music-controls svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.2}
.music-controls .music-play{width:55px;height:55px;border-radius:50%;border:.7px solid var(--blue);color:var(--blue)}
.music-play svg{stroke:var(--blue)}
.volume-row{display:flex;align-items:center;gap:17px;font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));margin-bottom:20px}
.volume-row input{width:110px;height:14px;accent-color:var(--collision)}
.music-import{border-top:.7px solid var(--guide);padding-top:16px;display:flex;justify-content:space-between;align-items:center;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}
.music-import label{cursor:pointer;color:var(--blue);padding:10px 0}
.music-import small{font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));color:#727c66}
.memory-tools{display:flex;gap:15px;align-items:center;margin-bottom:20px}
.memory-tools input{flex:1;min-width:0;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}
.memory-tools button{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));white-space:nowrap;color:var(--blue);padding:10px 0}
.memory-form{border:.7px dashed var(--guide);padding:16px;margin-bottom:24px}
.memory-form label{display:block;font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));margin-top:8px}
.memory-form textarea{border:0;border-bottom:.7px solid var(--frame);padding:10px 0;min-height:75px}
.memory-list{position:relative;padding-left:17px;border-left:.7px solid var(--guide)}
.memory-card{position:relative;border-top:.7px solid var(--guide);padding:17px 0 21px;margin-bottom:10px}
.memory-card:before{content:'';position:absolute;left:-20px;top:18px;width:5px;height:5px;background:var(--blue);border-radius:50%}
.memory-card.pinned:before{background:var(--collision)}
.memory-card time{font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));color:#6a7861}
.memory-card h2{font-size:max(8px, round(nearest, calc((19px) * var(--type-scale, 1)), 4px));font-weight:400;line-height:1.3;margin:9px 0}
.memory-card p{font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px));line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.memory-card footer{display:flex;gap:18px;margin-top:12px}
.memory-card button{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));color:#69785e;padding:6px 0}
.memory-card.pinned h2{color:var(--blue)}
.memory-undo{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));color:var(--blue);padding:12px 0}
.album-toolbar{display:flex;justify-content:space-between;align-items:center;font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));border-bottom:.7px solid var(--guide);padding-bottom:12px;margin-bottom:22px}
.album-toolbar label{cursor:pointer;color:var(--blue);padding:8px 0;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}
.album-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px 17px;align-items:start}
.album-item{position:relative;padding:0;text-align:left;min-width:0}
.album-item:nth-child(2n){margin-top:30px}
.album-item img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;background:#e7e9e3}
.album-item:nth-child(3n) img{aspect-ratio:1}
.album-item:before{content:'';position:absolute;left:-5px;top:-5px;width:17px;height:17px;border-top:.7px solid var(--blue);border-left:.7px solid var(--blue)}
.album-item span{display:block;font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));line-height:1.4;margin-top:7px;overflow-wrap:anywhere}
.album-item time{font-size:max(8px, round(nearest, calc((8px) * var(--type-scale, 1)), 4px));color:#738269}
.album-empty-art{width:190px;height:200px;position:relative;margin:18px auto 12px}
.album-empty-art:before{content:'';position:absolute;left:12px;top:27px;width:119px;height:145px;border:.7px dashed var(--frame);transform:rotate(-7deg)}
.album-empty-art:after{content:'';position:absolute;left:59px;top:10px;width:119px;height:145px;border:.7px solid var(--blue);border-bottom:2px solid var(--acid);transform:rotate(8deg)}
.photo-dialog{width:min(540px,calc(100% - 24px));padding:18px;max-height:calc(100svh - 20px);overflow:auto}
.photo-dialog-top{display:flex;justify-content:space-between;align-items:center;font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));margin-bottom:14px}
.photo-dialog-top button{padding:8px;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}
.photo-stage{width:100%;max-height:55svh;object-fit:contain;display:block;background:#e8eae5}
.photo-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.photo-navigation button{padding:12px 0;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));color:var(--blue)}
.photo-caption-form label{display:block;font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));margin-top:12px}
.photo-caption-form input{font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px))}
.letter-intro{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-top:.7px solid var(--guide);margin:12px 0 16px}
.letter-intro span{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));letter-spacing:.08em;color:#6a795f}
.letter-intro button{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));color:var(--blue);padding:9px 0}
.letter-form{position:relative;padding:20px 15px 16px 18px;border-left:.7px solid var(--frame);border-bottom:.7px solid var(--frame);margin-bottom:32px}
.letter-form:before{content:'';position:absolute;right:0;top:0;width:31px;height:31px;border-top:.7px solid var(--blue);border-right:.7px solid var(--blue)}
.letter-to{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));margin-bottom:15px;color:#5e6d55}
.letter-form textarea{width:100%;min-height:210px;border:0;background:transparent;resize:vertical;padding:0;line-height:2;font-size:max(8px, round(nearest, calc((14px) * var(--type-scale, 1)), 4px));caret-color:var(--blue)}
.letter-form textarea:focus{outline-offset:7px}
.letter-form input{border:0;border-bottom:.7px dashed var(--guide);background:transparent;padding:7px 0;margin-bottom:18px;font:inherit;font-size:max(8px, round(nearest, calc((17px) * var(--type-scale, 1)), 4px));width:100%}
.letter-stamp{display:flex;align-items:center;justify-content:space-between;font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));border-top:.7px solid var(--guide);padding-top:13px;margin-top:15px}
.letter-stamp button{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));color:var(--blue);padding:9px 0}
.letter-list{border-top:.7px solid var(--guide)}
.sealed-letter{display:block;width:100%;padding:18px 16px 18px 0;text-align:left;position:relative;border-bottom:.7px solid var(--guide)}
.sealed-letter:after{content:'';position:absolute;right:5px;top:25px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.sealed-letter:nth-child(2n):after{background:var(--collision)}
.sealed-letter strong{display:block;font-size:max(8px, round(nearest, calc((16px) * var(--type-scale, 1)), 4px));font-weight:400;margin-bottom:7px}
.sealed-letter span{font-size:max(8px, round(nearest, calc((9px) * var(--type-scale, 1)), 4px));color:#738167}
.letter-read-dialog{padding:32px 25px;max-height:85svh;overflow:auto}
.letter-read-dialog h2{font-size:max(8px, round(nearest, calc((24px) * var(--type-scale, 1)), 4px));font-weight:400;margin-bottom:18px}
.letter-read-dialog .letter-read-body{font-size:max(8px, round(nearest, calc((15px) * var(--type-scale, 1)), 4px));line-height:2.1;white-space:pre-wrap;overflow-wrap:anywhere}
.feature-transition{position:fixed;inset:0;z-index:900;pointer-events:none;overflow:hidden}
.feature-transition svg{position:absolute;inset:0;width:100%;height:100%}
.flight-bird{position:absolute;width:44px;height:35px;left:-60px;top:0;filter:saturate(1.3)}
.flight-bird svg{width:100%;height:100%}
.transition-paper{position:absolute;inset:0;background:var(--paper);opacity:0}
.weave-lines path{fill:none;stroke:#aeb8c0;stroke-width:.8}
.weave-lines path:nth-child(4n){stroke:var(--blue)}
.frame-transition rect{fill:none;stroke:var(--blue);stroke-width:.8}
.paper-turn{position:absolute;inset:0;background:var(--paper);transform-origin:0 50%;border-right:.8px solid var(--blue);backface-visibility:hidden}
.paper-turn:after{content:'';position:absolute;right:12px;top:25%;height:50%;border-right:1px solid var(--collision)}
.within-pigment{position:absolute;left:8%;top:8%;width:78%;height:84%;z-index:5;pointer-events:none;clip-path:url(#reveal-back);opacity:.8}
.within-pigment svg{width:100%;height:100%;display:block}
.gsap-motion .back-edge-layer{stroke:var(--collision);opacity:.55}
@media(min-width:700px){.feature-page{min-height:calc(100svh - 90px)}}
@media(max-width:350px){.feature-page{padding-left:19px;padding-right:19px}.feature-header h1{font-size:max(8px, round(nearest, calc((31px) * var(--type-scale, 1)), 4px))}.music-disc-stage{height:215px}}

/* 03 进相册：蓝潮涨满再退（后一层浅、先到，前一层克莱因蓝） */
.tide{position:absolute;left:0;right:0;top:0;height:100%;will-change:transform}
.tide-wave{position:absolute;left:0;top:-38px;width:200%;height:40px;display:block}
.tide-body{position:absolute;inset:0}
.tide-back .tide-wave path{fill:#8fa3f0}.tide-back .tide-body{background:#8fa3f0}
.tide-front .tide-wave path{fill:var(--blue)}.tide-front .tide-body{background:var(--blue)}
.tide-front .tide-wave{top:-30px;height:32px;transform:translateX(-12%)}
/* 04 进未寄信：拉链 */
.zip-half{position:absolute;inset:0;background:var(--paper);will-change:clip-path,transform}
.zip-l{background:linear-gradient(90deg,transparent calc(50% - 7px),var(--blue) calc(50% - 7px) calc(50% - 6px),transparent calc(50% - 6px)),repeating-linear-gradient(180deg,transparent 0 5px,var(--ink,#242522) 5px 8px) calc(50% - 5px) 0/5px 100% no-repeat,var(--paper)}
.zip-r{background:linear-gradient(90deg,transparent calc(50% + 6px),var(--blue) calc(50% + 6px) calc(50% + 7px),transparent calc(50% + 7px)),repeating-linear-gradient(180deg,transparent 0 1px,var(--ink,#242522) 1px 4px,transparent 4px 8px) 50% 0/5px 100% no-repeat,var(--paper)}
.zip-edge path{fill:none;stroke:var(--blue);stroke-width:.35;vector-effect:non-scaling-stroke}
.zip-edge{position:absolute;inset:0;width:100%;height:100%}
.zip-pull{position:absolute;left:calc(50% - 5px);top:-9px;width:10px;height:18px;border-radius:5px;background:var(--blue);box-shadow:0 0 0 .8px var(--paper),0 2px 6px rgba(0,47,167,.35)}
.zip-pull:after{content:'';position:absolute;left:3px;top:14px;width:4px;height:12px;border:1px solid var(--blue);border-radius:0 0 3px 3px}