/* Landing page: product UI, desktop scenes, demo loop, responsive rules. Ported from the Main board. */
.hero-dots{background-image:linear-gradient(oklch(0.915 0.008 275) 1px,transparent 1px),linear-gradient(90deg,oklch(0.915 0.008 275) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 60%,transparent 100%)}
.hero-scene{zoom:.9}
.hint.live{color:oklch(0.55 0.13 275)}
.caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--accent)}
.saved-chip{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;background:oklch(0.22 0.012 275);color:#fff;box-shadow:0 10px 24px -10px rgba(16,18,27,.4);font-family:var(--hand)}
.saved-chip .dot{width:5px;height:5px;border-radius:50%;background:oklch(0.78 0.14 150)}
.saved-chip .label{font-size:12.5px;letter-spacing:.07em}
.saved-chip .sub{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.55)}
.edge-sliver{position:absolute;right:0;width:5px;height:70px;border-radius:4px 0 0 4px;background:var(--accent);opacity:.55}

.dr{display:flex;flex-direction:column;overflow:hidden;background:rgba(253,253,255,.98);border:1px solid rgba(16,18,27,.08);box-shadow:-20px 0 44px -24px rgba(16,18,27,.28);color:oklch(0.26 0.012 275);font-family:var(--hand)}
.dr-head{padding:18px 18px 12px;display:flex;flex-direction:column;gap:14px}
.dr-title{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:700;letter-spacing:.07em;color:oklch(0.22 0.012 275)}
.dr-count{font-family:var(--mono);font-size:10.5px;font-weight:400;color:oklch(0.5 0.014 275)}
.dr-search{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:8px;background:#fff;border:1.5px solid oklch(0.91 0.004 275);color:oklch(0.5 0.014 275);font-size:12.5px;letter-spacing:.075em}
.dr-list{flex:1;min-height:0;overflow:hidden;padding:0 12px 14px;display:flex;flex-direction:column;gap:16px}
.dr-group{display:flex;flex-direction:column;gap:7px}
.dr-day{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:oklch(0.5 0.014 275);padding:0 6px}
.dr-card{padding:11px 12px;border-radius:9px;background:#fff;border:1px solid oklch(0.93 0.004 275);display:flex;flex-direction:column;gap:7px}
.dr-card.hover{border-color:oklch(0.84 0.02 275);box-shadow:0 2px 6px -3px rgba(16,18,27,.1)}
.dr-card-text{font-size:13px;line-height:1.5;letter-spacing:.07em;color:oklch(0.26 0.012 275)}
.meta{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;color:oklch(0.5 0.014 275);min-width:0}
.meta .mdot{width:4px;height:4px;border-radius:50%;background:oklch(0.78 0.02 275);flex:none}
.meta .app{font-weight:600;color:oklch(0.52 0.014 275);flex:none}
.meta .sep{opacity:.6}
.meta .ctx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta .time{margin-left:auto;flex:none}
.dr-foot{border-top:1px solid oklch(0.95 0.003 275);padding:8px 10px;display:flex;align-items:center;justify-content:space-between;font-family:"Noto Sans",system-ui,sans-serif}
.dr-settings{display:flex;align-items:center;gap:7px;height:30px;padding:0 9px;color:oklch(0.5 0.014 275);font-size:12px}
.dr-footnote{font-family:var(--mono);font-size:10px;color:oklch(0.5 0.014 275);padding-right:6px}
.note-head{padding:18px 18px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid oklch(0.95 0.003 275)}
.note-back{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:oklch(0.48 0.012 275);background:oklch(0.96 0.003 275)}
.note-stamp{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:oklch(0.5 0.014 275)}
.note-body{flex:1;min-height:0;padding:18px;display:flex;flex-direction:column;gap:16px}
.note-text{flex:1;font-size:14.5px;line-height:1.5;letter-spacing:.07em;color:oklch(0.22 0.012 275)}
.note-info{display:flex;flex-direction:column;gap:9px;font-size:12px}
.note-row{display:flex;gap:10px}
.note-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:oklch(0.5 0.014 275);width:74px;flex:none;padding-top:2px}
.note-value{color:oklch(0.26 0.012 275);min-width:0;letter-spacing:.07em}
.note-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid oklch(0.95 0.003 275)}
.note-btn{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:6px 9px;border-radius:6px;background:oklch(0.96 0.003 275);color:oklch(0.48 0.012 275);border:1px solid oklch(0.92 0.004 275)}
.note-btn.danger{margin-left:auto;background:transparent;border-color:transparent;color:oklch(0.52 0.12 25)}

/* ---- desktop scenes ---- */
.screen{position:relative;overflow:hidden;border-radius:16px;background:var(--wall);border:1px solid rgba(16,18,27,.08)}
.win{position:absolute;display:flex;flex-direction:column;overflow:hidden;border-radius:9px;background:#fff;border:1px solid rgba(16,18,27,.1);box-shadow:0 18px 40px -22px rgba(25,29,58,.45)}
.win-bar{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 4px 0 12px;background:oklch(0.975 0.003 275);border-bottom:1px solid oklch(0.93 0.004 275);font-size:11px;color:oklch(0.42 0.012 275)}
.win-ctl{display:flex;align-items:center}
.win-ctl span{display:flex;align-items:center;justify-content:center;width:30px;height:24px;color:oklch(0.45 0.012 275)}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.7)}
.taskbar .tb{width:18px;height:18px;border-radius:5px}
.taskbar .clock{position:absolute;right:14px;font-family:var(--mono);font-size:10px;color:oklch(0.38 0.014 275)}
.kcap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:32px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid rgba(16,18,27,.14);border-bottom-width:3px;font-family:var(--mono);font-size:12px;font-weight:600;color:oklch(0.3 0.012 275);box-shadow:0 8px 18px -10px rgba(16,18,27,.5)}
.code-line{white-space:pre;font-family:var(--mono);font-size:12px;line-height:21px;color:oklch(0.32 0.012 275)}
.kw{color:oklch(0.48 0.16 300)}.ty{color:oklch(0.48 0.1 200)}.fn{color:oklch(0.5 0.13 255)}.nm{color:oklch(0.55 0.012 275)}

