/* ===== Smiley cursors =====
     smile — everywhere; wink — anything clickable (replaces the hand); yum — while mouse is down */
  :root{
    --cur-smile: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23FFE93E" stroke="%23222" stroke-width="1.5"/><circle cx="11" cy="13" r="1.6" fill="%23222"/><circle cx="21" cy="13" r="1.6" fill="%23222"/><path d="M10 19c2 3 4.5 4.5 6 4.5s4-1.5 6-4.5" stroke="%23222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') 16 16;
    --cur-wink: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23FFE93E" stroke="%23222" stroke-width="1.5"/><circle cx="11" cy="13" r="1.6" fill="%23222"/><path d="M18.6 12.8c1.5-1.1 3.3-1.1 4.8 0" stroke="%23222" stroke-width="1.8" fill="none" stroke-linecap="round"/><path d="M10 19c2 3 4.5 4.5 6 4.5s4-1.5 6-4.5" stroke="%23222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') 16 16;
    --cur-yum: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23FFE93E" stroke="%23222" stroke-width="1.5"/><circle cx="11" cy="13" r="1.6" fill="%23222"/><circle cx="21" cy="13" r="1.6" fill="%23222"/><path d="M10 19c2 3 4.5 4.5 6 4.5s4-1.5 6-4.5" stroke="%23222" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M14.5 22c0.6 2.5 1.2 4 1.5 4s0.9-1.5 1.5-4" stroke="%23FF6045" stroke-width="2.4" fill="none" stroke-linecap="round"/></svg>') 16 16;
  }
  :root{
    --cur-smile-xl: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23FFE93E" stroke="%23222" stroke-width="1.5"/><circle cx="11" cy="13" r="1.6" fill="%23222"/><circle cx="21" cy="13" r="1.6" fill="%23222"/><path d="M10 19c2 3 4.5 4.5 6 4.5s4-1.5 6-4.5" stroke="%23222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') 32 32;
  }
  body{ cursor: var(--cur-smile), auto; }
  *{ cursor:inherit; } /* no element falls back to a system cursor (finger, I-beam, arrow) */
  a, button, input, select, textarea, video{ cursor: var(--cur-wink), pointer; }
  body.clicking, body.clicking *{ cursor: var(--cur-yum), auto !important; }
  /* shake-to-find: the smiley grows while the mouse is being shaken */
  body.cursor-big, body.cursor-big *{ cursor: var(--cur-smile-xl), auto !important; }
  /* keep every cursor variant rasterized so swaps never flash the system arrow */
  #cur-preload{ position:fixed; top:0; left:0; width:3px; height:1px; opacity:0; pointer-events:none; display:flex; }
  #cur-preload i{ width:1px; height:1px; }
  #cur-preload i:nth-child(1){ cursor:var(--cur-smile-xl), auto; }
  #cur-preload i:nth-child(2){ cursor:var(--cur-wink), auto; }
  #cur-preload i:nth-child(3){ cursor:var(--cur-yum), auto; }
  /* ===== Color hierarchy =====
     1. --white     #FFFFFF hero     — dominant: wallpaper, windows, all surfaces
     2. --primary   #5F3DFF violet   — lead accent: headings, buttons, links, icons, selected tools
     3. --secondary #96FFD2 mint     — support accent: chips, playhead/timecode on dark panels
     4. --highlight #FFE93E yellow   — emphasis accent: cursor, keyframes, small moments
     5. --hot       #FF6045 coral    — action accent: hovers, active tools, alerts
     6. --muted     #7F75AB lavender — quiet accent: secondary text, metadata, labels
     --ink is the derived near-black for body text on white. */
  :root{
    --primary:#5F3DFF;
    --secondary:#96FFD2;
    --highlight:#FFE93E;
    --hot:#FF6045;
    --muted:#7F75AB;
    --ink:#28204a;
    --white:#ffffff;
    --off:#f5f4fa;
    --wall:#f1eefa;        /* desktop behind the stickers */
    --surface:#ffffff;     /* window bodies */
    --surface2:#f5f4fa;    /* titlebars */
    --line:#e7e9e7;        /* hairline borders */
    --behance:#1769FF;     /* Behance signature blue */
    --figma:#A259FF;       /* Figma purple */
    /* app chrome (AE / Figma) — light values, overridden in dark */
    --app-bg:#f2f2f5;
    --app-deep:#e8e8ee;
    --app-panel:#e2e2e9;
    --app-panel2:#dcdce4;
    --app-titlebar:#e6e6ec;
    --app-btn:#cfcfd9;
    --app-btnh:#c2c2cf;
    --app-hover:#d6d6df;
    --app-line:#bfbfcc;
    --app-canvas:#e5e5e5;
    --app-text:#2c2c34;
    --app-text2:#55555f;
    --app-text3:#84848f;
    --app-hint:rgba(0,0,0,0.4);
    --app-accent:#0ca678;
  }
  body.dark{
    --wall:#16121f;
    --surface:#221c36;
    --surface2:#2b2444;
    --line:#3a3357;
    --ink:#efeaff;
    --muted:#a79ed3;
    --app-bg:#1d1d1d;
    --app-deep:#161616;
    --app-panel:#232323;
    --app-panel2:#2b2b2b;
    --app-titlebar:#2b2b2b;
    --app-btn:#3a3a3a;
    --app-btnh:#4a4a4a;
    --app-hover:#2a2a2a;
    --app-line:#111;
    --app-canvas:#2e2e33;
    --app-text:#d6d6d6;
    --app-text2:#a0a0a0;
    --app-text3:#7a7a7a;
    --app-hint:rgba(255,255,255,0.45);
    --app-accent:var(--secondary);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{
    height:100%; font-family:'Inter',sans-serif;
    background-color:var(--wall);
    overflow:hidden; color:var(--ink);
  }
  #menubar{
    position:fixed; top:0; left:0; right:0; height:36px;
    background:rgba(255,255,255,0.85); backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; font-size:13px; font-weight:500;
    z-index:1000; border-bottom:1px solid rgba(0,0,0,0.05);
  }
  #menubar .left{display:flex; align-items:center; gap:14px;}
  #menubar .logo{
    width:20px; height:20px; border-radius:6px; background:var(--primary);
    display:flex; align-items:center; justify-content:center;
  }
  #menubar .logo svg{width:14px; height:14px;}
  #menubar .right{display:flex; gap:14px; opacity:0.75; align-items:center;}
  #theme-toggle{ background:none; border:none; font-size:14px; line-height:1; padding:0; }
  #desktop-icons{
    position:fixed; top:56px; left:24px;
    display:flex; flex-direction:column; gap:22px; z-index:1;
  }
  .dicon{
    width:76px; text-align:center; cursor:var(--cur-wink), pointer;
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .dicon .box{
    width:44px; height:44px; border-radius:10px;
    background:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-family:'Unbounded'; font-weight:600; font-size:15px; color:#fff;
    overflow:hidden;
  }
  .dicon .box svg{ width:100%; height:100%; display:block; }
  .dicon span{ color:var(--ink); font-size:11px; background:rgba(255,255,255,0.78); padding:2px 7px; border-radius:7px; }
  .window{
    position:fixed; top:50%; left:50%;
    transform:translate(-50%,-46%) scale(0.96);
    width:min(820px, 94vw); max-height:84vh;
    background:var(--surface); border-radius:14px;
    box-shadow:0 30px 60px rgba(0,0,0,0.35);
    display:none; flex-direction:column; overflow:hidden;
    z-index:200; opacity:0;
    transition:opacity .22s ease, transform .22s ease;
  }
  .window.open{ display:flex; opacity:1; }
  .window.positioned{ transform:none; }
  .window.maximized{
    top:44px !important; left:12px !important;
    width:calc(100vw - 24px) !important;
    height:calc(100vh - 100px) !important;
    max-height:calc(100vh - 100px) !important;
    transform:none !important;
  }
  .titlebar{
    display:flex; align-items:center; gap:8px;
    padding:11px 14px; background:var(--surface2);
    border-bottom:1px solid var(--line); cursor:var(--cur-wink), grab; user-select:none;
  }
  .titlebar:active{ cursor:var(--cur-yum), grabbing; }
  .window.dark-app .titlebar{ background:var(--app-titlebar); border-bottom:1px solid var(--app-line); }
  .window.dark-app .titlebar .name{ color:var(--app-text2); }
  .traffic{ display:flex; gap:8px; }
  .traffic span{ width:12px; height:12px; border-radius:50%; display:inline-block; cursor:var(--cur-wink), pointer;}
  .traffic .c1{ background:#ff5f57; }
  .traffic .c2{ background:#febc2e; }
  .traffic .c3{ background:#28c840; }
  .titlebar .name{ flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--muted); pointer-events:none; }
  .process-btn{ background:none; border:none; cursor:var(--cur-wink), pointer; font-size:14px; opacity:0.45; padding:0 2px; line-height:1; }
  .process-btn:hover{ opacity:1; }
  .win-content{ padding:32px 40px 40px; overflow-y:auto; }
  .window.maximized .win-content{ height:100%; }
  .win-content h1{ font-family:'Unbounded'; font-weight:800; font-size:28px; color:var(--primary); margin-bottom:6px; }
  .win-content .tag{
    font-size:13px; color:var(--hot); font-weight:600;
    text-transform:uppercase; letter-spacing:0.06em; margin-bottom:22px;
  }
  .win-content p{ font-size:15px; line-height:1.65; margin-bottom:16px; color:var(--ink);}
  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
  .chip{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px; background:var(--secondary); color:#28204a; }
  .proj-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:10px;}
  .proj-card{
    border:1px solid var(--line); border-radius:10px; padding:16px;
    text-decoration:none; color:var(--ink);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .proj-card:hover{ transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,0.08);}
  .proj-card .ptitle{ font-family:'Unbounded'; font-weight:600; font-size:14px; margin-bottom:6px;}
  .proj-card .pdesc{ font-size:12px; color:var(--muted); line-height:1.5;}
  .btn{
    display:inline-block; margin-top:6px; background:var(--primary); color:#fff;
    text-decoration:none; font-size:13px; font-weight:600; padding:10px 20px;
    border-radius:8px; border:none; cursor:var(--cur-wink), pointer; font-family:'Inter';
  }
  .contact-list a{ color:var(--primary); font-weight:600; }
  .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; }
  .gtile{
    aspect-ratio:1/1; border-radius:8px; display:flex; align-items:flex-end;
    padding:8px; font-size:10px; font-weight:600; color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.5);
    background-size:cover; background-position:center;
    cursor:var(--cur-wink), pointer; transition:transform .15s ease;
  }
  .gtile:hover{ transform:scale(1.04); }
  #ctxmenu{
    position:fixed; display:none; z-index:5000;
    background:rgba(250,250,250,0.97); backdrop-filter:blur(10px);
    border:1px solid #d5d5d5; border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    padding:5px; min-width:200px;
  }
  #ctxmenu .item{ font-size:13px; color:#222; padding:7px 12px; border-radius:5px; cursor:var(--cur-wink), pointer; }
  #ctxmenu .item:hover{ background:var(--primary); color:#fff; }
  .docx-window .titlebar{ background:#2b579a; border-bottom:1px solid #1e3f73; }
  .docx-window .titlebar .name{ color:#fff; }
  .docx-toolbar{
    background:#f3f2f1; border-bottom:1px solid #e1dfdd;
    padding:7px 16px; display:flex; gap:16px; font-size:11.5px; color:var(--app-text3); flex-shrink:0;
  }
  .docx-toolbar b{ color:#2b579a; font-weight:600; }
  .docx-body{ background:#e8e6e3; overflow-y:auto; padding:22px; flex:1; }
  .docx-page{
    background:#fff; max-width:600px; margin:0 auto;
    padding:52px 58px; box-shadow:0 2px 8px rgba(0,0,0,0.18);
    font-family:Georgia, 'Times New Roman', serif;
    color:#222; font-size:14px; line-height:1.8;
  }
  .docx-page h2{ font-size:21px; font-weight:700; margin-bottom:4px; color:#111; }
  .docx-page .doc-meta{ font-size:11.5px; color:var(--app-text3); margin-bottom:22px; font-style:italic; }
  .docx-page h3{ font-size:15px; margin:20px 0 6px; color:#2b579a; }
  .docx-page p{ margin-bottom:12px; font-size:14px; color:#222; line-height:1.8; }
  #win-ae .win-content{ padding:0; background:var(--app-bg); color:var(--app-text); display:flex; flex-direction:column; height:70vh; }
  .ae-screen{ display:none; flex:1; min-height:0; flex-direction:column; }
  .ae-screen.active{ display:flex; }
  .ae-home{ display:flex; flex:1; min-height:0; }
  .ae-side{ width:170px; background:var(--app-deep); padding:16px 12px; border-right:1px solid var(--app-line); flex-shrink:0; }
  .ae-newproj{
    background:var(--primary); color:#fff; border:none; border-radius:16px;
    font-size:12px; font-weight:600; padding:8px 18px; cursor:var(--cur-wink), pointer;
    font-family:'Inter'; margin-bottom:12px;
  }
  .ae-side .link{ font-size:12px; color:var(--app-text); padding:7px 6px; }
  .ae-side .link.dim{ color:var(--app-text3); }
  .ae-side .divider{ border-top:1px solid var(--app-line); margin:12px 0; }
  .ae-side .section{ font-size:10px; color:var(--app-text3); letter-spacing:0.08em; margin:8px 6px 4px; }
  .ae-recent{ flex:1; padding:22px 26px; overflow-y:auto; min-width:0; }
  .ae-recent h2{ font-size:20px; font-weight:500; color:var(--app-text); margin-bottom:18px; }
  .ae-cols{
    display:grid; grid-template-columns:1fr 60px 100px 70px;
    font-size:10px; color:var(--app-text3); letter-spacing:0.08em;
    padding:0 10px 8px; border-bottom:1px solid var(--app-line);
  }
  .ae-file{
    display:grid; grid-template-columns:1fr 60px 100px 70px;
    align-items:center; padding:13px 10px;
    border-bottom:1px solid var(--app-hover);
    font-size:13px; color:var(--app-text); cursor:var(--cur-wink), pointer; border-radius:4px;
  }
  .ae-file:hover{ background:var(--app-hover); }
  .ae-file .meta{ font-size:11px; color:var(--app-text3); }
  .ae-proj{ flex:1; min-height:0; flex-direction:column; }
  .ae-topbar{
    display:flex; align-items:center; gap:10px;
    background:var(--app-panel2); padding:6px 10px; border-bottom:1px solid var(--app-line);
    font-size:11px; color:var(--app-text2); flex-shrink:0;
  }
  .ae-topbar .tool{ width:18px; height:18px; border-radius:3px; background:var(--app-btn); }
  .ae-topbar .tool.sel{ background:var(--primary); }
  .ae-back{
    background:none; border:1px solid var(--app-line); color:var(--app-text2); font-size:11px;
    border-radius:4px; padding:3px 10px; cursor:var(--cur-wink), pointer; font-family:'Inter';
  }
  .ae-back:hover{ border-color:var(--app-text3); color:var(--app-text); }
  .ae-main{ display:flex; flex:1; min-height:0; }
  .ae-projpanel{
    width:185px; background:var(--app-panel); border-right:1px solid var(--app-line);
    padding:8px; overflow-y:auto; flex-shrink:0;
  }
  .ae-projpanel .ph{ font-size:10px; color:var(--app-text3); margin-bottom:6px; padding:0 4px; }
  .ae-asset{ font-size:10.5px; color:var(--app-text2); padding:4px 6px; border-radius:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ae-asset:hover{ background:var(--app-hover); }
  .ae-asset.folder::before{ content:"▸ "; color:var(--app-text3); }
  .ae-viewerzone{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .ae-comptabs{
    background:var(--app-panel); border-bottom:1px solid var(--app-line); padding:5px 10px;
    font-size:11px; color:var(--app-text2); display:flex; gap:14px; flex-shrink:0;
  }
  .ae-comptabs .active-tab{ color:var(--app-text); }
  .ae-viewer{
    flex:1; background:var(--app-deep); display:flex; align-items:center;
    justify-content:center; min-height:150px; position:relative; padding:10px;
  }
  .ae-comp{
    width:92%; max-width:1100px; max-height:100%;
    aspect-ratio:16/9; background:#000;
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .ae-comp video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; z-index:2; background:#000;
  }
  .ae-fallback{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; }
  .ae-reel-text{
    color:#fff; font-size:14px; font-weight:500; letter-spacing:0.02em;
    display:flex; align-items:center; gap:7px;
    animation:reelPulse 4s ease-in-out infinite;
  }
  @keyframes reelPulse{
    0%,100%{ transform:scale(1); opacity:1; }
    45%{ transform:scale(1.06); opacity:1; }
    50%{ opacity:0.25; }
    55%{ transform:scale(1); opacity:1; }
  }
  .ae-reel-bar{
    position:absolute; left:0; bottom:0; height:3px; background:var(--secondary);
    animation:reelBar 6s linear infinite;
  }
  @keyframes reelBar{ 0%{ width:0; } 100%{ width:100%; } }
  .ae-swipe{
    position:absolute; top:0; bottom:0; width:45%;
    background:linear-gradient(100deg, transparent, rgba(150,255,210,0.16), transparent);
    animation:swipe 6s linear infinite;
  }
  @keyframes swipe{ 0%{ left:-50%; } 100%{ left:110%; } }
  .ae-viewinfo{
    background:var(--app-panel); border-top:1px solid var(--app-line); padding:5px 12px;
    font-size:10.5px; color:var(--app-text3); display:flex; gap:16px; flex-shrink:0;
  }
  .ae-tc{ color:var(--app-accent); font-weight:600; }
  .ae-hintkey{ margin-left:auto; color:var(--app-text3); }
  .ae-tl{
    height:150px; background:var(--app-deep); border-top:1px solid var(--app-line);
    display:flex; flex-shrink:0; overflow:hidden;
  }
  .ae-tl-names{ width:185px; border-right:1px solid var(--app-line); overflow:hidden; flex-shrink:0; }
  .ae-tl-names .hdr{
    height:24px; background:var(--app-panel); border-bottom:1px solid var(--app-line);
    font-size:9.5px; color:var(--app-text3); display:flex; align-items:center; padding:0 8px;
  }
  .ae-lrow{
    height:21px; display:flex; align-items:center; gap:6px;
    padding:0 8px; font-size:10px; color:var(--app-text2);
    border-bottom:1px solid var(--app-line);
  }
  .ae-lrow .eye{ width:8px; height:8px; border-radius:50%; background:var(--app-text3); flex-shrink:0; }
  .ae-lrow .lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ae-lrow .colorchip{ width:7px; height:7px; border-radius:2px; flex-shrink:0; }
  .ae-tl-tracks{ flex:1; position:relative; overflow:hidden; cursor:var(--cur-wink), pointer; }
  .ae-ruler{
    height:24px; background:var(--app-panel); border-bottom:1px solid var(--app-line);
    font-size:9.5px; color:var(--app-text3); position:relative; overflow:hidden;
  }
  .ae-ruler .tick{
    position:absolute; top:0; bottom:0; display:flex; align-items:center;
    border-left:1px solid var(--app-btn); padding-left:3px;
  }
  .ae-trow{ height:21px; border-bottom:1px solid var(--app-line); position:relative; }
  .ae-bar{ position:absolute; top:4px; height:13px; border-radius:2px; opacity:0.85; }
  .kf{
    position:absolute; top:7px; width:7px; height:7px; background:var(--highlight);
    transform:rotate(45deg); border:1px solid #000;
  }
  .ae-ph{
    position:absolute; top:0; bottom:0; width:1.6px; background:var(--app-accent); z-index:5;
    left:0%; cursor:var(--cur-wink), ew-resize;
  }
  .ae-ph::before{
    content:""; position:absolute; top:0; left:-6px;
    border-left:7px solid transparent; border-right:7px solid transparent;
    border-top:8px solid var(--app-accent);
  }
  .ae-ph::after{ content:""; position:absolute; top:0; bottom:0; left:-7px; right:-7px; }
  .draw-topbar{
    display:flex; align-items:center; gap:8px; background:var(--app-panel2);
    padding:7px 12px; border-bottom:1px solid var(--app-line); flex-shrink:0; flex-wrap:wrap;
  }
  .draw-topbar .appname{ font-size:11px; color:var(--app-text2); margin-right:6px; }
  .toolbtn{
    background:var(--app-btn); border:1px solid var(--app-line); color:var(--app-text); font-size:11px;
    border-radius:4px; padding:5px 11px; cursor:var(--cur-wink), pointer; font-family:'Inter';
  }
  .toolbtn.sel{ background:var(--hot); color:#fff; border-color:var(--hot); font-weight:600; }
  .swatch{ width:20px; height:20px; border-radius:4px; cursor:var(--cur-wink), pointer; border:2px solid transparent; flex-shrink:0; }
  .swatch.sel{ border-color:#fff; }
  .draw-body{ flex:1; display:flex; min-height:0; }
  .draw-layers{
    width:150px; background:var(--app-hover); border-right:1px solid var(--app-line);
    padding:8px; flex-shrink:0; font-size:10px; color:var(--app-text2); overflow-y:auto;
  }
  .draw-layers .row{ padding:5px 6px; background:var(--app-btn); border-radius:3px; margin-bottom:3px; color:var(--app-text2); }
  .draw-canvaswrap{
    flex:1; background:var(--app-canvas); display:flex; align-items:center;
    justify-content:center; padding:14px; min-width:0; position:relative;
  }
  .draw-canvaswrap canvas{
    background:#fff; border-radius:2px; box-shadow:0 4px 18px rgba(0,0,0,0.4);
    cursor:var(--cur-wink), crosshair; max-width:100%; max-height:100%; touch-action:none;
  }
  .draw-hint{ position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:10px; color:var(--app-hint); pointer-events:none; }
  #win-figma .win-content{ padding:0; background:var(--app-bg); display:flex; flex-direction:column; height:66vh; }
  #win-figma .draw-topbar{ background:var(--app-panel2); }
  #win-figma .toolbtn.sel{ background:#0d99ff; color:#fff; border-color:#0d99ff; }
  #win-figma .draw-layers{ background:var(--app-panel2); }
  #win-figma .draw-layers .frame-row{ cursor:var(--cur-wink), pointer; }
  #win-figma .draw-layers .frame-row:hover{ background:var(--app-hover); }
  #win-figma .draw-layers .frame-row.active{ background:#2e2853; color:var(--secondary); }
  .fig-nav{
    background:var(--app-btn); border:1px solid var(--app-line); color:var(--app-text); font-size:12px;
    border-radius:4px; padding:5px 10px; cursor:var(--cur-wink), pointer; font-family:'Inter';
  }
  .fig-nav:hover{ background:var(--app-btnh); }
  .fig-framecount{ font-size:11px; color:var(--app-text2); min-width:44px; text-align:center; }
  @media (max-width:640px){
    .gallery-grid{ grid-template-columns:repeat(3,1fr); }
    .proj-grid{ grid-template-columns:1fr; }
    .win-content{ padding:24px 20px 30px; }
    .ae-side, .ae-projpanel, .draw-layers{ display:none; }
    .ae-tl-names{ width:110px; }
    #desktop-icons{ display:none; }
    .docx-page{ padding:32px 24px; }
  }
  #dock-wrap{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:900; }
  #dock{
    display:flex; align-items:flex-end; gap:12px;
    background:rgba(255,255,255,0.75); backdrop-filter:blur(16px);
    border:1px solid rgba(40,32,74,0.12);
    box-shadow:0 12px 30px rgba(40,32,74,0.14);
    padding:10px 16px; border-radius:20px;
  }
  .app{
    width:50px; height:50px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Unbounded'; font-weight:700; font-size:15px;
    cursor:var(--cur-wink), pointer; color:#fff; overflow:hidden;
    transition:transform .18s ease; position:relative;
  }
  .app:hover{ transform:translateY(-10px) scale(1.08); }
  .app::after{
    content:attr(data-label);
    position:absolute; bottom:62px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,0.75); color:#fff; font-family:'Inter'; font-weight:500;
    font-size:11px; padding:4px 9px; border-radius:6px;
    white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease;
  }
  .app:hover::after{ opacity:1; }
  .app svg{ width:100%; height:100%; display:block; }
  .app.ae{ background:var(--primary); }
  .app.figma{ background:var(--figma); }
  .app.behance{ background:var(--behance); }
  #win-behance .btn{ background:var(--behance); }
  /* ===== Dark mode ===== */
  body.dark #menubar{ background:rgba(22,18,34,0.85); border-bottom:1px solid rgba(255,255,255,0.07); }
  body.dark .window{ box-shadow:0 30px 60px rgba(0,0,0,0.6); }
  body.dark .win-content h1{ color:#9b81ff; }
  body.dark .contact-list a{ color:#9b81ff; }
  body.dark .proj-card:hover{ box-shadow:0 10px 20px rgba(0,0,0,0.4); }
  body.dark #ctxmenu{ background:rgba(40,34,62,0.97); border-color:#443c66; }
  body.dark #ctxmenu .item{ color:#e6e0fa; }
  body.dark .docx-toolbar{ background:#2b2735; border-bottom:1px solid #191521; color:#9a93ad; }
  body.dark .docx-body{ background:#1b1724; }
  body.dark #dock{ background:rgba(30,25,48,0.7); border:1px solid rgba(255,255,255,0.12); box-shadow:0 12px 30px rgba(0,0,0,0.45); }
  body.dark .dicon span{ background:rgba(22,18,34,0.75); }
  #confetti{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:3000; }
  /* ===== Idle nudge ===== */
  #nudge{
    position:fixed; z-index:2500; transform:translateX(-50%);
    background:var(--primary); color:#fff; font-family:'Inter'; font-size:12px; font-weight:600;
    padding:7px 12px; border-radius:10px; display:none; pointer-events:none; white-space:nowrap;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    animation:nudgeBounce 1s ease-in-out infinite;
  }
  #nudge::after{
    content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:var(--primary);
  }
  @keyframes nudgeBounce{ 0%,100%{ margin-top:0; } 50%{ margin-top:-7px; } }
  @media (max-width:600px){
    .app{ width:40px; height:40px; font-size:12px; }
    #dock{ gap:7px; padding:8px 10px; }
    .app::after{ display:none; }
  }
  #menubar .backlink{ color:var(--ink); text-decoration:none; font-weight:600; }
  #menubar .backlink:hover{ color:var(--primary); }
  /* ===== Window resize handles (inside edges — .window clips overflow) ===== */
  .rz{ position:absolute; z-index:60; }
  .rz-t{ top:0; left:14px; right:14px; height:6px; cursor:var(--cur-wink), ns-resize; }
  .rz-b{ bottom:0; left:14px; right:14px; height:6px; cursor:var(--cur-wink), ns-resize; }
  .rz-l{ left:0; top:14px; bottom:14px; width:6px; cursor:var(--cur-wink), ew-resize; }
  .rz-r{ right:0; top:14px; bottom:14px; width:6px; cursor:var(--cur-wink), ew-resize; }
  .rz-tl{ top:0; left:0; width:14px; height:14px; cursor:var(--cur-wink), nwse-resize; }
  .rz-br{ bottom:0; right:0; width:14px; height:14px; cursor:var(--cur-wink), nwse-resize; }
  .rz-tr{ top:0; right:0; width:14px; height:14px; cursor:var(--cur-wink), nesw-resize; }
  .rz-bl{ bottom:0; left:0; width:14px; height:14px; cursor:var(--cur-wink), nesw-resize; }
  .window.maximized .rz{ display:none; }
  /* once resized, the body fills whatever size the window is */
  .window.resized{ max-height:none; }
  .window.resized .win-content{ height:auto !important; max-height:none !important; flex:1; min-height:0; }