/* Issue01 · low-fi motion tuning frame (980×666 canvas, scaled to fit by lofi.js) */
.m-lofi{position:relative;background:#103228;overflow:hidden}
.lf-canvas{position:absolute;left:0;top:0;width:980px;height:666px;transform-origin:0 0;font-family:"Figtree",system-ui,sans-serif}
.lf-cap{position:absolute;left:72px;top:129px;margin:0;font:600 17px/1.45 "Figtree",system-ui,sans-serif;color:#F9F9F7}
.lf-hint{position:absolute;left:72px;top:566px;margin:0;font:500 12px/1.4 "Figtree",system-ui,sans-serif;color:rgba(249,249,247,.55)}
.lf-card{z-index:10;touch-action:pan-y;position:absolute;left:70px;top:168px;width:319px;transform:scale(1.2);transform-origin:0 0;border-radius:20px;background:#FAFAF8;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:14px 16px 14px;overflow:hidden;color:#17201C}
.lf-hd{display:flex;align-items:center;gap:6px;height:26px}
.lf-hd b{flex:1;font-size:13px;font-weight:700}
.lf-btn{font:600 10.5px "Figtree",sans-serif;border:1px solid rgba(23,32,28,.18);background:#fff;border-radius:999px;padding:5px 10px;cursor:pointer;color:#17201C}
.lf-btn:hover{background:#EEF1EE}
.lf-sc{overflow:visible}
.lf-sc::-webkit-scrollbar{display:none}
.lf-sc h5{margin:10px 0 4px;font-size:9.5px;letter-spacing:.1em;font-weight:700;color:#8A948E;text-transform:uppercase}
.lf-sc .tg{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.lf-sc label{display:block;font-size:11px;font-weight:500;color:#2A332E;padding:4px 6px;margin:0 -6px;border-radius:8px;transition:background .3s}
.lf-sc label.on{background:#E3EAE5}
.lf-sc label span{display:flex;justify-content:space-between;margin-bottom:3px}
.lf-sc label i{font-style:normal;color:#8A948E;font-variant-numeric:tabular-nums}
.lf-sc label.on i{color:#0F3A30;font-weight:700}
.lf-sc input[type=range]{position:relative;z-index:1;touch-action:none;width:100%;height:16px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.lf-sc input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#D3D9D5}
.lf-sc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:#0F3A30;border:2px solid #FAFAF8;box-shadow:0 0 0 1px #0F3A30}
.lf-sc input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:#D3D9D5}
.lf-sc input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#0F3A30;border:2px solid #FAFAF8}
.lf-sc .sw{position:relative;width:34px;height:20px;margin:1px 0 0;appearance:none;-webkit-appearance:none;background:#D3D9D5;border-radius:10px;cursor:pointer;transition:background .2s;display:block}
.lf-sc .sw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.lf-sc .sw:checked{background:#0F3A30}.lf-sc .sw:checked::after{transform:translateX(14px)}
.lf-fade{position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(transparent,#FAFAF8 70%);pointer-events:none}

.m-lofi.mob .lf-card, .m-lofi.mob .lf-cap, .m-lofi.mob .lf-hint{ display:none; }

/* wireframe phone: page greys only, no images */
.lf-phone{position:absolute;left:523px;top:37px;width:390px;height:700px;border-radius:44px 44px 0 0;background:#E6E9E5;overflow:hidden;box-shadow:0 0 0 10px #0B241D}
.lf-sb{position:absolute;left:0;right:0;top:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:6px 32px 0 40px;font:600 15px "Figtree",sans-serif;color:#5E6661}
.lf-ic{display:flex;gap:5px}.lf-ic i{width:16px;height:9px;border-radius:3px;background:#B9C0BA}
.lf-top{position:absolute;left:24px;right:24px;top:58px;display:flex;justify-content:space-between;font:600 14px "Figtree",sans-serif;color:#6E7570}
.lf-orb{position:absolute;left:0;top:96px;width:390px;height:400px;touch-action:pan-y}
.lf-orb.grab{cursor:grab}.lf-orb.grab:active{cursor:grabbing}
.lf-tile{position:absolute;left:50%;top:50%;width:66px;height:84px;margin:-42px 0 0 -33px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(40,45,42,.08),0 4px 14px rgba(40,45,42,.07);padding:9px 8px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;overflow:hidden;pointer-events:none}
.lf-tile.alt{background:#D9DED8}
.lf-tile i{display:block;height:5px;border-radius:3px;background:#C9CFC8}.lf-tile i.s{width:55%}
.lf-tile.alt i{background:#BFC6BF}
.lf-tile.h{justify-content:space-between}
.lf-tile em{font:600 10.5px/1.2 "Instrument Sans",system-ui,sans-serif;font-style:normal;color:#4E5651;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.lf-tile small{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#8A928C}
.lf-sheet{position:absolute;left:0;right:0;top:503px;height:400px;background:#fff;border-radius:28px 28px 0 0;padding:24px 24px 0;z-index:300}
.lf-grab{position:absolute;left:50%;top:12px;width:38px;height:5px;margin-left:-19px;border-radius:4px;background:#E2E5E1}
.lf-date{display:block;font-size:12px;color:#8A928C;margin-top:6px}
.lf-iss{display:block;font-size:14px;color:#4E5651}
.lf-tabs{display:flex;gap:26px;margin-top:22px;font:600 22px/1.3 "Figtree",sans-serif;color:#B4BAB5;white-space:nowrap}
.lf-tabs .on{color:#4E5651;box-shadow:0 2px 0 #4E5651}
.lf-th{margin-top:18px;background:#E6E9E5;border-radius:12px;padding:12px;font-size:12px;line-height:1.45;color:#5E6661}
.lf-li{padding:12px 0;border-bottom:1px solid #E6E9E5}.lf-li small{display:block;font-size:12px;color:#8A928C}.lf-li b{font-size:14px;color:#4E5651}