:root{--font-marker:"Caveat", "Nanum Pen Script", cursive;--font-sans:"Inter", sans-serif;--bg-color-main:#697a87;--text-white:#fff;--text-grey:#e0e0e0;--accent-blue:#1c5276}*{box-sizing:border-box;margin:0;padding:0}body,html{width:100vw;height:100vh;font-family:var(--font-sans);color:var(--text-white);background-color:#3f4e5a;margin:0;overflow:hidden}#root{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.app-container{background:url(/bg.png) 50%/cover no-repeat;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative}.bg-light-beam{pointer-events:none;z-index:0;background:linear-gradient(90deg,#0000 0%,#ffffff14 50%,#0000 100%);width:400px;height:150%;position:absolute;top:-20%;right:20%;transform:rotate(25deg)}.fhd-canvas{z-index:1;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:1920px;height:100%;max-height:1080px;display:flex;position:relative}.frame-marker{border:2px solid #fff6;width:50px;height:50px;position:absolute}.frame-top-left{border-bottom:none;border-right:none;top:15px;left:15px}.frame-top-right{border-bottom:none;border-left:none;top:15px;right:15px}.frame-bot-left{border-top:none;border-right:none;bottom:15px;left:15px}.frame-bot-right{border-top:none;border-left:none;bottom:15px;right:15px}.rec-indicator{letter-spacing:2px;align-items:center;gap:12px;font-size:18px;font-weight:500;display:flex;position:absolute;top:25px;left:35px}.rec-dot{background-color:#f33;border-radius:50%;width:14px;height:14px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.2}}.title{font-family:var(--font-marker);letter-spacing:4px;color:#fff;text-shadow:2px 4px 15px #0006;z-index:2;font-size:90px}.vhs-wrapper{z-index:2;background:url(/tape.png) 50%/cover no-repeat;width:1000px;height:550px;margin-bottom:60px;position:relative}.vhs-bg-stroke{background:var(--accent-blue);z-index:1;opacity:.9;border-radius:10px;height:120%;position:absolute;top:-20px;left:-50px;right:-50px;transform:rotate(-3deg)}.vhs-tape{z-index:2;background-color:#242931;border:1px solid #1a1e24;border-radius:8px;flex-direction:column;width:800px;height:420px;padding:25px;display:flex;position:relative;box-shadow:15px 25px 40px #0009}.vhs-inner-top,.vhs-inner-bot{color:#d1dfeb;text-align:center;font-family:var(--font-marker);letter-spacing:1px;background-color:#1a496b;border-radius:4px;padding:10px;font-size:20px}.vhs-inner-bot{font-size:18px}.vhs-inner-center{flex:1;justify-content:space-between;align-items:center;padding:0 20px;display:flex}.vhs-reel{background-color:#121417;border:8px solid #333842;border-radius:50%;width:160px;height:160px;position:relative}.vhs-reel:after{content:"";background-color:#aaa;border-radius:50%;width:45px;height:45px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vhs-text{text-align:center;width:340px;font-family:var(--font-marker);color:#ccc;background:#0003;border:1px solid #ffffff0d;border-radius:8px;padding:10px;font-size:26px;line-height:1.4}.nav-container{z-index:10;gap:80px;display:flex}.nav-item{font-family:var(--font-marker);cursor:pointer;color:#fff;font-size:40px;transition:color .3s;position:relative}.nav-item:hover{color:#ffffffb3}.footer{text-align:center;color:var(--text-grey);z-index:2;margin-top:50px;font-size:16px;line-height:1.6}.timecode-wrapper{font-family:var(--font-sans);letter-spacing:1px;color:#fff;z-index:2;align-items:center;gap:20px;font-size:16px;display:flex;position:absolute;bottom:50px}.timecode-dashes{border-bottom:2px dotted #ffffff80;width:100px}@media (width<=1200px){.vhs-wrapper{width:800px;height:440px}}@media (width<=1024px){.title{font-size:70px}.vhs-wrapper{width:700px;height:385px}.nav-container{gap:40px}.nav-item{font-size:32px}.footer{padding:0 20px;font-size:14px}}@media (width<=768px){.app-container{min-height:100vh;padding:20px 0;overflow-x:auto}.fhd-canvas{justify-content:flex-start;height:auto}.title{margin-top:40px;margin-bottom:20px;font-size:46px}.vhs-wrapper{width:90vw;height:50vw;margin-bottom:20px}.nav-container{flex-direction:column;gap:20px}.nav-item{font-size:26px}.rec-indicator{font-size:14px;top:15px;left:20px}.timecode-wrapper{margin-top:30px;position:relative;bottom:auto}.frame-marker{display:none}.footer{margin-top:20px;padding:0 15px}}.layer-popup-container{z-index:50;color:#111;pointer-events:auto;background:url(/layer_bg.png) 50%/100% 100% no-repeat;flex-direction:column;width:320px;height:420px;padding:30px 25px;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards popup-enter;display:flex;position:absolute;top:-420px;left:50%;transform:translate(-50%)rotate(-2deg)}@keyframes popup-enter{0%{opacity:0;transform:translate(-50%)translateY(20px)rotate(-2deg)}to{opacity:1;transform:translate(-50%)translateY(0)rotate(-2deg)}}.popup-close{font-size:20px;font-family:var(--font-sans);cursor:pointer;color:#000;font-weight:700;position:absolute;top:23px;right:25px}.popup-title{font-family:var(--font-marker);text-align:center;color:#000;text-shadow:0 1px 1px #0000001a;margin-top:40px;margin-bottom:25px;font-size:34px;line-height:1.3}.popup-list{font-family:var(--font-sans);flex-direction:column;margin-top:28px;font-size:15px;display:flex}.popup-item{color:#111;letter-spacing:-.5px;padding:6px 5px;font-weight:600}@media (width<=768px){.layer-popup-container{z-index:1000;width:280px;height:360px;padding:15px 20px;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards popup-enter-mobile;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-2deg)}.popup-title{margin-top:40px;margin-bottom:30px;font-size:26px}.popup-list{margin-top:30px}.popup-item{padding:5px;font-size:13px}.popup-close{top:18px;right:20px}@keyframes popup-enter-mobile{0%{opacity:0;transform:translate(-50%,calc(20px - 50%))rotate(-2deg)}to{opacity:1;transform:translate(-50%,-50%)rotate(-2deg)}}}