/* ---- the demo loop (8s) ---- */
.k-ghost{opacity:0}
.k-esc{opacity:0}
.k-chip{opacity:0}
.bar-fill{transform:scaleX(1);transform-origin:left center}
@keyframes sn-wiggle{0%,76%,100%{transform:translateX(0) rotate(0)}79%{transform:translateX(-4px) rotate(-2deg)}82%{transform:translateX(4px) rotate(2deg)}85%{transform:translateX(-3px) rotate(-1deg)}88%{transform:translateX(2px)}91%{transform:translateX(0)}}
@keyframes sn-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes sn-cursor{0%,5%{transform:translateX(0)}7.2%{transform:translateX(-36px)}9.6%{transform:translateX(30px)}12%{transform:translateX(-32px)}14.2%{transform:translateX(26px)}15.6%,100%{transform:translateX(0)}}
@keyframes sn-ghost{0%,5.5%{opacity:0}7%,14%{opacity:1}17%,100%{opacity:0}}
@keyframes sn-pad{0%,16%{opacity:0;transform:scale(.94) translateY(5px)}16.01%{opacity:.72;transform:scale(.94) translateY(5px);animation-timing-function:cubic-bezier(.18,.9,.26,1.08)}18.4%,58%{opacity:1;transform:none}58.01%,100%{opacity:0;transform:none}}
@keyframes sn-hint{0%,21.5%{color:oklch(0.5 0.014 275)}22%,100%{color:oklch(0.55 0.13 275)}}
@keyframes sn-chr{0%,37.5%{opacity:1}38%,100%{opacity:0}}
@keyframes sn-esc{0%,53%{opacity:0;transform:translateY(6px)}54.5%{opacity:1;transform:none}56%{opacity:1;transform:translateY(2px)}57.5%{opacity:1;transform:none}60%,100%{opacity:0;transform:none}}
@keyframes sn-chip{0%,58.1%{opacity:0;transform:translateY(6px)}63.1%,69.4%{opacity:1;transform:none}71%,100%{opacity:0;transform:none}}
@keyframes sn-bar1{0%,5%{transform:scaleX(0);opacity:1}15.6%,76%{transform:scaleX(1);opacity:1}80%,100%{transform:scaleX(1);opacity:0}}
@keyframes sn-bar2{0%,16%{transform:scaleX(0);opacity:1}52%,76%{transform:scaleX(1);opacity:1}80%,100%{transform:scaleX(1);opacity:0}}
@keyframes sn-bar3{0%,54%{transform:scaleX(0);opacity:1}71%,76%{transform:scaleX(1);opacity:1}80%,100%{transform:scaleX(1);opacity:0}}
.motion-on .wiggle{animation:sn-wiggle 4.5s ease-in-out infinite}
.motion-on .caret{animation:sn-caret 1.05s steps(1) infinite}
.motion-on .k-cursor{animation:sn-cursor 8s ease-in-out infinite}
.motion-on .k-ghost{animation:sn-ghost 8s linear infinite}
.motion-on .k-pad{animation:sn-pad 8s linear infinite;transform-origin:top left}
.motion-on .k-hint{animation:sn-hint 8s linear infinite}
.motion-on .chr{animation:sn-chr 8s linear infinite}
.motion-on .k-esc{animation:sn-esc 8s ease-out infinite}
.motion-on .k-chip{animation:sn-chip 8s ease infinite}
.motion-on .k-bar1{animation:sn-bar1 8s linear infinite}
.motion-on .k-bar2{animation:sn-bar2 8s linear infinite}
.motion-on .k-bar3{animation:sn-bar3 8s linear infinite}
@media (prefers-reduced-motion:reduce){.sn *{animation:none !important}}

/* ---- responsive ---- */
@media (max-width:1040px){.hero-grid{grid-template-columns:minmax(0,1fr) !important}.hero-visual{justify-content:flex-start !important}.stage-scene{zoom:.75}}
@media (max-width:800px){.stage-scene{zoom:.6}}
@media (max-width:760px){.wrap{padding-inline:20px}.nav-links{display:none !important}.hero-h1{font-size:40px !important}.h2{font-size:36px !important}.sec{padding-top:80px !important;padding-bottom:80px !important}.drawer-wall{display:none !important}.drawer-scene .dr{border-radius:12px !important;width:100% !important}.cta-h2{font-size:38px !important}}
@media (max-width:680px){.hero-scene{zoom:.8}}
@media (max-width:640px){.stage-frame{justify-content:flex-start !important;border-radius:14px}.stage-scene{zoom:.62;margin-left:-300px}}
@media (max-width:520px){.hero-scene{zoom:.58}.ctx-visual{zoom:.88}}

/* saved-notes section: keep the backdrop window inside its wall so it never overlaps the drawer */
.drawer-wall{overflow:hidden}