/* HangLine home page, new design (29 Sep 2026) — live at hanglineapp.com since 29 Sep 2026.
   Uses the tokens and the header from style.css; everything below is this page's own.
   Motion: every animation stops under prefers-reduced-motion, and the live canvases only run
   while they are on screen. */

.nw { --wrap:1080px; --r-xl:28px; --gold-1:#E5B44A; --gold-2:#C4881F; --dark:#2A211C; --dark-2:#3A2E28; }
.nw-wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.nw main { display:block; }
.nw h1, .nw h2, .nw h3 { font-family:var(--font-head); color:var(--ink); }
.nw h2 { margin:0; font-weight:700; font-size:clamp(34px,4.6vw,58px); line-height:1.02; letter-spacing:-.03em; }
.nw h3 { margin:0; font-weight:700; font-size:21px; letter-spacing:-.01em; line-height:1.2; }
.nw-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--brand); font-weight:500; }
.nw-eyebrow::before { content:''; width:18px; height:2px; border-radius:2px; background:currentColor; }
.nw-head { display:flex; flex-direction:column; gap:14px; margin:0 0 38px; }
.nw-head.center { align-items:center; text-align:center; }
.nw-head p { margin:0; color:var(--ink-2); font-size:19px; line-height:1.5; max-width:46ch; }
.nw-sec { padding:112px 0 0; position:relative; }

