:root{--paper: #efe7d6;--paper-2: #e7ddc8;--card: #fffdf7;--ink: #2b2a28;--ink-soft: #6b675f;--ink-faint: #a39d90;--line: #e7e0cf;--yellow: #ffe27a;--yellow-d: #f4c948;--pink: #f9c0d0;--pink-d: #f08ba8;--mint: #b9e4bf;--mint-d: #84cf90;--blue: #aac4ee;--blue-d: #7da4e3;--purple: #6c4df2;--purple-d: #5739d6;--purple-soft:#efeaff;--hl-emphasis: #ffe27a;--hl-tone: #6c4df2;--hl-keep: #b9e4bf;--red: #e0584b;--radius: 16px;--radius-l: 22px;--shadow-sm: 0 2px 6px rgba(60,50,30,.1);--shadow: 0 10px 24px rgba(60,50,30,.16), 0 2px 6px rgba(60,50,30,.1);--shadow-lg: 0 24px 50px rgba(50,40,20,.22), 0 6px 16px rgba(50,40,20,.12);--sans: "Inter", system-ui, -apple-system, sans-serif;--hand: "Caveat", cursive}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--sans);color:var(--ink);background-color:var(--paper);background-image:radial-gradient(rgba(120,105,75,.12) 1px,transparent 1.4px),radial-gradient(1200px 700px at 80% -10%,rgba(255,255,255,.45),transparent),radial-gradient(1000px 800px at -10% 110%,rgba(180,160,120,.18),transparent);background-size:22px 22px,100% 100%,100% 100%;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}input{font-family:inherit}.hand{font-family:var(--hand)}.muted{color:var(--ink-soft)}.small{font-size:12px}.tilt-l{transform:rotate(-2.2deg)}.tilt-r{transform:rotate(2deg)}.tilt-l2{transform:rotate(-4deg)}.tilt-r2{transform:rotate(4.5deg)}.doodle{font-family:var(--hand);color:var(--purple);font-size:26px;font-weight:700;line-height:1;position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none}.doodle svg{display:block}.pcard{background:var(--card);border-radius:var(--radius-l);box-shadow:var(--shadow);position:relative}.tape{position:absolute;width:84px;height:26px;background:#aac4eeb8;box-shadow:0 2px 5px #00000014;top:-12px;left:50%;margin-left:-42px;transform:rotate(-3deg)}.tape:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 6px,transparent 6px 12px)}.tape.pink{background:#f9c0d0bf}.tape.purple{background:#6c4df273}.pin{position:absolute;top:-14px;left:50%;margin-left:-11px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b69bff,var(--purple) 70%);box-shadow:0 4px 8px #3c287866,inset 0 -2px 3px #00000040;z-index:3}.sticky{position:relative;padding:14px 18px;border-radius:4px 10px 8px 12px;font-family:var(--hand);font-size:22px;font-weight:700;color:#4a4326;background:var(--yellow);box-shadow:var(--shadow-sm),inset 0 -10px 18px #0000000a;line-height:1.1}.sticky:before{content:"";position:absolute;top:-9px;left:50%;margin-left:-26px;width:52px;height:16px;background:#ffffff80;transform:rotate(-4deg);box-shadow:0 1px 3px #00000014}.sticky.pink{background:var(--pink);color:#6b2940}.sticky.mint{background:var(--mint);color:#245a31}.sticky.blue{background:var(--blue);color:#234a82}.sticky.toggle{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .12s}.sticky.toggle:hover{transform:scale(1.04) rotate(-1deg)}.sticky .chk{margin-left:6px}.topbar{display:flex;align-items:center;gap:22px;padding:12px 22px;margin:16px;background:#fffdf7d1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px;box-shadow:var(--shadow-sm);position:relative;z-index:40}.brand{display:flex;flex-direction:column;line-height:.9}.brand .logo{font-family:var(--hand);font-weight:700;font-size:34px;color:var(--ink);letter-spacing:.5px}.brand .logo .spark{color:var(--purple)}.brand .sub{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}.nav{display:flex;align-items:center;gap:6px}.nav a,.navbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;border:none;background:transparent;color:var(--ink-soft);font-size:14px;font-weight:600;text-decoration:none}.nav a:hover,.navbtn:hover{background:#0000000a;color:var(--ink)}.spacer{flex:1}.iconbtn{width:36px;height:36px;border-radius:10px;border:none;background:transparent;color:var(--ink-soft);font-size:16px;display:inline-flex;align-items:center;justify-content:center}.iconbtn:hover{background:#0000000d;color:var(--ink)}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--purple),#9b86ff);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border:2px solid #fff;box-shadow:var(--shadow-sm)}.btn{border:none;border-radius:12px;padding:10px 18px;font-weight:700;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .12s,box-shadow .12s}.btn.primary{background:var(--purple);color:#fff;box-shadow:0 6px 16px #6c4df259}.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px #6c4df273}.btn.primary:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}.btn.ghost{background:#0000000d;color:var(--ink)}.btn.big{padding:14px 26px;font-size:16px;border-radius:14px}.auth-wrap{min-height:100%;display:grid;grid-template-columns:1.1fr 1fr;align-items:center}.auth-side{height:100%;position:relative;overflow:hidden;padding:60px;display:flex;flex-direction:column;justify-content:center}.auth-headline{font-family:var(--hand);font-size:64px;font-weight:700;line-height:.98;max-width:9ch;margin:0 0 12px}.auth-headline em{color:var(--purple);font-style:normal}.auth-sub{font-size:18px;color:var(--ink-soft);max-width:36ch;line-height:1.5}.auth-stickies{position:relative;height:220px;margin-top:36px}.auth-stickies .sticky{position:absolute}.auth-card-area{display:flex;justify-content:center;padding:40px}.auth-card{width:100%;max-width:400px;padding:34px 32px 30px}.auth-card h2{font-family:var(--hand);font-size:40px;margin:0 0 4px}.auth-card .lead{color:var(--ink-soft);margin:0 0 22px;font-size:14px}.field{margin-bottom:14px}.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}.field input{width:100%;padding:12px 14px;border-radius:11px;border:1.5px solid var(--line);background:#fff;font-size:14px;color:var(--ink);transition:border-color .15s,box-shadow .15s}.field input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px #6c4df226}.auth-card .btn.primary{width:100%;justify-content:center;padding:13px;margin-top:6px}.divider{display:flex;align-items:center;gap:12px;color:var(--ink-faint);font-size:12px;margin:18px 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.oauth{width:100%;padding:12px;border-radius:11px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:14px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px}.oauth:hover{background:#faf8f2}.auth-toggle{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-soft)}.auth-toggle button{background:none;border:none;color:var(--purple);font-weight:700}.page{padding:0 16px 40px;position:relative;min-height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:center}.landing{max-width:720px;margin:0 auto;position:relative;text-align:center}.landing h1{font-family:var(--hand);font-size:72px;line-height:.95;margin:18px 0 8px}.landing h1 .u{color:var(--purple)}.landing .tagline{font-size:18px;color:var(--ink-soft);margin:0 auto 30px;max-width:44ch}.dropzone{position:relative;background:var(--card);border-radius:var(--radius-l);box-shadow:var(--shadow);padding:12px}.drop-inner{border:2.5px dashed #d9cfb6;border-radius:16px;padding:64px 24px;transition:background .15s,border-color .15s}.dropzone.drag .drop-inner{border-color:var(--purple);background:var(--purple-soft)}.drop-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:18px;background:var(--purple-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:var(--shadow-sm)}.drop-title{font-size:20px;font-weight:700}.drop-sub{color:var(--ink-soft);margin-top:6px;font-size:14px}.droparea{position:relative;margin-top:30px}.features{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}.feature{background:var(--card);border-radius:14px;box-shadow:var(--shadow-sm);padding:14px 18px;font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px}.feature .ic{font-size:18px}.loading-card{max-width:460px;margin:70px auto 0;text-align:center;padding:40px 36px}.loading-card h3{font-family:var(--hand);font-size:38px;margin:6px 0 4px}.loading-card p{color:var(--ink-soft);margin:0 0 22px;font-size:14px}.spinner{width:54px;height:54px;margin:0 auto 8px;border-radius:50%;border:5px solid var(--purple-soft);border-top-color:var(--purple);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}.bar>i{display:block;height:100%;background:var(--purple);border-radius:99px;transition:width .4s}.editor{position:relative;padding:0 16px 110px}.midcol{display:flex;flex-direction:column;gap:22px}.sticky-row{display:flex;gap:26px;align-items:flex-start;padding:10px 0 0 90px;min-height:64px}.sticky-row .sticky:nth-child(1){transform:rotate(-3deg)}.sticky-row .sticky:nth-child(2){transform:rotate(2deg)}.sticky-row .sticky:nth-child(3){transform:rotate(-1.5deg)}.stage{display:grid;grid-template-columns:56px minmax(300px,360px) 1fr;gap:26px;align-items:start;max-width:1160px;margin:6px auto 0}.toolbar{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--card);border-radius:16px;box-shadow:var(--shadow);position:sticky;top:16px}.tool{width:40px;height:40px;border-radius:11px;border:none;background:transparent;color:var(--ink-soft);font-size:17px;display:flex;align-items:center;justify-content:center}.tool:hover{background:#0000000d;color:var(--ink)}.tool.active{background:var(--purple-soft);color:var(--purple)}.tool.magic{margin-top:6px;background:linear-gradient(135deg,var(--purple),#9b86ff);color:#fff}.tool-sep{height:1px;background:var(--line);margin:4px 2px}.video-card{background:var(--card);border-radius:18px;box-shadow:var(--shadow-lg);padding:16px 16px 14px;position:relative}.video-frame{position:relative;height:430px;aspect-ratio:9 / 16;width:auto;max-width:100%;background:#111;border-radius:12px;overflow:hidden;margin:0 auto;display:flex;align-items:center;justify-content:center}.video-frame video{width:100%;height:100%;object-fit:cover}.cap-overlay{position:absolute;left:0;right:0;bottom:12%;text-align:center;padding:0 18px;pointer-events:none}.controls{display:flex;align-items:center;gap:12px;padding:12px 6px 2px}.play{width:40px;height:40px;border-radius:50%;border:none;background:var(--ink);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.timecode{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.wave{flex:1;height:30px;display:flex;align-items:center;gap:2px;overflow:hidden}.wave i{width:3px;background:var(--purple);border-radius:2px;opacity:.55}.notebook{position:relative;background:var(--card);border-radius:8px 18px 18px 8px;box-shadow:var(--shadow-lg);padding:26px 30px 22px 56px;min-height:540px}.notebook:before{content:"";position:absolute;left:20px;top:26px;bottom:26px;width:14px;background-image:radial-gradient(circle,rgba(0,0,0,.1) 5px,transparent 6px);background-size:14px 38px;background-repeat:repeat-y}.nb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.nb-title{font-family:var(--hand);font-size:36px;font-weight:700;position:relative}.nb-title .spark{color:var(--purple)}.nb-title:after{content:"";position:absolute;left:0;right:30px;bottom:2px;height:3px;background:var(--purple);border-radius:3px;opacity:.8}.editmode{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);font-weight:600}.switch{width:40px;height:22px;border-radius:99px;background:var(--line);position:relative;border:none;transition:background .15s}.switch.on{background:var(--purple)}.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:var(--shadow-sm)}.switch.on i{left:20px}.lines{position:relative}.tline{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid #eee6d2;flex-wrap:wrap}.tstamp{font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums;width:38px;flex-shrink:0;font-weight:600}.tword{font-size:17px;line-height:1.5;color:var(--ink);cursor:pointer;padding:1px 3px;border-radius:5px;transition:background .12s,color .12s;position:relative}.tword:hover{background:#6c4df21a}.tword.removed{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;color:var(--ink-faint)}.tword.mark-emphasis{background:var(--hl-emphasis);border-radius:4px}.tword.mark-keep{background:var(--hl-keep);border-radius:4px}.tword.mark-tone{color:var(--hl-tone);font-weight:700;box-shadow:inset 0 -2px 0 var(--hl-tone)}.nb-legend{display:flex;gap:18px;margin-top:16px;padding-top:12px;border-top:1px dashed #ddd3bb;font-size:13px;color:var(--ink-soft);font-weight:600;flex-wrap:wrap}.nb-legend span{display:inline-flex;align-items:center;gap:6px}.lg-swatch{width:22px;height:14px;border-radius:4px;display:inline-block}.wordmenu{position:absolute;z-index:60;background:var(--ink);color:#fff;border-radius:10px;padding:5px;gap:4px;box-shadow:var(--shadow-lg);left:50%;top:-6px;transform:translate(-50%,-100%);display:none}.tword:hover .wordmenu{display:flex}.wordmenu button{width:26px;height:26px;border-radius:7px;border:none;font-size:12px}.wordmenu .wm-emphasis{background:var(--hl-emphasis)}.wordmenu .wm-tone{background:var(--hl-tone)}.wordmenu .wm-keep{background:var(--hl-keep)}.wordmenu .wm-remove{background:var(--red);color:#fff}.style-stack{display:flex;flex-direction:column;gap:10px}.style-head{font-family:var(--hand);font-size:24px;font-weight:700}.style-row{display:flex;gap:10px}.style-note{position:relative;flex:1;border:none;cursor:pointer;background:var(--card);border-radius:12px;box-shadow:var(--shadow-sm);padding:8px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .12s,box-shadow .12s}.style-note:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.style-note.active{outline:2.5px solid var(--purple);box-shadow:var(--shadow)}.style-prev{width:100%;height:42px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;background:#111;color:#fff}.prev-clean{background:#1d1d1f;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}.prev-bold-pop{background:#1d1d1f;color:#fff;-webkit-text-stroke:2px #000}.prev-karaoke{background:#1d1d1f}.prev-karaoke b{background:var(--mint-d);color:#04130f;padding:0 4px;border-radius:4px}.style-note .nm{font-weight:700;font-size:13px}.cap-clean{color:#fff;font-weight:700;font-size:22px;text-shadow:0 2px 8px rgba(0,0,0,.7)}.cap-bold-pop{color:#fff;font-weight:800;font-size:24px;text-transform:uppercase;-webkit-text-stroke:3px #000;paint-order:stroke fill}.cap-bold-pop em{color:var(--yellow);font-style:normal;-webkit-text-stroke:3px #000}.cap-karaoke{color:#fff;font-weight:800;font-size:23px}.cap-karaoke mark{background:var(--mint-d);color:#04130f;border-radius:6px;padding:0 5px}.editor-actions{margin:34px auto 0;max-width:1160px;display:flex;align-items:center;gap:16px;justify-content:flex-end}.render-opt{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}.render-opt input{width:16px;height:16px;accent-color:var(--purple)}.error{color:var(--red);font-weight:600}.banner.error{max-width:1180px;margin:0 auto 10px;background:#fde8e5;color:#a3392e;border-radius:12px;padding:10px 16px;font-weight:600;font-size:14px}@media(max-width:980px){.auth-wrap{grid-template-columns:1fr}.auth-side{display:none}.stage{grid-template-columns:1fr}.toolbar{flex-direction:row;position:static;overflow-x:auto}}