/* ---------------------------------------------------------------------- buttons */
.nw-btn { position:relative; display:inline-flex; align-items:center; gap:12px; border:0; cursor:pointer; text-decoration:none;
  font:600 17px/1 var(--font-head); color:#FFF9EF; background:var(--brand); padding:18px 26px 18px 22px; border-radius:999px;
  box-shadow:0 18px 34px -16px rgba(201,58,28,.75), inset 0 -2px 0 rgba(0,0,0,.12); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.nw-btn:hover { background:var(--ember); transform:translateY(-2px); box-shadow:0 24px 40px -18px rgba(201,58,28,.85), inset 0 -2px 0 rgba(0,0,0,.12); }
.nw-btn:active { transform:translateY(0) scale(.98); }
.nw-btn svg { width:22px; height:22px; flex:none; }
.nw-btn small { display:block; font:500 12px/1.2 var(--font-body); opacity:.85; margin-top:3px; letter-spacing:.01em; }
.nw-btn .t { display:flex; flex-direction:column; align-items:flex-start; }
.nw-btn.pulse::after { content:''; position:absolute; inset:-4px; border-radius:inherit; border:2px solid rgba(232,80,42,.55); animation:nw-ring 2.6s var(--ease) infinite; pointer-events:none; }
@keyframes nw-ring { 0% { opacity:.9; transform:scale(.96); } 70%,100% { opacity:0; transform:scale(1.16); } }
.nw-ghost { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font:600 16px/1 var(--font-head); color:var(--ink); background:transparent;
  border:1.5px solid rgba(58,46,40,.18); padding:16px 22px; border-radius:999px; transition:border-color .2s, background .2s, transform .2s var(--ease); text-decoration:none; }
.nw-ghost:hover { border-color:var(--brand); background:rgba(232,80,42,.06); transform:translateY(-1px); }
.nw-ghost .pl { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#FFF9EF; }
.nw-ghost .pl svg { width:12px; height:12px; margin-left:2px; }

/* ---------------------------------------------------------------------- the swing (hero) */
.nw-hero { position:relative; overflow:hidden; padding:0 0 40px; }
.nw-garland { position:relative; height:268px; }
.nw-garland .wire { position:absolute; inset:0 0 auto; width:100%; height:150px; display:block; overflow:visible; }
.nw-garland .wire path { stroke-dasharray:var(--wire-len, 2400); stroke-dashoffset:var(--wire-len, 2400); animation:nw-draw 1.3s .1s var(--ease) forwards; }
@keyframes nw-draw { to { stroke-dashoffset:0; } }
.nw-orns { position:absolute; inset:0; }
.nw-orn { position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; cursor:pointer;
  opacity:0; animation:nw-drop .9s var(--ease) forwards; background:none; border:0; padding:0; font:inherit; color:inherit; }
@keyframes nw-drop { 0% { opacity:0; transform:translate(-50%,-70px); } 60% { opacity:1; transform:translate(-50%,6px); } 100% { opacity:1; transform:translate(-50%,0); } }
.nw-orn .sw { transform-origin:50% 0; animation:nw-sway ease-in-out infinite; display:flex; flex-direction:column; align-items:center; }
.nw-orn .sw.hit { animation:nw-hit 1.6s var(--ease); }
@keyframes nw-sway { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(3deg); } }
@keyframes nw-hit { 0% { transform:rotate(0); } 15% { transform:rotate(16deg); } 35% { transform:rotate(-11deg); } 55% { transform:rotate(7deg); } 75% { transform:rotate(-3deg); } 100% { transform:rotate(0); } }
.nw-orn .str { width:2px; background:linear-gradient(#C3C7CD,#D8DBDF); border-radius:2px; }
.nw-orn .cap { width:34px; height:14px; margin-top:-3px; border-radius:50%; border:5px solid var(--gold-1); box-shadow:0 2px 0 var(--gold-2); position:relative; z-index:1; }
.nw-orn img { display:block; margin-top:-7px; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(70,40,20,.22)); transition:transform .25s var(--ease); }
.nw-orn:hover img, .nw-orn:focus-visible img { transform:scale(1.08); }
.nw-orn .nm { margin-top:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#8C7A67; white-space:nowrap; opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s; }
.nw-orn:hover .nm, .nw-orn:focus-visible .nm { opacity:1; transform:none; }
.nw-orn:focus-visible { outline:none; }
.nw-orn:focus-visible img { outline:2px solid var(--brand); outline-offset:6px; border-radius:12px; }

.nw-hero-in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:52px; align-items:center; margin-top:-6px; }
.nw-hero-txt { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.nw-count { display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:8px 16px 8px 10px; border-radius:999px;
  background:#FFF9EF; border:1px solid rgba(232,80,42,.22); box-shadow:0 10px 24px -18px rgba(120,50,20,.6); color:var(--ink-2); font-size:14.5px; }
.nw-count .dot { position:relative; width:10px; height:10px; border-radius:50%; background:#2FA35A; flex:none; }
.nw-count .dot::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(47,163,90,.45); animation:nw-ring 2s ease-out infinite; }
.nw-count b { font-family:var(--font-head); font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; min-width:3.1ch; }
.nw-hero-txt h1 { margin:0; font-weight:800; font-size:clamp(42px,5vw,66px); line-height:.97; letter-spacing:-.04em; }
.nw-hero-txt h1 .w { display:inline-block; opacity:0; transform:translateY(26px) rotate(2deg); animation:nw-word .7s var(--ease) forwards; }
.nw-hero-txt h1 em { font-style:normal; color:var(--brand); }
@keyframes nw-word { to { opacity:1; transform:none; } }
.nw-lede { margin:0; font-size:20px; line-height:1.5; color:var(--ink-2); max-width:34ch; }
.nw-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.nw-cta .nw-ghost { padding:12px 18px 12px 12px; font-size:15px; }
.nw-plats { display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; margin:0; padding:0; font-size:14px; color:var(--ink-3); }
.nw-plats li { display:inline-flex; align-items:center; gap:7px; }
.nw-plats svg { width:16px; height:16px; color:var(--ink-2); }
.nw-plats .free { color:#2f7a3f; font-weight:600; }

/* the laptop with the real recording */
.nw-hero-vid { position:relative; }
.nw-lap { position:relative; animation:nw-float 7s ease-in-out infinite; }
@keyframes nw-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.nw-lap .scr { position:relative; border-radius:18px 18px 6px 6px; padding:10px 10px 12px; background:#1D1714;
  box-shadow:0 60px 90px -50px rgba(70,30,10,.65), 0 0 0 1px rgba(0,0,0,.35) inset; }
.nw-lap .scr::before { content:''; position:absolute; top:4px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#3b322c; }
.nw-lap video, .nw-lap .poster { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; background:#2A211C; }
.nw-lap .base { height:14px; margin:0 -5%; border-radius:0 0 18px 18px; background:linear-gradient(#D9D4CE,#A9A39C); box-shadow:0 18px 26px -18px rgba(0,0,0,.6); position:relative; }
.nw-lap .base::after { content:''; position:absolute; left:50%; top:0; width:16%; height:5px; margin-left:-8%; border-radius:0 0 8px 8px; background:#8F8982; }
.nw-rec { position:absolute; left:18px; top:18px; display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:rgba(20,14,11,.72); color:#fff;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; backdrop-filter:blur(6px); z-index:2; }
.nw-rec::before { content:''; width:7px; height:7px; border-radius:50%; background:#ff4d3a; animation:nw-blink 1.4s steps(2) infinite; }
@keyframes nw-blink { 50% { opacity:.2; } }
.nw-tourbtn { position:absolute; right:18px; bottom:28px; z-index:2; }
.nw-tourbtn .nw-ghost { background:rgba(255,249,239,.92); backdrop-filter:blur(8px); border-color:transparent; box-shadow:0 12px 26px -14px rgba(0,0,0,.6); padding:10px 16px 10px 10px; font-size:14px; }
.nw-chip-float { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:14px; background:#FFF9EF; box-shadow:0 20px 34px -20px rgba(80,40,20,.55);
  font-size:13.5px; font-weight:600; color:var(--ink); border:1px solid rgba(232,80,42,.14); animation:nw-float 6s ease-in-out infinite; }
.nw-chip-float i { font-style:normal; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(232,80,42,.12); color:var(--brand); }
.nw-chip-float i svg { width:15px; height:15px; }
.nw-chip-float.a { left:-26px; bottom:22%; animation-delay:-2s; }
.nw-chip-float.b { right:-18px; top:-18px; animation-delay:-4s; }

/* the running strip of ornament names */
.nw-marq { margin-top:74px; border-block:1px solid rgba(232,80,42,.16); overflow:hidden; padding:16px 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.nw-marq .row { display:flex; gap:44px; width:max-content; animation:nw-marq 46s linear infinite; }
.nw-marq span { display:inline-flex; align-items:center; gap:12px; font-family:var(--font-head); font-weight:600; font-size:20px; color:var(--ink-2); white-space:nowrap; }
.nw-marq img { width:30px; height:30px; object-fit:contain; }
@keyframes nw-marq { to { transform:translateX(-50%); } }

/* ---------------------------------------------------------------------- the ornament playground */
.nw-play-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.nw-desk { position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:540px; display:flex; flex-direction:column;
  background:radial-gradient(60% 50% at 82% 12%, rgba(255,236,214,.95) 0%, transparent 70%), radial-gradient(70% 60% at 8% 96%, rgba(236,160,120,.75) 0%, transparent 70%),
    linear-gradient(165deg,#FFF3E4 0%,#F9D7B8 46%,#F0B690 78%,#E59C77 100%); box-shadow:0 50px 80px -56px rgba(120,50,20,.8); }
.nw-desk::after { content:''; position:absolute; left:-10%; right:-10%; bottom:58px; height:34%; pointer-events:none;
  background:radial-gradient(60% 100% at 30% 100%, rgba(201,118,90,.35), transparent 70%), radial-gradient(50% 90% at 80% 100%, rgba(232,80,42,.18), transparent 70%); }
.nw-desk .bar { height:28px; display:flex; align-items:center; gap:16px; padding:0 14px; background:rgba(255,250,242,.55); backdrop-filter:blur(10px); font-size:12px; font-weight:600; color:#5a4034; }
.nw-desk .bar .apple { width:12px; height:12px; }
.nw-desk .bar .sp { flex:1; }
.nw-desk .bar .clock { font-variant-numeric:tabular-nums; }
.nw-desk .nw-stage { position:relative; flex:1; min-height:360px; touch-action:none; }
.nw-desk canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; }
.nw-desk.grabbing canvas { cursor:grabbing; }
.nw-desk .hint { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:inline-flex; gap:14px; padding:8px 14px; border-radius:999px; background:rgba(42,33,28,.55); color:#fff;
  font-size:12.5px; backdrop-filter:blur(8px); white-space:nowrap; transition:opacity .4s; pointer-events:none; }
.nw-desk .hint b { font-weight:600; }
.nw-desk.touched .hint { opacity:0; }
.nw-desk .m3d { position:absolute; left:0; top:0; pointer-events:none; transform-origin:50% 0; }
.nw-desk .m3d model-viewer { width:100%; height:100%; --poster-color:transparent; background:transparent; }
.nw-desk .now { position:absolute; left:16px; top:40px; display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border-radius:14px; background:rgba(255,249,239,.82); backdrop-filter:blur(8px);
  font-size:13px; color:var(--ink-2); box-shadow:0 10px 24px -18px rgba(0,0,0,.5); }
.nw-desk .now img { width:30px; height:30px; object-fit:contain; }
.nw-desk .now b { display:block; font-family:var(--font-head); font-size:15px; color:var(--ink); }
.nw-ctrl { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px; background:rgba(255,249,239,.9); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.5); }
.nw-seg { display:flex; gap:4px; padding:4px; border-radius:14px; background:rgba(58,46,40,.06); }
.nw-seg button { width:40px; height:36px; border:0; border-radius:10px; background:transparent; color:var(--ink-2); cursor:pointer; display:grid; place-items:center; transition:background .2s, color .2s, transform .15s; }
.nw-seg button svg { width:24px; height:24px; }
.nw-seg button:hover { color:var(--ink); background:rgba(255,255,255,.7); }
.nw-seg button.on { background:#fff; color:var(--brand); box-shadow:0 4px 10px -6px rgba(0,0,0,.4); }
.nw-seg button:active { transform:scale(.94); }
.nw-sw { display:flex; gap:7px; }
.nw-sw button { width:26px; height:26px; border-radius:50%; border:2px solid #fff; cursor:pointer; box-shadow:0 0 0 1px rgba(58,46,40,.18); transition:transform .15s; padding:0; }
.nw-sw button.on { box-shadow:0 0 0 2px var(--brand); transform:scale(1.12); }
.nw-sw button.ghost { background:repeating-linear-gradient(45deg,#fff 0 4px,#eee 4px 8px) !important; }
.nw-snd { margin-left:auto; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:12px; border:0; cursor:pointer; font:600 13.5px var(--font-body);
  background:var(--ink); color:#FFF9EF; transition:background .2s; }
.nw-snd svg { width:18px; height:18px; }
.nw-snd[aria-pressed="false"] { background:rgba(58,46,40,.1); color:var(--ink-2); }
.nw-snd .bars { display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.nw-snd .bars i { width:3px; background:currentColor; border-radius:2px; height:40%; }
.nw-snd[aria-pressed="true"] .bars i { animation:nw-eq .9s ease-in-out infinite; }
.nw-snd .bars i:nth-child(2) { animation-delay:-.3s; } .nw-snd .bars i:nth-child(3) { animation-delay:-.6s; }
@keyframes nw-eq { 0%,100% { height:30%; } 50% { height:100%; } }

.nw-lib { display:flex; flex-direction:column; border-radius:var(--r-xl); background:#FFF9EF; border:1px solid rgba(232,80,42,.14); overflow:hidden; min-height:540px; max-height:640px; }
.nw-lib .lhead { display:flex; align-items:baseline; gap:10px; padding:20px 20px 8px; }
.nw-lib .lhead b { font-family:var(--font-head); font-size:30px; color:var(--brand); font-variant-numeric:tabular-nums; }
.nw-lib .lhead span { color:var(--ink-2); font-size:14.5px; }
.nw-packs { display:flex; gap:6px; padding:6px 20px 12px; overflow-x:auto; scrollbar-width:none; }
.nw-packs::-webkit-scrollbar { display:none; }
.nw-packs button { flex:none; border:1px solid rgba(58,46,40,.14); background:#fff; color:var(--ink-2); border-radius:999px; padding:7px 13px; font:500 13px var(--font-body); cursor:pointer; transition:all .2s; }
.nw-packs button.on { background:var(--ink); border-color:var(--ink); color:#FFF9EF; }
.nw-grid { flex:1; overflow-y:auto; padding:4px 16px 18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; align-content:start; scrollbar-width:thin; }
.nw-card { position:relative; border:1px solid rgba(58,46,40,.08); background:#fff; border-radius:16px; padding:12px 6px 9px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; font:inherit; color:inherit; animation:nw-pop .45s var(--ease) both; }
@keyframes nw-pop { from { opacity:0; transform:translateY(10px) scale(.96); } }
.nw-card:hover { transform:translateY(-3px); box-shadow:0 14px 22px -16px rgba(120,50,20,.6); }
.nw-card.on { border-color:var(--brand); box-shadow:0 0 0 2px rgba(232,80,42,.25); }
.nw-card img, .nw-card model-viewer { width:52px; height:52px; object-fit:contain; --poster-color:transparent; }
.nw-card .nm { font-size:11.5px; line-height:1.2; text-align:center; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.nw-card .tag { position:absolute; top:6px; right:6px; font:600 9px/1 var(--font-mono); letter-spacing:.08em; padding:3px 5px; border-radius:6px; background:var(--ink); color:#fff; }
.nw-card .tag.new { background:var(--brand); }

.nw-facts { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.nw-facts li { display:flex; flex-direction:column; gap:12px; padding:18px 16px; border-radius:20px; background:#FFF9EF; border:1px solid rgba(232,80,42,.1); }
.nw-facts .ic { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(232,80,42,.1); color:var(--brand); }
.nw-facts .ic svg { width:24px; height:24px; }
.nw-facts b { font-family:var(--font-head); font-size:18px; line-height:1.15; color:var(--ink); }
.nw-facts span { font-size:13px; color:var(--ink-3); margin-top:-6px; }
.nw-facts li:hover .ic svg { animation:nw-wiggle .7s var(--ease); }
@keyframes nw-wiggle { 25% { transform:rotate(-12deg); } 60% { transform:rotate(9deg); } }

/* ---------------------------------------------------------------------- community / brands */
.nw-comm { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; }
.nw-steps { list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; counter-reset:s; }
.nw-steps li { display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:18px; background:#FFF9EF; border:1px solid rgba(232,80,42,.12); font-family:var(--font-head); font-size:18px; font-weight:600;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.nw-steps li::before { counter-increment:s; content:counter(s); flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(232,80,42,.12); color:var(--brand); font-size:15px; }
.nw-steps li.act { transform:translateX(8px); border-color:var(--brand); box-shadow:0 16px 26px -20px rgba(201,58,28,.8); }
.nw-steps li.act::before { background:var(--brand); color:#fff; }
.nw-steps small { display:block; font:400 13.5px var(--font-body); color:var(--ink-3); margin-top:2px; }
.nw-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.nw-tags span { padding:7px 12px; border-radius:999px; background:rgba(58,46,40,.06); font-size:13.5px; color:var(--ink-2); }

.nw-cwin { position:relative; border-radius:22px; background:#FFF9EF; box-shadow:0 50px 80px -52px rgba(120,50,20,.75); border:1px solid rgba(232,80,42,.12); overflow:hidden; aspect-ratio:1.18; }
.nw-cwin .tb { height:40px; display:flex; align-items:center; gap:7px; padding:0 14px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; font:600 13px var(--font-head); }
.nw-cwin .tb i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); }
.nw-cwin .tb b { margin-left:10px; }
.nw-cgrid { position:absolute; inset:56px 16px 16px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:12px; }
.nw-cg { position:relative; border-radius:16px; background:#fff; border:1px solid rgba(58,46,40,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px; overflow:hidden; }
.nw-cg img { width:58%; max-width:84px; aspect-ratio:1; object-fit:contain; transform-origin:50% -40%; animation:nw-sway 5s ease-in-out infinite; }
.nw-cg:nth-child(2n) img { animation-duration:6.2s; animation-delay:-1.4s; }
.nw-cg .ig { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:#b0306b; background:rgba(193,53,132,.08); padding:4px 8px; border-radius:999px; }
.nw-cg .ig svg { width:12px; height:12px; }
.nw-cg .lk { position:absolute; top:8px; right:9px; font-size:11px; color:var(--ink-3); display:inline-flex; gap:3px; align-items:center; }
.nw-cg .lk svg { width:11px; height:11px; color:#e0445a; }
.nw-cg.yours { border:2px dashed var(--brand); background:rgba(232,80,42,.04); }
.nw-cg.yours .upl { position:absolute; inset:0; display:grid; place-items:center; background:#FFF9EF; transition:opacity .4s; }
.nw-cg.yours .upl svg { width:34px; height:34px; color:var(--brand); animation:nw-bob 1.6s ease-in-out infinite; }
@keyframes nw-bob { 50% { transform:translateY(-5px); } }
.nw-cg.yours .ok { position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%; background:#2FA35A; color:#fff; display:grid; place-items:center; transform:scale(0); transition:transform .4s cubic-bezier(.3,1.6,.5,1); }
.nw-cg.yours .ok svg { width:13px; height:13px; }
.nw-cwin[data-step="1"] .yours .upl, .nw-cwin[data-step="2"] .yours .upl, .nw-cwin[data-step="3"] .yours .upl { opacity:0; }
.nw-cwin[data-step="2"] .yours .ok, .nw-cwin[data-step="3"] .yours .ok { transform:scale(1); }
.nw-cwin[data-step="3"] .yours { border-style:solid; animation:nw-glow 1.6s ease-in-out infinite; }
@keyframes nw-glow { 50% { box-shadow:0 0 0 6px rgba(232,80,42,.16); } }
.nw-cwin .fly { position:absolute; width:84px; height:84px; left:50%; top:50%; margin:-42px; border-radius:18px; background:#fff; box-shadow:0 24px 40px -18px rgba(0,0,0,.5); display:grid; place-items:center; opacity:0; pointer-events:none; }
.nw-cwin .fly img { width:70%; }
.nw-cwin[data-step="0"] .fly { animation:nw-fly 1.8s var(--ease) .2s forwards; }
@keyframes nw-fly { 0% { opacity:0; transform:translate(160px,120px) rotate(18deg) scale(1.2); } 30% { opacity:1; } 100% { opacity:0; transform:translate(var(--fx,-120px),var(--fy,-60px)) rotate(0) scale(.7); } }

/* ---------------------------------------------------------------------- tasks, recurring, focus (view only) */
.nw-views { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.nw-view { position:relative; border-radius:24px; background:#FFF9EF; border:1px solid rgba(232,80,42,.12); overflow:hidden; display:flex; flex-direction:column; }
.nw-view .art { position:relative; height:300px; background:linear-gradient(180deg,#FBEBD6,#F6E0C4); overflow:hidden; }
.nw-view .cap { padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; }
.nw-view .cap .k { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); }
.nw-view .cap h3 { font-size:23px; }
.nw-view svg.sc { position:absolute; inset:0; width:100%; height:100%; }
/* daily: rings drop, one breaks */
.nw-view .rg { transform-box:fill-box; transform-origin:center; }
.nw-view.run .rg { animation:nw-ringdrop 9s var(--ease) infinite; }
.nw-view.run .rg.r2 { animation-delay:.6s; } .nw-view.run .rg.r3 { animation-delay:1.2s; }
@keyframes nw-ringdrop { 0% { opacity:0; transform:translateY(-120px); } 8% { opacity:1; transform:translateY(8px); } 12%,100% { opacity:1; transform:none; } }
.nw-view.run .rg.r3 { animation-name:nw-ringdrop3; }
@keyframes nw-ringdrop3 { 0% { opacity:0; transform:translateY(-120px); } 8% { opacity:1; transform:translateY(8px); } 12%,58% { opacity:1; transform:none; } 64% { opacity:0; transform:scale(1.6); } 100% { opacity:0; } }
.nw-view .shard { opacity:0; transform-box:fill-box; transform-origin:center; }
.nw-view.run .shard { animation:nw-shard 9s ease-out infinite 1.2s; }
@keyframes nw-shard { 0%,57% { opacity:0; transform:none; } 60% { opacity:1; } 75% { opacity:0; transform:translate(var(--sx),var(--sy)) rotate(80deg); } 100% { opacity:0; } }
.nw-view .tlist { position:absolute; right:14px; top:16px; display:flex; flex-direction:column; gap:7px; }
.nw-view .tl { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:11px; background:#fff; font-size:12.5px; color:var(--ink); box-shadow:0 8px 16px -14px rgba(0,0,0,.5); }
.nw-view .tl i { width:12px; height:12px; border-radius:50%; border:3px solid var(--gold-1); flex:none; }
.nw-view .tl.red i { border-color:#C93A1C; } .nw-view .tl.red em { color:#C93A1C; }
.nw-view .tl em { font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin-left:4px; }
.nw-view.run .tl { animation:nw-tl 9s var(--ease) infinite; }
.nw-view.run .tl:nth-child(2) { animation-delay:.6s; } .nw-view.run .tl:nth-child(3) { animation-name:nw-tl3; animation-delay:1.2s; }
@keyframes nw-tl { 0%,4% { opacity:0; transform:translateX(16px); } 10%,100% { opacity:1; transform:none; } }
@keyframes nw-tl3 { 0%,4% { opacity:0; transform:translateX(16px); } 10%,56% { opacity:1; transform:none; text-decoration:none; } 60%,100% { opacity:.45; text-decoration:line-through; } }
/* recurring: the week lights up */
.nw-week { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:7px; }
.nw-week span { width:30px; height:38px; border-radius:10px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:600 11px var(--font-body); color:var(--ink-3); }
.nw-week span i { width:9px; height:9px; border-radius:2px; transform:rotate(45deg); background:rgba(58,46,40,.12); }
.nw-view.run .nw-week span i { animation:nw-day 7s steps(1) infinite; }
.nw-view.run .nw-week span:nth-child(2) i { animation-delay:.9s; } .nw-view.run .nw-week span:nth-child(3) i { animation-delay:1.8s; } .nw-view.run .nw-week span:nth-child(4) i { animation-delay:2.7s; }
.nw-view.run .nw-week span:nth-child(5) i { animation-delay:3.6s; } .nw-view.run .nw-week span:nth-child(6) i { animation-delay:4.5s; } .nw-view.run .nw-week span:nth-child(7) i { animation-delay:5.4s; }
@keyframes nw-day { 0% { background:#8FD3FF; box-shadow:0 0 10px #8FD3FF; } 90%,100% { background:#8FD3FF; box-shadow:none; } }
.nw-view .gem { transform-box:fill-box; transform-origin:center; }
.nw-view.run .gem { animation:nw-twk 2.4s ease-in-out infinite; }
.nw-view.run .gem:nth-of-type(2n) { animation-delay:-1.2s; }
@keyframes nw-twk { 50% { opacity:.45; transform:scale(.7); } }
.nw-view .swg { transform-origin:50% 0; transform-box:view-box; }
.nw-view.run .swg { animation:nw-sway 5.5s ease-in-out infinite; }
/* focus: the timer and where the time went */
.nw-focus { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:22px; padding:20px; }
.nw-dial { position:relative; width:150px; height:150px; flex:none; }
.nw-dial svg { width:100%; height:100%; transform:rotate(-90deg); }
.nw-dial .tm { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.nw-dial .tm b { font-family:var(--font-head); font-size:34px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.nw-dial .tm span { font-size:11.5px; color:var(--ink-3); font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.nw-apps { display:flex; flex-direction:column; gap:10px; width:130px; }
.nw-apps div { font-size:12px; color:var(--ink-2); display:flex; flex-direction:column; gap:4px; }
.nw-apps div span { display:flex; justify-content:space-between; }
.nw-apps div span em { font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.nw-apps div i { display:block; height:8px; border-radius:6px; background:rgba(58,46,40,.08); overflow:hidden; }
.nw-apps div i::after { content:''; display:block; height:100%; width:var(--w); border-radius:inherit; background:var(--c,var(--brand)); transform-origin:left; }
.nw-view.run .nw-apps div i::after { animation:nw-bar 6s var(--ease) infinite; }
.nw-view.run .nw-apps div:nth-child(2) i::after { animation-delay:.25s; } .nw-view.run .nw-apps div:nth-child(3) i::after { animation-delay:.5s; }
@keyframes nw-bar { 0% { transform:scaleX(0); } 30%,90% { transform:scaleX(1); } 100% { transform:scaleX(1); opacity:.9; } }

/* ---------------------------------------------------------------------- calendar and more (bento) */
.nw-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(190px,auto); gap:16px; }
.nw-tile { position:relative; border-radius:24px; background:#FFF9EF; border:1px solid rgba(232,80,42,.12); padding:22px; overflow:hidden; display:flex; flex-direction:column; gap:10px; }
.nw-tile .k { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); }
.nw-tile h3 { font-size:22px; }
.nw-tile p { margin:0; color:var(--ink-3); font-size:14px; line-height:1.45; }
.nw-tile.big { grid-column:span 2; grid-row:span 2; }
.nw-tile.wide { grid-column:span 2; }
.nw-tile.dark { background:var(--dark); color:#F6EEDC; border-color:transparent; }
.nw-tile.dark h3 { color:#FFF9EF; } .nw-tile.dark p { color:rgba(246,238,220,.62); }
.nw-tile.coral { background:linear-gradient(150deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent; }
.nw-tile.coral h3, .nw-tile.coral .k { color:#fff; } .nw-tile.coral p { color:rgba(255,255,255,.82); }
.nw-provs { display:flex; gap:8px; flex-wrap:wrap; }
.nw-provs span { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:12px; background:#fff; font-size:13px; font-weight:600; box-shadow:0 6px 14px -12px rgba(0,0,0,.5); }
.nw-provs span i { width:10px; height:10px; border-radius:3px; }
.nw-evs { margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.nw-ev { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:14px; background:#fff; box-shadow:0 8px 18px -16px rgba(0,0,0,.6); font-size:14px; }
.nw-ev time { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); width:44px; flex:none; }
.nw-ev b { font-weight:600; flex:1; }
.nw-ev .bar { width:4px; align-self:stretch; border-radius:4px; background:var(--c,var(--brand)); }
.nw-ev .soon { font-size:11.5px; font-weight:700; color:#fff; background:var(--brand); padding:4px 8px; border-radius:999px; white-space:nowrap; }
.nw-bellw { position:absolute; right:26px; top:18px; width:70px; transform-origin:50% 0; }
.nw-tile.in .nw-bellw { animation:nw-ringbell 3.2s ease-in-out infinite; }
@keyframes nw-ringbell { 0%,40%,100% { transform:rotate(0); } 5% { transform:rotate(18deg); } 12% { transform:rotate(-15deg); } 19% { transform:rotate(11deg); } 26% { transform:rotate(-7deg); } 33% { transform:rotate(3deg); } }
.nw-bellw img { width:100%; display:block; }
.nw-bellw .str { width:2px; height:40px; margin:0 auto; background:#C3C7CD; }
.nw-pillt { align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:#2A211C; color:#FFF9EF; font-family:var(--font-mono); font-size:15px; font-variant-numeric:tabular-nums; }
.nw-pillt::before { content:''; width:8px; height:8px; border-radius:50%; background:#ff5a3a; animation:nw-blink 1s steps(2) infinite; }
.nw-morn { margin-top:auto; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); transform:translateY(20px); opacity:0; transition:all .7s var(--ease) .3s; }
.nw-tile.in .nw-morn { transform:none; opacity:1; }
.nw-morn .sun { width:34px; height:34px; border-radius:50%; background:radial-gradient(circle,#FFE08A 40%,#FFB020 41%,#FFB020 55%,transparent 56%); animation:nw-spin 12s linear infinite; }
@keyframes nw-spin { to { transform:rotate(360deg); } }
.nw-morn b { font-family:var(--font-head); font-size:16px; }
.nw-poll { margin-top:auto; display:flex; flex-direction:column; gap:7px; }
.nw-poll div { position:relative; border-radius:10px; background:rgba(255,255,255,.08); padding:8px 11px; font-size:13px; display:flex; justify-content:space-between; overflow:hidden; }
.nw-poll div::before { content:''; position:absolute; inset:0; width:var(--p); background:rgba(232,80,42,.55); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease) .3s; border-radius:inherit; }
.nw-tile.in .nw-poll div::before { transform:scaleX(1); }
.nw-poll div > * { position:relative; }
.nw-os { display:flex; gap:12px; margin-top:auto; }
.nw-os span { width:52px; height:52px; border-radius:16px; background:#fff; display:grid; place-items:center; box-shadow:0 10px 18px -14px rgba(0,0,0,.5); }
.nw-os svg { width:26px; height:26px; color:var(--ink); }
.nw-lang { margin-top:auto; display:flex; gap:8px; align-items:center; font-family:var(--font-head); font-size:28px; font-weight:700; }
.nw-lang .ar { font-family:var(--ar-head); color:var(--brand); }
.nw-lang i { width:1px; height:30px; background:rgba(58,46,40,.2); }
.nw-thru { position:relative; margin-top:auto; height:78px; border-radius:14px; background:#fff; overflow:hidden; box-shadow:0 8px 18px -16px rgba(0,0,0,.6); }
.nw-thru .doc { position:absolute; inset:12px 14px; display:flex; flex-direction:column; gap:7px; }
.nw-thru .doc i { height:7px; border-radius:4px; background:#EFE6D6; }
.nw-thru .doc i:nth-child(2) { width:72%; } .nw-thru .doc i:nth-child(3) { width:84%; }
.nw-thru .ptr { position:absolute; width:18px; left:20%; top:40%; }
.nw-tile.in .nw-thru .ptr { animation:nw-ptr 4s ease-in-out infinite; }
@keyframes nw-ptr { 0%,100% { transform:translate(0,0); } 45% { transform:translate(120px,-10px); } 55% { transform:translate(120px,-10px) scale(.85); } 60% { transform:translate(120px,-10px); } }
.nw-thru .o { position:absolute; right:26px; top:-4px; width:34px; transform-origin:50% 0; }
.nw-lock { margin-top:auto; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:rgba(232,80,42,.12); color:var(--brand); }
.nw-lock svg { width:28px; height:28px; }

/* ---------------------------------------------------------------------- share it with a friend (a looping "GIF") */
.nw-share { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; }
.nw-gif { position:relative; border-radius:26px; background:linear-gradient(160deg,#2F2520,#1F1814); padding:18px; box-shadow:0 50px 80px -50px rgba(40,20,10,.9); aspect-ratio:16/11; overflow:hidden; }
.nw-gif .scene { position:absolute; inset:18px; border-radius:16px; overflow:hidden; opacity:0; transform:scale(.97); transition:opacity .5s var(--ease), transform .6s var(--ease); background:#F6EEDC; }
.nw-gif[data-s="0"] .s0, .nw-gif[data-s="1"] .s1, .nw-gif[data-s="2"] .s2, .nw-gif[data-s="3"] .s3 { opacity:1; transform:none; }
.nw-gif .prog { position:absolute; left:28px; right:28px; bottom:26px; display:flex; gap:6px; z-index:5; }
.nw-gif .prog i { flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.22); overflow:hidden; }
.nw-gif .prog i::after { content:''; display:block; height:100%; width:0; background:#fff; }
.nw-gif .prog i.done::after { width:100%; }
.nw-gif .prog i.now::after { animation:nw-prog var(--dur,2600ms) linear forwards; }
@keyframes nw-prog { to { width:100%; } }
.nw-gif .gtag { position:absolute; left:28px; top:28px; z-index:5; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; color:#fff; background:rgba(0,0,0,.4); padding:5px 9px; border-radius:6px; }
/* scene 0: Settings, the Share button */
.nw-gif .s0 { display:flex; flex-direction:column; }
.nw-gif .s0 .ttl { height:34px; flex:none; display:flex; align-items:center; gap:6px; padding:0 12px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; }
.nw-gif .s0 .ttl i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.5); }
.nw-gif .s0 .ttl b { margin-left:8px; font:700 14px var(--font-head); background:#FFF9EF; color:var(--ink); padding:3px 10px; border-radius:999px; }
.nw-gif .s0 .ttl b em { font-style:normal; color:var(--brand); }
.nw-gif .s0 .ttl span { font:600 11.5px var(--font-body); background:rgba(255,255,255,.2); padding:3px 9px; border-radius:999px; }
.nw-gif .s0 .body { flex:1; display:grid; grid-template-columns:38% 62%; min-height:0; }
.nw-gif .s0 .side { background:linear-gradient(180deg,#FBEFDD,#F3E2C8); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:14px; gap:10px; position:relative; }
.nw-gif .s0 .side .pvw { position:absolute; top:0; left:50%; width:42%; margin-left:-21%; display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; animation:nw-sway 4s ease-in-out infinite; }
.nw-gif .s0 .side .pvw::before { content:''; width:2px; height:34px; background:#C3C7CD; }
.nw-gif .s0 .side .pv { width:100%; margin-top:-2px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.nw-gif .s0 .sharebtn { position:relative; width:100%; padding:11px; border-radius:12px; background:var(--brand); color:#fff; font:600 13px var(--font-head); display:flex; gap:8px; justify-content:center; align-items:center; }
.nw-gif .s0 .sharebtn svg { width:15px; height:15px; }
.nw-gif[data-s="0"] .s0 .sharebtn { animation:nw-press 2.6s ease-in-out forwards; }
@keyframes nw-press { 0%,55% { transform:none; box-shadow:0 0 0 0 rgba(232,80,42,.5); } 62% { transform:scale(.94); } 70%,100% { transform:none; box-shadow:0 0 0 10px rgba(232,80,42,0); } }
.nw-gif .cur { position:absolute; width:20px; z-index:4; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.nw-gif[data-s="0"] .s0 .cur { animation:nw-cur0 2.6s ease-in-out forwards; }
@keyframes nw-cur0 { 0% { left:80%; top:70%; } 50%,100% { left:24%; top:84%; } }
.nw-gif .s0 .main { padding:16px; display:flex; flex-direction:column; gap:9px; }
.nw-gif .s0 .main b.h { font:700 16px var(--font-head); color:var(--ink); }
.nw-gif .s0 .main .tabs { display:flex; gap:5px; }
.nw-gif .s0 .main .tabs span { font-size:10.5px; padding:4px 8px; border-radius:999px; background:#fff; color:var(--ink-2); }
.nw-gif .s0 .main .tabs span:first-child { background:var(--ink); color:#fff; }
.nw-gif .s0 .main .cards { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:4px; }
.nw-gif .s0 .main .cards b { aspect-ratio:1; border-radius:10px; background:#fff; display:grid; place-items:center; }
.nw-gif .s0 .main .cards img { width:62%; }
/* scene 1: the link is ready */
.nw-gif .s1 { display:grid; place-items:center; background:radial-gradient(circle at 50% 30%,#FFF6E8,#F3E2C8); }
.nw-gif .s1 .lnk { width:78%; border-radius:18px; background:#fff; box-shadow:0 30px 50px -30px rgba(0,0,0,.5); overflow:hidden; }
.nw-gif .s1 .lnk .pic { height:120px; background:linear-gradient(135deg,#F9D9BC,#EFB38E); display:grid; place-items:center; position:relative; }
.nw-gif .s1 .lnk .pic img { width:62px; animation:nw-sway 3.6s ease-in-out infinite; transform-origin:50% -50%; }
.nw-gif .s1 .lnk .pic::before { content:''; position:absolute; top:0; left:50%; width:2px; height:24px; background:#C3C7CD; }
.nw-gif .s1 .lnk .row { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.nw-gif .s1 .lnk .url { flex:1; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nw-gif .s1 .lnk .cp { font:600 12px var(--font-head); color:#fff; background:var(--ink); padding:7px 11px; border-radius:9px; }
.nw-gif .s1 .toast { position:absolute; top:16%; left:50%; transform:translate(-50%,-10px); opacity:0; font:600 13px var(--font-head); color:#fff; background:#2FA35A; padding:8px 14px; border-radius:999px; }
.nw-gif[data-s="1"] .s1 .toast { animation:nw-toast 2.6s var(--ease) .7s forwards; }
@keyframes nw-toast { 0% { opacity:0; transform:translate(-50%,-10px); } 20%,80% { opacity:1; transform:translate(-50%,0); } 100% { opacity:0; } }
/* scene 2: in a chat */
.nw-gif .s2 { background:#E7DDD0; display:flex; flex-direction:column; }
.nw-gif .s2 .ch { height:44px; background:#1F6F5C; display:flex; align-items:center; gap:10px; padding:0 14px; color:#fff; font:600 13px var(--font-body); }
.nw-gif .s2 .ch i { width:26px; height:26px; border-radius:50%; background:#F0B48E; }
.nw-gif .s2 .msgs { flex:1; padding:14px; display:flex; flex-direction:column; gap:10px; justify-content:flex-end; }
.nw-gif .s2 .b { max-width:70%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.35; background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.08); opacity:0; transform:translateY(10px); }
.nw-gif .s2 .b.me { align-self:flex-end; background:#D9FDD3; }
.nw-gif .s2 .b .prev { border-radius:10px; overflow:hidden; background:#F6EEDC; margin-bottom:7px; }
.nw-gif .s2 .b .prev div { height:74px; display:grid; place-items:center; background:linear-gradient(135deg,#F9D9BC,#EFB38E); }
.nw-gif .s2 .b .prev img { width:44px; }
.nw-gif .s2 .b .prev span { display:block; padding:6px 9px; font-size:11.5px; color:var(--ink-2); }
.nw-gif .s2 .b .prev span b { display:block; color:var(--ink); font-size:12.5px; }
.nw-gif[data-s="2"] .s2 .b { animation:nw-msg .5s var(--ease) forwards; }
.nw-gif[data-s="2"] .s2 .b:nth-child(2) { animation-delay:1.1s; }
@keyframes nw-msg { to { opacity:1; transform:none; } }
/* scene 3: their desktop */
.nw-gif .s3 { background:radial-gradient(120% 90% at 30% 0%,#CFE3F2,#9EBFD8 60%,#7A9CBC); }
.nw-gif .s3 .mb { height:22px; background:rgba(255,255,255,.4); }
.nw-gif .s3 .hang { position:absolute; top:22px; left:62%; display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; }
.nw-gif[data-s="3"] .s3 .hang { animation:nw-hit 2.4s var(--ease) .2s; }
.nw-gif .s3 .hang i { width:2px; height:70px; background:#E6E9F0; }
.nw-gif .s3 .hang img { width:70px; margin-top:-4px; filter:drop-shadow(0 12px 12px rgba(0,0,0,.25)); }
.nw-gif .s3 .dlc { position:absolute; left:22px; bottom:52px; padding:12px 14px; border-radius:14px; background:#FFF9EF; box-shadow:0 20px 30px -20px rgba(0,0,0,.5); display:flex; align-items:center; gap:10px; font-size:13px; transform:translateY(20px); opacity:0; }
.nw-gif[data-s="3"] .s3 .dlc { animation:nw-msg .6s var(--ease) .8s forwards; }
.nw-gif .s3 .dlc b { display:block; font-family:var(--font-head); font-size:14.5px; }
.nw-gif .s3 .dlc span.go { font:600 12px var(--font-head); color:#fff; background:var(--brand); padding:7px 11px; border-radius:9px; }
.nw-gif .s3 .dlc img { width:30px; }
.nw-sharesteps { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.nw-sharesteps li { display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:16px; border:1px solid transparent; font:600 17px var(--font-head); color:var(--ink-3); transition:all .35s var(--ease); cursor:pointer; }
.nw-sharesteps li .n { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:13px; background:rgba(58,46,40,.07); color:var(--ink-2); transition:all .35s; }
.nw-sharesteps li.act { color:var(--ink); background:#FFF9EF; border-color:rgba(232,80,42,.25); transform:translateX(6px); }
.nw-sharesteps li.act .n { background:var(--brand); color:#fff; }
.nw-sharesteps small { display:block; font:400 13px var(--font-body); color:var(--ink-3); }

/* ---------------------------------------------------------------------- download */
.nw-dl { position:relative; border-radius:34px; padding:64px 56px 48px; overflow:hidden; color:#FFF9EF;
  background:radial-gradient(90% 120% at 100% 0%, #F07030 0%, #E8502A 36%, #C93A1C 78%, #A92E14 100%); box-shadow:0 60px 100px -60px rgba(160,40,10,.9); }
.nw-dl::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 12% 110%, rgba(255,210,150,.35), transparent 45%); pointer-events:none; }
.nw-dl .wire2 { position:absolute; top:0; left:0; width:100%; height:120px; opacity:.5; }
.nw-dl .hangs { position:absolute; top:0; right:6%; display:flex; gap:40px; pointer-events:none; }
.nw-dl .hangs .h { display:flex; flex-direction:column; align-items:center; transform-origin:50% 0; animation:nw-sway ease-in-out infinite; }
.nw-dl .hangs .h i { width:2px; background:rgba(255,255,255,.55); }
.nw-dl .hangs .h img { width:54px; margin-top:-2px; filter:drop-shadow(0 12px 14px rgba(60,10,0,.35)); }
.nw-dl h2 { color:#FFF9EF; font-size:clamp(40px,5.4vw,72px); max-width:12ch; position:relative; }
.nw-dl .sub { position:relative; margin:14px 0 0; font-size:18px; color:rgba(255,249,239,.85); display:flex; flex-wrap:wrap; gap:6px 18px; }
.nw-dl .sub span { display:inline-flex; align-items:center; gap:7px; }
.nw-dl .sub svg { width:16px; height:16px; }
.nw-dl .main { position:relative; margin-top:30px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.nw-dl .main .nw-btn { background:#FFF9EF; color:var(--ember); font-size:19px; padding:20px 30px 20px 24px; box-shadow:0 22px 40px -18px rgba(60,10,0,.7); }
.nw-dl .main .nw-btn:hover { background:#fff; }
.nw-dl .main .nw-btn small { color:var(--ink-2); opacity:1; }
.nw-dl .main .nw-btn.pulse::after { border-color:rgba(255,249,239,.7); }
.nw-dl .ver { font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; color:rgba(255,249,239,.8); }
.nw-plat { position:relative; margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.nw-pc { border-radius:22px; padding:20px; background:rgba(255,249,239,.1); border:1px solid rgba(255,249,239,.22); backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:12px; transition:background .25s, transform .25s var(--ease); }
.nw-pc:hover { background:rgba(255,249,239,.16); transform:translateY(-3px); }
.nw-pc.me { background:rgba(255,249,239,.2); border-color:rgba(255,249,239,.6); }
.nw-pc .ph { display:flex; align-items:center; gap:10px; font:700 20px var(--font-head); }
.nw-pc .ph svg { width:24px; height:24px; }
.nw-pc .ph .yours { margin-left:auto; font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; padding:5px 7px; border-radius:6px; background:#FFF9EF; color:var(--ember); }
.nw-pc a.b { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; border-radius:14px; background:#FFF9EF; color:var(--ink); text-decoration:none; font:600 15px var(--font-head); transition:transform .15s, box-shadow .2s; }
.nw-pc a.b:hover { transform:translateY(-1px); box-shadow:0 12px 20px -14px rgba(0,0,0,.6); }
.nw-pc a.b span { font:500 12px var(--font-body); color:var(--ink-3); }
.nw-pc a.b svg { width:18px; height:18px; color:var(--brand); flex:none; }
.nw-pc a.b.alt { background:rgba(255,249,239,.14); color:#FFF9EF; }
.nw-pc a.b.alt span { color:rgba(255,249,239,.7); }
.nw-pc a.b.alt svg { color:#FFF9EF; }
.nw-pc a.store { display:block; border-radius:12px; overflow:hidden; transition:transform .15s; }
.nw-pc a.store:hover { transform:translateY(-1px); }
.nw-pc a.store img { display:block; width:100%; max-width:230px; height:auto; }
.nw-pc .note { font-size:12.5px; color:rgba(255,249,239,.75); line-height:1.45; }
.nw-pc .note a { color:#fff; font-weight:600; }
.nw-upd { position:relative; margin-top:18px; display:inline-flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,249,239,.88); }
.nw-upd svg { width:18px; height:18px; animation:nw-spin 6s linear infinite; }

/* the download button that follows you down the page */
.nw-fdl { position:fixed; right:22px; bottom:22px; z-index:60; transform:translateY(140%); opacity:0; transition:transform .45s var(--ease), opacity .3s; }
.nw-fdl.show { transform:none; opacity:1; }
.nw-fdl .nw-btn { padding:15px 22px 15px 18px; font-size:16px; }

/* ---------------------------------------------------------------------- faq, ideas, follow */
.nw-faq { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.nw-faq details { border-radius:18px; background:#FFF9EF; border:1px solid rgba(232,80,42,.12); padding:0 20px; transition:border-color .2s; }
.nw-faq details[open] { border-color:rgba(232,80,42,.35); }
.nw-faq summary { cursor:pointer; list-style:none; padding:18px 0; font:600 17px var(--font-head); display:flex; justify-content:space-between; gap:14px; align-items:center; }
.nw-faq summary::-webkit-details-marker { display:none; }
.nw-faq summary::after { content:'+'; font:400 24px/1 var(--font-body); color:var(--brand); transition:transform .25s; }
.nw-faq details[open] summary::after { transform:rotate(45deg); }
.nw-faq details p { margin:0 0 18px; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.nw-end { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.nw-end a { display:flex; align-items:center; gap:18px; padding:26px; border-radius:24px; text-decoration:none; background:#FFF9EF; border:1px solid rgba(232,80,42,.12); transition:transform .25s var(--ease), box-shadow .25s; }
.nw-end a:hover { transform:translateY(-3px); box-shadow:0 24px 34px -28px rgba(120,50,20,.8); }
.nw-end a:only-child { grid-column:1 / -1; }   /* 9 Oct 2026: the suggestions card is gone, Instagram spans the row */
.nw-end a .ic { width:56px; height:56px; border-radius:18px; flex:none; display:grid; place-items:center; background:rgba(232,80,42,.12); color:var(--brand); }
.nw-end a.ig .ic { background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7); color:#fff; }
.nw-end a .ic svg { width:28px; height:28px; }
.nw-end a b { display:block; font:700 21px var(--font-head); color:var(--ink); }
.nw-end a span { font-size:14.5px; color:var(--ink-3); }
.nw-end a .go { margin-left:auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; flex:none; transition:transform .25s var(--ease); }
.nw-end a:hover .go { transform:rotate(-45deg); }
.nw-end a .go svg { width:18px; height:18px; }
.nw footer { margin-top:90px; }

/* the tour, full size */
.nw-lb { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; background:rgba(20,14,11,.82); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .3s; }
.nw-lb.open { opacity:1; pointer-events:auto; }
.nw-lb video { width:min(1100px,100%); max-height:86vh; border-radius:16px; background:#000; box-shadow:0 40px 80px -30px rgba(0,0,0,.8); }
.nw-lb .x { position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:0; background:#FFF9EF; color:var(--ink); font-size:22px; cursor:pointer; }

/* ---------------------------------------------------------------------- scroll reveals */
.nw .rv { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.nw .rv.in { opacity:1; transform:none; }
.nw-js-off .rv { opacity:1; transform:none; }

/* ---------------------------------------------------------------------- smaller screens */
@media (max-width:1060px){
  .nw-facts { grid-template-columns:repeat(3,1fr); }
  .nw-bento { grid-template-columns:repeat(2,1fr); }
  .nw-tile.big { grid-column:span 2; grid-row:span 1; }
}
@media (max-width:900px){
  .nw-sec { padding-top:84px; }
  .nw-hero-in, .nw-play-grid, .nw-comm, .nw-share { grid-template-columns:1fr; gap:36px; }
  .nw-hero-txt { align-items:center; text-align:center; }
  .nw-lede { max-width:none; }
  .nw-cta, .nw-plats { justify-content:center; }
  .nw-chip-float.a { left:4px; } .nw-chip-float.b { right:4px; }
  .nw-views { grid-template-columns:1fr; }
  .nw-plat { grid-template-columns:1fr; }
  .nw-faq, .nw-end { grid-template-columns:1fr; }
  .nw-lib { max-height:480px; min-height:0; }
  .nw-desk { min-height:460px; }
  .nw-dl { padding:48px 24px 34px; border-radius:26px; }
  .nw-dl .hangs { display:none; }
}
@media (max-width:560px){
  .nw-garland { height:220px; }
  .nw-facts { grid-template-columns:repeat(2,1fr); }
  .nw-bento { grid-template-columns:1fr; }
  .nw-tile.big, .nw-tile.wide { grid-column:span 1; }
  .nw-hero-txt h1 { font-size:44px; }
  .nw-ctrl { gap:10px; }
  .nw-seg button { width:34px; }
  .nw-snd { margin-left:0; }
  .nw-fdl { left:16px; right:16px; bottom:14px; }
  .nw-fdl .nw-btn { width:100%; justify-content:center; }
  .nw-cgrid { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); }
  .nw-cwin { aspect-ratio:.9; }
  .nw-focus { flex-direction:column; gap:12px; }
  .nw-dial { width:120px; height:120px; }
}

/* ---------------------------------------------------------------------- Arabic */
html[dir="rtl"] .nw h1, html[dir="rtl"] .nw h2, html[dir="rtl"] .nw h3, html[dir="rtl"] .nw-btn, html[dir="rtl"] .nw-ghost,
html[dir="rtl"] .nw-steps li, html[dir="rtl"] .nw-sharesteps li, html[dir="rtl"] .nw-faq summary, html[dir="rtl"] .nw-end a b, html[dir="rtl"] .nw-facts b, html[dir="rtl"] .nw-pc .ph { font-family:var(--ar-head); letter-spacing:0; }
html[dir="rtl"] .nw { font-family:var(--ar-body); }
html[dir="rtl"] .nw-hero-txt h1 { line-height:1.15; }
html[dir="rtl"] .nw h2 { line-height:1.18; }
html[dir="rtl"] .nw-eyebrow, html[dir="rtl"] .nw-view .cap .k, html[dir="rtl"] .nw-tile .k { letter-spacing:0; text-transform:none; font-family:var(--ar-body); font-size:13px; }
html[dir="rtl"] .nw-steps li.act, html[dir="rtl"] .nw-sharesteps li.act { transform:translateX(-8px); }
html[dir="rtl"] .nw-chip-float.a { left:auto; right:-26px; } html[dir="rtl"] .nw-chip-float.b { right:auto; left:-18px; }
html[dir="rtl"] .nw-end a .go svg { transform:scaleX(-1); }
html[dir="rtl"] .nw-fdl { right:auto; left:22px; }
html[dir="rtl"] .nw-snd { margin-left:0; margin-right:auto; }
html[dir="rtl"] .nw-marq .row { animation-direction:reverse; }

@media (prefers-reduced-motion:reduce){
  .nw *, .nw *::before, .nw *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .nw-orn, .nw-hero-txt h1 .w, .nw-garland .wire path { opacity:1 !important; transform:none; stroke-dashoffset:0 !important; }
  .nw-orn { transform:translateX(-50%) !important; }
  .nw .rv { opacity:1; transform:none; }
}

/* fixes after the first look (29 Sep) */
.nw-tile.big > .k, .nw-tile.big > h3, .nw-tile.big > .nw-provs { padding-inline-end:84px; }
html[dir="rtl"] .nw-bellw { right:auto; left:26px; }
html[dir="rtl"] .nw-dl .hangs { right:auto; left:6%; }
@media (max-width:560px){
  .nw-gif { aspect-ratio:1/1.02; padding:12px; }
  .nw-gif .scene { inset:12px; }
  .nw-gif .s0 .body { grid-template-columns:44% 56%; }
  .nw-gif .s0 .sharebtn { font-size:11.5px; padding:9px 6px; }
  .nw-gif .s0 .main .cards { grid-template-columns:repeat(3,1fr); }
  .nw-gif .s0 .main .cards b:nth-child(n+7) { display:none; }
  .nw-bellw { width:52px; right:16px; top:14px; }
  .nw-tile.big > .k, .nw-tile.big > h3, .nw-tile.big > .nw-provs { padding-inline-end:62px; }
}

/* 3D ornaments: a cube on the card, the model only once picked */
.nw-card .c3d { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,#FBEBD6,#F1D2AE); color:var(--ember); }
.nw-card .c3d svg { width:30px; height:30px; animation:nw-spin 9s linear infinite; }
.nw-desk .ld3 { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 16px; border-radius:14px; background:rgba(255,249,239,.9); font-size:13px; color:var(--ink-2); box-shadow:0 14px 26px -18px rgba(0,0,0,.5); }
.nw-desk .ld3 i { width:150px; height:5px; border-radius:4px; background:rgba(58,46,40,.1); overflow:hidden; }
.nw-desk .ld3 b { display:block; height:100%; width:0; background:var(--brand); transition:width .3s; }
/* a laptop screen (800 px tall) sees the download button without scrolling */
@media (min-width:901px){
  .nw-garland { height:232px; }
  .nw-hero-txt { gap:20px; }
  .nw-hero-txt h1 { font-size:clamp(40px,4.5vw,64px); }
  .nw-lede { font-size:18.5px; }
}
@media (min-width:901px) and (max-height:820px){ .nw-garland { height:212px; } .nw-hero-in { margin-top:-18px; } }
.nw-click { margin-top:auto; display:flex; align-items:center; gap:14px; }
.nw-click img { width:46px; transform-origin:50% 0; }
.nw-tile.in .nw-click img { animation:nw-hit 2.8s var(--ease) infinite; }
.nw-click .ar { width:22px; height:22px; color:var(--ink-3); }
.nw-click .app { width:50px; height:50px; border-radius:15px; display:grid; place-items:center; background:var(--ink); color:#fff; transform:scale(.8); opacity:.4; }
.nw-tile.in .nw-click .app { animation:nw-open 2.8s var(--ease) infinite; }
.nw-click .app svg { width:26px; height:26px; }
@keyframes nw-open { 0%,30% { transform:scale(.8); opacity:.4; } 45% { transform:scale(1.08); opacity:1; } 55%,85% { transform:scale(1); opacity:1; } 100% { transform:scale(.8); opacity:.4; } }
html[dir="rtl"] .nw-click .ar { transform:scaleX(-1); }

/* the reel in the laptop (29 Sep): muted until "Play with sound" */
.nw-snd-btn { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; display:inline-flex; align-items:center; gap:9px; padding:11px 18px 11px 14px; border:0; border-radius:999px; cursor:pointer;
  font:600 14px var(--font-head); color:var(--ink); background:rgba(255,249,239,.94); backdrop-filter:blur(8px); box-shadow:0 14px 28px -14px rgba(0,0,0,.65); transition:transform .2s var(--ease), background .2s; }
.nw-snd-btn:hover { transform:translateX(-50%) translateY(-2px); background:#fff; }
.nw-snd-btn svg { width:20px; height:20px; }
.nw-snd-btn[aria-pressed="true"] { background:var(--brand); color:#FFF9EF; }
.nw-snd-btn[aria-pressed="true"] .w { display:none; }
.nw-snd-btn[aria-pressed="true"]::after { content:''; }
.nw-lap .scr { cursor:pointer; }
@media (max-width:560px){ .nw-snd-btn { bottom:16px; padding:9px 14px 9px 11px; font-size:13px; } }

/* the reel (1 Oct): nothing on top of the video; the sound button and the two notes sit in a row under the laptop */
.nw-vidnotes { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:22px; }
.nw-vidnotes .pair { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; }
.nw-vidnotes .nw-chip-float { position:static; animation:none; box-shadow:0 12px 24px -18px rgba(80,40,20,.5); }
.nw-vidnotes .nw-chip-float, .nw-vidnotes .nw-snd-btn { font-size:12.5px; gap:7px; white-space:nowrap; }
.nw-vidnotes .nw-chip-float { padding:6px 12px 6px 7px; border-radius:12px; }
.nw-vidnotes .nw-chip-float i { width:22px; height:22px; border-radius:7px; }
.nw-vidnotes .nw-chip-float i svg { width:13px; height:13px; }
.nw-vidnotes .nw-snd-btn { position:static; transform:none; padding:8px 14px 8px 11px; border:1px solid rgba(232,80,42,.28); background:#FFF9EF; box-shadow:0 12px 24px -18px rgba(80,40,20,.5); }
.nw-vidnotes .nw-snd-btn:hover { transform:translateY(-2px); background:#fff; }
.nw-vidnotes .nw-snd-btn[aria-pressed="true"] { background:var(--brand); color:#FFF9EF; border-color:transparent; }
.nw-vidnotes .nw-snd-btn svg { width:16px; height:16px; color:var(--brand); }
.nw-vidnotes .nw-snd-btn[aria-pressed="true"] svg { color:inherit; }
@media (max-width:560px){ .nw-vidnotes { gap:10px; margin-top:18px; } .nw-vidnotes .pair { gap:6px; } .nw-vidnotes .nw-chip-float, .nw-vidnotes .nw-snd-btn { font-size:11.5px; }
  .nw-vidnotes .nw-chip-float { padding:5px 9px 5px 5px; gap:6px; } .nw-vidnotes .nw-chip-float i { width:19px; height:19px; } .nw-vidnotes .nw-chip-float i svg { width:12px; height:12px; } }

/* the headline (1 Oct): the word that changes (to-do list, reminders, tasks), underlined like a thread */
.nw-hero-txt h1 .nw-rot { display:inline-block; white-space:nowrap; text-decoration:underline; text-decoration-color:var(--brand); text-decoration-thickness:.07em; text-underline-offset:.11em;
  transition:opacity .28s var(--ease), transform .28s var(--ease); }
.nw-hero-txt h1 .nw-rot.out { opacity:0; transform:translateY(-.22em); }
.nw-hero-txt h1 .nw-rot.in { opacity:0; transform:translateY(.22em); transition:none; }