/* AnanyaOS Visual System v1.0 */

    :root {
      /* ── AnanyaOS Visual System v1.0 — Studio Ghibli Cozy Desk ── */

      /* Surfaces */
      --color-bg:               #E8C4D8;
      --color-surface:          rgba(252, 226, 219, 0.55);
      --color-surface-raised:   rgba(226, 209, 249, 0.75);
      --color-surface-solid:    #C5C6E7;

      /* Accents */
      --color-accent:           #6E5A9E;
      --color-accent-hover:     #8E9AAF;
      --color-accent-pressed:   #4A3A7A;
      --color-accent-secondary: #8E9AAF;
      --color-accent-soft:      #E2D1F9;

      /* Text */
      --color-text:             #3D3D3D;
      --color-text-muted:       #7B8FA1;
      --color-text-on-accent:   #FFFFFF;

      /* Borders */
      --color-border:           rgba(0,0,0,0.55);
      --color-border-active:    rgba(0,0,0,0.78);
      --color-border-subtle:    rgba(0,0,0,0.18);

      /* Terminal */
      --color-terminal-bg:      #2D2440;
      --color-terminal-text:    #FEFAE0;
      --color-terminal-accent:  #E5989B;

      /* ── legacy aliases (used throughout) ── */
      --bg:           #F9D5E5;
      --accent:       #6E5A9E;
      --accent-h:     #8E9AAF;
      --accent-p:     #4A3A7A;
      --accent2:      #8E9AAF;
      --text:         #3D3D3D;
      --text-dark:    #2D2440;
      --muted:        #7B8FA1;
      --term-text:    #FEFAE0;
      --term-accent:  #E5989B;
      --sans:         'Inter', system-ui, sans-serif;
      --mono:         'JetBrains Mono', monospace;
      --hand:         'Caveat', cursive;
      --ease:         cubic-bezier(0.16, 1, 0.3, 1);
      --ease2:        cubic-bezier(0.45, 0, 0.55, 1);
      --glass-bg:     rgba(252, 226, 219, 0.55);
      --glass-blur:   blur(16px) saturate(1.5) brightness(1.05);
      --glass-border: rgba(110, 90, 158, 0.25);
      --glass-hi:     rgba(255, 255, 255, 0.60);
      --glass-shadow: rgba(110, 90, 158, 0.12);
    }
    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
    html { interpolate-size: allow-keywords; zoom: 1.1; }
    html,body { width:100%; height:100%; overflow:hidden; font-family:var(--sans); color:var(--text); user-select:none; }
    .win .body, .win .body * { user-select:text; }
    button { font-family:var(--sans); cursor:pointer; border:none; }
    input,textarea { font-family:var(--sans); }

    /* ── Focus indicators — keyboard users only ── */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    [tabindex="0"]:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 4px;
    }
    ::-webkit-scrollbar { width:4px; }
    ::-webkit-scrollbar-thumb { background:rgba(110,90,158,0.32); border-radius:2px; }
    ::-webkit-scrollbar-track { background:transparent; }

    #desktop {
      position:fixed; inset:0;
      background-color: #F0C5D8;
      background-image:
        /* Dreamy sky: lavender wash from top */
        linear-gradient(175deg, rgba(197,178,230,0.55) 0%, rgba(252,215,225,0.10) 48%, rgba(249,180,210,0.25) 100%),
        /* Cream/ivory soft bloom at center */
        radial-gradient(ellipse 60% 55% at 52% 44%, rgba(254,250,235,0.50) 0%, transparent 68%),
        /* Warm peach glow from bottom */
        radial-gradient(ellipse 95% 50% at 50% 115%, rgba(252,210,220,0.70) 0%, transparent 55%),
        /* Top-left soft pink bloom */
        radial-gradient(ellipse 60% 50% at -5% 5%,  rgba(249,213,229,0.60) 0%, transparent 55%),
        /* Top-right lavender bloom */
        radial-gradient(ellipse 55% 45% at 108% 4%, rgba(197,178,230,0.55) 0%, transparent 55%),
        /* Bottom-left forest green hint */
        radial-gradient(ellipse 42% 35% at -4% 102%, rgba(131,175,116,0.20) 0%, transparent 55%),
        /* Bottom-right periwinkle glow */
        radial-gradient(ellipse 45% 38% at 106% 98%, rgba(197,198,231,0.30) 0%, transparent 55%),
        /* Graph paper grid */
        linear-gradient(rgba(197,198,231,0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(197,198,231,0.28) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 20px 20px, 20px 20px;
    }
    #desktop::before {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
      opacity:0.055; mix-blend-mode:soft-light;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.70' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size:256px 256px;
      animation:breathe 12s ease-in-out infinite;
    }
    @keyframes breathe { 0%,100%{opacity:.04} 50%{opacity:.07} }

    #menubar {
      position:fixed; top:0; left:0; right:0; height:28px; z-index:900;
      display:flex; align-items:center; justify-content:space-between; padding:0 16px;
      background: rgba(226, 209, 249, 0.82);
      backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
      border-bottom: 1px solid rgba(0,0,0,0.18);
      box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    }
    .mb-left  { display:flex; align-items:center; gap:16px; }
    .mb-brand { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--text); letter-spacing:-0.02em; }
    .mb-sep   { color:var(--muted); font-size:10px; }
    .mb-win   { font-size:13px; color:var(--muted); }
    .mb-right { display:flex; align-items:center; gap:10px; }
    #mb-date  { font-family:var(--mono); font-size:13px; font-weight:400; color:var(--color-text-muted); }
    #mb-dot   { font-size:10px; color:var(--color-text-muted); opacity:0.5; }
    #mb-time  { font-family:var(--mono); font-size:13px; font-weight:400; color:var(--color-text-muted); }

    #icons { position:fixed; top:52px; left:26px; z-index:10; display:grid; grid-template-columns:repeat(2, 96px); gap:14px 8px; }
    .icon-col { display:contents; }
    .icon { display:flex; flex-direction:column; align-items:center; gap:5px; width:96px; cursor:pointer; padding:6px 4px; border-radius:9px; transition:background 110ms; position:relative; background:none; }
    .icon:hover { background:rgba(110,90,158,0.12); }
    .icon-img { width:80px; height:80px; display:flex; align-items:center; justify-content:center; transition:transform 130ms var(--ease); }
    .icon:hover .icon-img { transform:translateY(-4px) scale(1.05); filter:drop-shadow(0 6px 12px rgba(110,90,158,0.22)); }
    .icon:active .icon-img { transform:translateY(-1px) scale(0.96); }
    .icon-img img { width:60px; height:60px; object-fit:contain; pointer-events:none; }

    .icon-lbl { font-size:11px; font-family:var(--mono); color:var(--text); text-align:center; line-height:1.3; text-shadow:0 1px 3px rgba(249,213,229,0.80); }

    .win {
      position:fixed; display:flex; flex-direction:column; overflow:hidden; border-radius:14px;
      background: linear-gradient(145deg, rgba(254,250,224,0.55) 0%, rgba(226,209,249,0.36) 100%);
      backdrop-filter: blur(16px) saturate(1.5) brightness(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.5) brightness(1.05);
      border: 2px solid rgba(0,0,0,0.55);
      box-shadow:
        0 8px 32px rgba(110, 90, 158, 0.12),
        0 2px 8px rgba(110, 90, 158, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.60);
      animation: wopen 220ms var(--ease) both;
    }
    .win::before {
      content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:2; pointer-events:none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
    }
    .win::after {
      content:''; position:absolute; top:0; left:0; width:1px; height:100%; z-index:2; pointer-events:none;
      background: linear-gradient(180deg, rgba(255,255,255,0.80), transparent, rgba(255,255,255,0.25));
    }
    .win.active {
      border-color: rgba(0,0,0,0.78);
      box-shadow:
        0 16px 48px rgba(110, 90, 158, 0.18),
        0 4px 16px rgba(110, 90, 158, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
    }
    @keyframes wopen  { from{opacity:0;transform:scale(0.90)} to{opacity:1;transform:scale(1)} }
    @keyframes wclose { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(0.92)} }

    .titlebar {
      height:42px; flex-shrink:0; display:flex; align-items:center; padding:0 14px; gap:10px; cursor:move;
      position:relative;
      background: rgba(226, 209, 249, 0.82);
      backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
      border-bottom: 2px solid rgba(0,0,0,0.30);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }
    .tls { display:flex; gap:7px; flex-shrink:0; position:relative; z-index:1; }
    .tl  { width:12px; height:12px; border-radius:50%; cursor:pointer; border:1.5px solid rgba(0,0,0,0.40); box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.30); transition:opacity 100ms, transform 100ms; display:flex; align-items:center; justify-content:center; }
    .tl::before { content:''; opacity:0; transition:opacity 120ms; }
    .tl:hover { opacity:1; transform:scale(1.08); }
    .tl:hover::before { opacity:1; }
    .tl.close { background:#FF5F57; }
    .tl.mini  { background:#FFBD2E; }
    .tl.maxi  { background:#28C840; }
    .tl.close::before, .tl.mini::before, .tl.maxi::before {
      content:''; display:block; width:7px; height:7px;
      background-size:contain; background-repeat:no-repeat; background-position:center;
    }
    .tl.close::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='%234d0f0a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
    .tl.mini::before  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5H8' stroke='%23614000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
    .tl.maxi::before  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 7.5L2 8L2.5 8M8 2.5L8 2L7.5 2M2 7.5L7.5 2M2.5 8L8 2.5' stroke='%23004d10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .wtitle   { font-size:12px; font-weight:500; font-family:var(--mono); color:var(--text); opacity:0.85; position:absolute; left:0; right:0; text-align:center; pointer-events:none; }
    .wtitle-r { font-size:12px; color:var(--accent); font-family:var(--mono); cursor:pointer; margin-left:auto; position:relative; z-index:1; }
    .wtitle-r:hover { color:var(--accent-h); }
    .wcontent { flex:1; overflow-y:auto; padding:22px; }
    .wcontent.noPad { padding:0; overflow:hidden; display:flex; flex-direction:column; }
    .div { border:none; border-top:1px solid rgba(0,0,0,0.18); margin:14px 0; }
    .lbl { font-size:10px; font-weight:700; letter-spacing:0.10em; color:var(--accent); text-transform:uppercase; margin-bottom:5px; }

    .a-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
    .a-avatar { width:52px; height:52px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#D4A5A5 0%,#E2D1F9 100%); display:flex; align-items:center; justify-content:center; border:2px solid rgba(254,250,224,0.65); box-shadow:0 2px 10px rgba(110,90,158,0.25); font-size:15px; font-weight:700; color:#fff; }
    .a-name  { font-size:17px; font-weight:700; letter-spacing:-0.02em; }
    .a-role  { font-size:13px; color:var(--muted); margin-top:2px; }
    .a-proof { font-size:13px; font-weight:600; line-height:1.65; margin-bottom:10px; }
    .a-phil  { font-size:13px; color:var(--muted); line-height:1.75; margin-bottom:14px; }
    .a-meta  { font-size:12px; color:var(--muted); margin-bottom:4px; }
    .a-meta strong { color:var(--text); font-weight:500; }
    .a-btns  { display:flex; gap:9px; margin-top:18px; }

    /* ── shared button base ── */
    .btn-p, .btn-s, .btn-ink, .btn-ghost {
      display:inline-flex; align-items:center; gap:6px;
      border-radius:9999px; font-family:var(--sans); font-size:13px;
      padding:9px 20px; cursor:pointer; white-space:nowrap;
      border-style:solid; border-width:2px;
      transition:transform 100ms var(--ease), box-shadow 100ms var(--ease), background 100ms var(--ease), border-color 100ms var(--ease);
    }

    /* ── Deep Lavender — primary CTA (form submit, single-action contexts) ── */
    .btn-p {
      font-weight:600;
      background:var(--accent);
      color:#FFFFFF;
      border-color:rgba(30,20,60,0.55);
      box-shadow:0 4px 14px rgba(110,90,158,0.28), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.22);
    }
    .btn-p:hover  { background:var(--accent-h); transform:translateY(-2px); box-shadow:0 8px 20px rgba(110,90,158,0.32), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18); }
    .btn-p:active { background:var(--accent-p); transform:translateY(0);    box-shadow:0 2px 6px rgba(110,90,158,0.20),  inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.28); }

    /* ── Periwinkle — secondary (paired with lavender primary) ── */
    .btn-s {
      font-weight:500;
      background:#C5C6E7;
      color:var(--text);
      border-color:rgba(0,0,0,0.45);
      box-shadow:0 2px 8px rgba(110,90,158,0.12), inset 0 1px 0 rgba(255,255,255,0.55);
    }
    .btn-s:hover  { background:#D4D5EE; transform:translateY(-1px); border-color:rgba(0,0,0,0.60); box-shadow:0 5px 14px rgba(110,90,158,0.16), inset 0 1px 0 rgba(255,255,255,0.65); }
    .btn-s:active { background:#A8A9D4; transform:translateY(0);    border-color:rgba(0,0,0,0.65); box-shadow:0 1px 4px rgba(110,90,158,0.10),  inset 0 1px 0 rgba(255,255,255,0.40); }

    /* ── Ink — primary CTA (about window, paired contexts) ── */
    .btn-ink {
      font-weight:600;
      background:#2D2440;
      color:#E2D1F9;
      border-color:rgba(0,0,0,0.65);
      box-shadow:0 4px 14px rgba(45,36,64,0.30), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.35);
    }
    .btn-ink:hover  { background:#3D3260; transform:translateY(-2px); box-shadow:0 8px 22px rgba(45,36,64,0.36), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.30); }
    .btn-ink:active { background:#1E1830; transform:translateY(0);    box-shadow:0 2px 6px rgba(45,36,64,0.22),  inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.40); }

    /* ── Ghost — secondary (pairs with .btn-ink) ── */
    .btn-ghost {
      font-weight:500;
      background:transparent;
      color:var(--text);
      border-color:rgba(0,0,0,0.50);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.40);
    }
    .btn-ghost:hover  { background:rgba(0,0,0,0.06); transform:translateY(-1px); border-color:rgba(0,0,0,0.65); box-shadow:0 3px 10px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.45); }
    .btn-ghost:active { background:rgba(0,0,0,0.10); transform:translateY(0);    border-color:rgba(0,0,0,0.70); box-shadow:inset 0 1px 0 rgba(255,255,255,0.30); }

    .tag   { display:inline-block; font-size:10px; font-weight:600; letter-spacing:0.04em; padding:2px 8px; border-radius:4px; background:rgba(131,175,116,0.18); color:var(--accent); border:2px solid rgba(0,0,0,0.45); }
    .tag.d { background:rgba(197,198,231,0.30); color:#4A3A7A; border-color:rgba(0,0,0,0.35); }
    .tag.r { background:rgba(229,152,155,0.18); color:#6E5A9E; border-color:rgba(0,0,0,0.40); }

    .terminal { background:#2D2440 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-color:rgba(229,152,155,0.20) !important; box-shadow:0 12px 40px rgba(45,36,64,0.55) !important; }
    .terminal.active { border-color:rgba(229,152,155,0.35) !important; box-shadow:0 20px 56px rgba(45,36,64,0.65) !important; }
    .terminal .titlebar { background:rgba(45,36,64,0.96); border-bottom-color:rgba(229,152,155,0.15); box-shadow:none; }
    .terminal .wtitle { color:var(--term-text); opacity:0.60; }
    .terminal .wcontent { background:#2D2440; font-family:var(--mono); font-size:12.5px; color:var(--term-text); line-height:1.88; padding:18px 20px; }
    .ps   { color:var(--term-accent); }
    .tdiv { border-top:1px solid rgba(229,152,155,0.18); margin:10px 0; }
    .ts   { color:var(--term-accent); margin-right:8px; }
    .tcursor { display:inline-block; width:8px; height:13px; background:var(--term-accent); vertical-align:middle; opacity:0.85; animation:blink 1.1s step-end infinite; margin-left:1px; }
    @keyframes blink { 0%,100%{opacity:.85} 50%{opacity:0} }

    .pcard { display:block; width:100%; text-align:left; padding:12px 14px; border-radius:8px; margin-bottom:8px; cursor:pointer; background:rgba(252,226,219,0.45); border:2px solid rgba(0,0,0,0.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background 120ms,transform 120ms; }
    .pcard:hover { background:rgba(252,226,219,0.70); transform:translateX(2px); }
    .pcard-tags { display:flex; gap:5px; margin-bottom:6px; }
    .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; }
    .pcard-desc { font-size:12px; color:var(--muted); margin-bottom:6px; line-height:1.5; }

    /* ── Rich preview cards ── */
    .pc2-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .pc2 { display:flex; flex-direction:column; background:rgba(252,226,219,0.52); border:1.5px solid rgba(255,255,255,0.55); border-radius:14px; overflow:hidden; box-shadow:0 3px 12px rgba(110,90,158,0.08); transition:transform .18s,box-shadow .18s; }
    .pc2:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(110,90,158,0.16); }
    .pc2-header { display:flex; align-items:center; gap:10px; padding:14px 14px 10px; }
    .pc2-logo { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:13px; color:#fff; font-weight:400; flex-shrink:0; }
    .pc2-meta { flex:1; min-width:0; }
    .pc2-name { font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pc2-tags { display:flex; gap:4px; margin-top:3px; flex-wrap:wrap; }
    .pc2-body { padding:0 14px 10px; flex:1; }
    .pc2-snippet { font-size:11.5px; color:var(--muted); line-height:1.65; }
    .pc2-footer { display:flex; align-items:center; justify-content:space-between; padding:8px 14px 12px; border-top:1px solid rgba(110,90,158,0.08); margin-top:auto; }
    .pc2-metric { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.04em; padding:4px 9px; border-radius:100px; color:#fff; }
    .pc2-btn { font-family:var(--mono); font-size:9px; letter-spacing:.10em; text-transform:uppercase; color:var(--accent); background:none; border:none; cursor:pointer; padding:0; transition:opacity .15s; }
    .pc2-btn:hover { opacity:.65; }

    .cs-tags  { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
    .cs-title { font-size:20px; font-weight:700; letter-spacing:-0.02em; margin-bottom:4px; }
    .cs-sub   { font-size:13px; color:var(--muted); margin-bottom:16px; line-height:1.55; }
    .cs-body  { font-size:13px; color:var(--text); line-height:1.72; margin-bottom:14px; }
    .cs-metric { display:inline-block; font-size:13px; font-weight:600; color:#fff; background:#8E9AAF; border:1px solid rgba(110,90,158,0.65); border-radius:6px; padding:7px 14px; }
    .moment   { background:rgba(131,175,116,0.18); border-left:3px solid #83AF74; border-radius:0 6px 6px 0; padding:10px 14px; margin-top:10px; font-size:12px; color:var(--muted); font-style:italic; line-height:1.65; }

    .input { width:100%; padding:10px 13px; border-radius:6px; font-size:13px; color:var(--text); background:rgba(252,226,219,0.60); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:2px solid rgba(0,0,0,0.40); transition:border-color 100ms; }
    .input:focus { border-color:rgba(0,0,0,0.65); box-shadow:0 0 0 3px rgba(110,90,158,0.12), inset 0 1px 0 rgba(255,255,255,0.50); }
    .input::placeholder { color:var(--muted); }
    textarea.input { resize:none; height:78px; }

    /* ── Contact redesign ── */
    .ct-wrap { display:flex; gap:24px; height:100%; }
    .ct-left { flex:0 0 200px; display:flex; flex-direction:column; border-right:1px solid rgba(110,90,158,0.15); padding-right:20px; }
    .ct-right { flex:1; display:flex; flex-direction:column; gap:10px; }
    .ct-avail { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9px; letter-spacing:0.13em; text-transform:uppercase; color:#4E8A60; margin-bottom:16px; }
    .ct-dot { width:7px; height:7px; border-radius:50%; background:#4E8A60; flex-shrink:0; animation:ct-pulse 2.2s ease-in-out infinite; }
    @keyframes ct-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(1.35)} }
    .ct-headline { font-family:var(--display); font-size:clamp(21px,2.8vw,28px); line-height:1.18; letter-spacing:-0.02em; color:var(--text); margin-bottom:10px; }
    .ct-headline em { color:var(--accent); font-style:italic; }
    .ct-sub { font-size:12px; color:var(--muted); line-height:1.7; margin-bottom:6px; }
    .ct-links { display:flex; flex-direction:column; gap:0; margin-top:0; }
    .ct-link { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); text-decoration:none; padding:2px 10px; border-radius:10px; transition:background .18s,color .18s,transform .15s; cursor:pointer; }
    .ct-link:hover { background:rgba(110,90,158,0.10); color:var(--accent); transform:translateX(3px); }
    .ct-link-icon { flex-shrink:0; opacity:.65; }
    .ct-label { font-family:var(--mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px; }
    .ct-input { width:100%; background:rgba(255,255,255,0.42); border:1.5px solid rgba(110,90,158,0.30); border-radius:10px; padding:10px 13px; font-size:13px; font-family:var(--sans); color:var(--text); outline:none; transition:border-color .18s,box-shadow .18s,background .18s; box-sizing:border-box; }
    .ct-input:focus { border-color:var(--accent); background:rgba(255,255,255,0.55); box-shadow:0 0 0 3px rgba(110,90,158,0.13); }
    .ct-input::placeholder { color:var(--muted); }
    .ct-textarea { resize:none; height:82px; }
    .ct-field { display:flex; flex-direction:column; }
    .ct-send { margin-top:auto; width:100%; padding:12px 18px; background:var(--text); color:#FBEED6; font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.01em; border:none; border-radius:12px; cursor:pointer; transition:transform .18s,opacity .18s,background .25s; }
    .ct-send:hover:not(:disabled) { opacity:.88; transform:translateY(-2px); }
    .ct-send:active:not(:disabled) { transform:translateY(0); }
    .ct-send:disabled { opacity:.65; cursor:default; }
    .ct-send.ct-sent { background:var(--accent); }
    @keyframes ct-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

    .ach-row  { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid rgba(0,0,0,0.18); }
    .ach-row:last-child { border-bottom:none; }
    .ach-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
    .ach-body { flex:1; }
    .ach-title { font-size:13px; font-weight:600; margin-bottom:2px; }
    .ach-desc  { font-size:12px; color:var(--muted); line-height:1.55; }
    .ach-year  { font-size:11px; color:var(--accent2); font-family:var(--mono); flex-shrink:0; margin-top:3px; }
    .ach-certs { display:flex; flex-direction:column; gap:6px; }
    .ach-cert { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.15); border-radius:10px; padding:9px 12px; border:1px solid rgba(0,0,0,0.09); }
    .ach-cert-ico { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .ach-cert-name { font-size:12.5px; font-weight:600; line-height:1.3; }
    .ach-cert-by { font-size:10.5px; color:var(--muted); margin-top:1px; }
    .ach-photos { display:flex; flex-direction:column; gap:8px; margin-bottom:2px; }
    .ach-photo-card { border-radius:10px; overflow:hidden; background:rgba(0,0,0,0.05); }
    .ach-photo-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
    .ach-photo-cap { font-size:11px; color:var(--muted); line-height:1.35; padding:6px 9px 8px; }

    .res-wrap { background:rgba(252,226,219,0.45); backdrop-filter:blur(8px); border-radius:8px; padding:20px 22px; border:2px solid rgba(0,0,0,0.45); }
    .res-exp-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }

    /* ─── NAV ─────────────────────────────────────────────────── */
    nav {
      width: fit-content;
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      translate: -50% 0;
      padding: 0px 6px;
      border-radius: 20px;
      z-index: 900;
    }

    @supports (corner-shape: squircle) {
      nav { border-radius: 56px; corner-shape: squircle; }
    }

    /* ─── INNER FLEX ROW: search + icons ────────────────────────── */
    .nav-bar {
      display: flex;
      align-items: center;
      position: relative;
    }

    /* Ghibli lavender glass dock pill */
    .nav-bar::after {
      content: "";
      position: absolute;
      z-index: -3;
      inset: -4px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(226,209,249,0.92) 0%, rgba(226,209,249,0.78) 100%);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border: 2px solid rgba(0,0,0,0.45);
      box-shadow:
        0 8px 32px rgba(110, 90, 158, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    @supports (corner-shape: squircle) {
      .nav-bar::after { border-radius: 56px; corner-shape: squircle; }
    }

    /* ── Icon tile — dock (smaller than desktop icons) ── */
    .di-icon {
      width: 52px; height: 52px;
      display: flex; align-items: center; justify-content: center;
    }
    .di-icon svg {
      pointer-events: none; width: 34px; height: 34px;
      stroke: #2D2440; stroke-width: 2.6;
      stroke-linecap: round; stroke-linejoin: round;
      filter: drop-shadow(0 2px 8px rgba(45,36,64,0.18));
    }
    .di-icon svg [stroke="none"] { stroke: none !important; }
    .di-icon-lg { width: 90px; height: 90px; }
    .di-icon-lg svg { width: 60px; height: 60px; stroke-width: 2.4; }

    /* ── Tooltip label ── */
    .dlabel {
      position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
      font-family: var(--hand); font-size: 12px; color: var(--text); white-space: nowrap;
      background: rgba(254,250,224,0.92); backdrop-filter: blur(14px);
      border: 1.5px solid rgba(0,0,0,0.35); border-radius: 7px; padding: 3px 9px;
      opacity: 0; pointer-events: none; transition: opacity 150ms 300ms; z-index: 10;
      box-shadow: 0 4px 14px rgba(110,90,158,0.18);
    }
    nav a:hover .dlabel { opacity: 1; }


    /* ── Nav separator ── */
    .nav-sep  { display: block; width: 1px; height: 34px; background: rgba(110,90,158,0.30); }
    .sep-item { display: flex; align-items: center; padding: 0 4px; list-style: none; }

    /* ── Minimized dock tiles ── */
    .dmini-tile { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; position:relative; text-decoration:none; padding:2px 4px; }
    .dmini-tile .dlabel { opacity:0; bottom:calc(100% + 10px); }
    .dmini-tile:hover .dlabel { opacity:1; }
    .dmini-tile .di-icon { transform:scale(0.78); transition:transform 120ms; opacity:0.82; }
    .dmini-tile:hover .di-icon { transform:scale(0.86); opacity:1; }
    .dmini-tile::after { display:none !important; }
    /* ── Open case-study dock tiles ── */
    .dock-open-tile { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; position:relative; text-decoration:none; padding:2px 4px; }
    .dock-open-tile .dlabel { opacity:0; bottom:calc(100% + 10px); }
    .dock-open-tile:hover .dlabel { opacity:1; }
    .dock-open-tile .di-icon { transition:transform 120ms; }
    .dock-open-tile:hover .di-icon { transform:scale(1.10); }
    .dock-open-tile .di-icon svg { width:22px; height:22px; filter:none; }
    /* Existing dock icon when its window is minimized */
    li.dock-minimized > a::before {
      content:'';
      position:absolute; top:0; left:50%; transform:translateX(-50%);
      width:18px; height:2.5px; border-radius:99px;
      background:rgba(255,255,255,0.80);
      box-shadow:0 0 4px rgba(255,255,255,0.50);
    }

    /* ─── SEARCH BAR ─────────────────────────────────────────────── */
    .search {
      display: flex;
      align-items: center;
      align-self: stretch;
      gap: 0.6rem;
      padding: 0 1.4rem 0 1.2rem;
      border-right: 1px solid rgba(197, 198, 231, 0.30);
      transition: border-right-color 300ms;
      cursor: text;
    }

    /* Hide the separator when the highlight is adjacent to or covering it */
    nav:has(.search:hover) .search,
    nav:has(li:first-of-type a:hover) .search {
      border-right-color: transparent;
    }

    .search svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      opacity: 0.45;
      transition: opacity 200ms;
    }

    .search:focus-within svg {
      opacity: 0.75;
    }

    .search input {
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 1rem;
      font-family: var(--sans);
      width: 160px;
      caret-color: white;
    }

    .search input::placeholder {
      color: var(--muted);
    }

    .search input::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }

    /* ─── ICON LIST ──────────────────────────────────────────────── */
    nav ul {
      position: relative;
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    nav a {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.85rem;
      text-decoration: none;
      color: var(--text);
      position: relative;
    }

    nav a svg {
      display: block;
      pointer-events: none;
    }

    nav a:hover {
      position: relative;
      anchor-name: --nav-highlight;
    }

    #lock {
      position:fixed; inset:0; z-index:2000; cursor:default;
      display:flex; align-items:center; justify-content:center;
      background: rgba(249, 213, 229, 0.95);
      backdrop-filter: blur(48px) saturate(1.8) brightness(1.03);
      -webkit-backdrop-filter: blur(48px) saturate(1.8) brightness(1.03);
      transition:transform 640ms cubic-bezier(0.4,0,0.2,1), opacity 500ms ease;
    }
    #lock.out    { transform:translateY(-100%); opacity:0; pointer-events:none; }
    #lock.hidden { display:none !important; }
    #lbg {
      /* stays as Ghibli colour source for the frost to blur against */
      position:absolute; inset:0; pointer-events:none;
      background-color:#F9D5E5;
      background-image:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(197,178,230,0.55) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(142,154,175,0.30) 0%, transparent 60%);
      background-size:100% 100%, 100% 100%;
    }
    .lock-soots { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
    #lock-center {
      position:relative; z-index:2;
      display:flex; flex-direction:column; align-items:center;
      width:460px;
      gap:0;
    }
    /* Time */
    #ltime-block { text-align:center; margin-bottom:20px; pointer-events:none; }
    #lclk { font-family:var(--mono); font-size:76px; font-weight:200; color:var(--text-dark); letter-spacing:-0.04em; line-height:1; }
    #ldate { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:8px; text-transform:uppercase; letter-spacing:0.14em; }
    /* Headline */
    #l-headline {
      text-align:center;
      margin-bottom:22px; margin-top:0;
    }
    #l-eyebrow {
      font-family:var(--mono); font-size:10px; letter-spacing:0.16em;
      text-transform:uppercase; color:var(--muted); margin-bottom:4px;
    }
    #l-name {
      font-family:'Calistoga',serif; font-size:clamp(40px,10vw,64px);
      line-height:1; letter-spacing:-0.02em; color:var(--accent);
    }
    #l-portfolio {
      font-family:'Calistoga',serif; font-size:clamp(56px,14vw,88px);
      line-height:0.92; letter-spacing:-0.025em; color:var(--text-dark);
      margin-top:-2px;
    }
    #l-subrole {
      font-family:var(--mono); font-size:10px; letter-spacing:0.10em;
      text-transform:uppercase; color:var(--muted); margin-top:10px;
    }
    /* Featured Works label */
    #l-featured-label {
      font-family:var(--mono); font-size:9px; letter-spacing:0.18em;
      text-transform:uppercase; color:var(--muted); margin-bottom:8px; margin-top:4px;
    }
    /* Notification bars — solid cards on frosted surface, no nested blur */
    #l-notifs { display:flex; flex-direction:column; gap:8px; width:100%; margin-bottom:16px; }
    .l-notif {
      display:flex; align-items:center; gap:12px;
      padding:12px 14px; text-align:left;
      background:rgba(254,250,224,0.70);
      border:1.5px solid rgba(0,0,0,0.38);
      border-radius:14px;
      cursor:pointer;
      transition:transform 140ms ease, background 140ms, box-shadow 140ms;
      box-shadow:0 2px 8px rgba(110,90,158,0.08), inset 0 1px 0 rgba(255,255,255,0.70);
      touch-action:manipulation;
    }
    .l-notif:hover { background:rgba(254,250,224,0.92); transform:translateY(-2px); box-shadow:0 6px 18px rgba(110,90,158,0.14), inset 0 1px 0 rgba(255,255,255,0.80); }
    .l-notif:active { transform:scale(0.97); box-shadow:0 1px 4px rgba(110,90,158,0.08); }
    .l-notif-icon {
      width:36px; height:36px; border-radius:9px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      border:1.5px solid rgba(0,0,0,0.16);
    }
    .ln-amber { background:linear-gradient(135deg,#E2D1F9,#FCE2DB); }
    .ln-rose  { background:linear-gradient(135deg,#FCE2DB,#F9D5E5); }
    .ln-sage  { background:linear-gradient(135deg,#C5C6E7,#83AF74); }
    .l-notif-body { flex:1; min-width:0; }
    .l-notif-title { font-family:var(--mono); font-size:10.5px; font-weight:700; color:#2D2440; letter-spacing:0.03em; margin-bottom:2px; }
    .l-notif-text  { font-size:12px; color:#3D3D3D; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .l-notif-arr   { font-size:15px; color:var(--muted); flex-shrink:0; }
    /* Lock CTA buttons — equal glass treatment */
    #l-actions { display:flex; flex-wrap:wrap; gap:8px; width:100%; margin-bottom:4px; }
    .l-action-btn {
      display:flex; align-items:center; justify-content:center; gap:8px;
      flex:1 1 calc(50% - 4px); padding:11px 12px;
      background:rgba(45,36,64,0.48);
      border:1.5px solid rgba(0,0,0,0.62);
      border-radius:12px;
      box-shadow:0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
      font-family:var(--mono); font-size:10px; font-weight:600;
      letter-spacing:0.08em; text-transform:uppercase; color:#2D2440;
      white-space:nowrap; cursor:pointer; text-decoration:none;
      transition:background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
      touch-action:manipulation;
    }
    .l-action-btn:hover {
      background:rgba(45,36,64,0.65);
      transform:translateY(-2px);
      box-shadow:0 6px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.15);
    }
    .l-action-btn:active { transform:scale(0.97); box-shadow:0 1px 4px rgba(0,0,0,0.14); }
    #l-enter-btn { flex:1 1 100%; }
    #l-download { flex-grow:1.4; }

    #spotlight { position:fixed; top:88px; left:50%; transform:translateX(-50%) scale(0.96); width:520px; z-index:1500; border-radius:16px; overflow:hidden; background:rgba(252,226,219,0.85); backdrop-filter:blur(32px) saturate(1.6); -webkit-backdrop-filter:blur(32px) saturate(1.6); border:2px solid rgba(0,0,0,0.45); box-shadow:0 20px 60px rgba(110,90,158,0.20),inset 0 1px 0 rgba(255,255,255,0.65); opacity:0; pointer-events:none; transition:opacity 150ms var(--ease),transform 150ms var(--ease); }
    #spotlight.show { opacity:1; pointer-events:all; transform:translateX(-50%) scale(1); }
    .sp-row-top { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1.5px solid rgba(0,0,0,0.18); }
    #sp-input { flex:1; font-size:16px; color:var(--text); background:transparent; border:none; caret-color:var(--accent); font-family:var(--sans); }
    #sp-input::placeholder { color:var(--muted); opacity:0.65; }
    .sp-results { padding:6px; }
    .sp-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; transition:background 80ms; background:none; width:100%; text-align:left; }
    .sp-row:hover { background:rgba(110,90,158,0.10); }
    .sp-row-title { font-size:13px; font-weight:500; color:var(--text); }
    .sp-row-tag   { font-size:11px; color:var(--muted); margin-left:auto; }

    /* ─── HIGHLIGHT LAYERS (anchor-positioned) ──────────────────── */

    /* Shared anchor setup + spring transition */
    nav::before,
    nav::after {
      content: "";
      border-radius: 20px;
      position-anchor: --nav-highlight;
      position: absolute;

      /* Collapsed: thin sliver below the icons when nothing is hovered */
      top: calc(anchor(bottom) - 4px);
      left: calc(anchor(left) + 1rem);
      right: calc(anchor(right) + 1rem);
      bottom: anchor(bottom);

      transition: top 500ms, left 500ms, right 500ms, bottom 500ms;
      transition-timing-function: linear(
        0,
        0.008 1.1%, 0.031 2.2%, 0.129 4.8%, 0.257 7.2%,
        0.671 14.2%, 0.789 16.5%, 0.881 18.6%, 0.957 20.7%,
        1.019 22.9%, 1.063 25.1%, 1.094 27.4%, 1.114 30.7%,
        1.112 34.5%, 1.018 49.9%, 0.99 59.1%, 1
      );
    }

    /* ::before — background-reveal layer (matches wallpaper so it looks "lit") */
    nav::before {
      z-index: -2;
      background-attachment: fixed;
      background-color: #F0C5D8;
      background-image:
        linear-gradient(175deg, rgba(197,178,230,0.55) 0%, rgba(249,180,210,0.25) 100%),
        radial-gradient(ellipse 95% 50% at 50% 115%, rgba(252,210,220,0.70) 0%, transparent 55%),
        linear-gradient(rgba(197,198,231,0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(197,198,231,0.28) 1px, transparent 1px);
      background-size: 100vw 100vh, 100vw 100vh, 20px 20px, 20px 20px;
    }

    /* ::after — frosted glass tint */
    nav::after {
      z-index: -1;
      backdrop-filter: blur(3px) brightness(1.08);
      -webkit-backdrop-filter: blur(3px) brightness(1.08);
      background-color: rgba(249, 213, 229, 0.90);
      border: 1.5px solid rgba(0,0,0,0.30);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.60),
        0 0 0 1px rgba(0,0,0,0.05);
    }

    /* Hover: expand highlight to cover the hovered icon OR the search bar */
    nav:has(a:hover)::before,
    nav:has(a:hover)::after,
    nav:has(.search:hover)::before,
    nav:has(.search:hover)::after {
      top: anchor(top);
      left: anchor(left);
      right: anchor(right);
    }

    @supports (corner-shape: squircle) {
      nav::before,
      nav::after {
        border-radius: 56px;
        corner-shape: squircle;
      }

      nav:has(a:hover)::before,
      nav:has(a:hover)::after {
        corner-shape: squircle;
        border-radius: 50%;
      }

      nav:has(li:first-of-type a:hover)::before,
      nav:has(li:first-of-type a:hover)::after {
        border-radius: 48px 50% 50% 48px;
      }

      nav:has(li:last-of-type a:hover)::before,
      nav:has(li:last-of-type a:hover)::after {
        border-radius: 50% 48px 48px 50%;
      }

      /* Search is always on the left edge — flat left, squircle right */
      nav:has(.search:hover)::before,
      nav:has(.search:hover)::after {
        corner-shape: squircle;
        border-radius: 48px 50% 50% 48px;
      }
    }

    /* Collapsed state: only when NEITHER search NOR any icon is hovered */
    nav:not(:has(.search:hover)):not(:has(a:hover)) .nav-bar {
      anchor-name: --nav-highlight;
    }

    /* Search sets itself as the anchor on hover */
    .search:hover {
      anchor-name: --nav-highlight;
    }

    /* ─── FALLBACK: browsers without anchor positioning ─────────── */
    @supports not (anchor-name: --x) {
      nav a {
        border-radius: 12px;
        transition: background 200ms;
      }
      nav a:hover {
        background: rgba(255, 235, 210, 0.15);
      }
      nav::before,
      nav::after {
        display: none;
      }
    }

    /* ─── FINDER ──────────────────────────────────────────── */
    .finder-shell { display:flex; height:calc(100% - 42px); overflow:hidden; }
    .finder-sidebar {
      width:176px; flex-shrink:0; min-width:120px; max-width:280px;
      border-right:none;
      background:rgba(226,209,249,0.38);
      padding:10px 0; overflow-y:auto;
    }
    .fs-lbl { font-size:10px; font-weight:700; letter-spacing:.10em; color:var(--muted); text-transform:uppercase; padding:4px 14px 8px; }
    .fs-item {
      display:flex; align-items:center; gap:9px;
      padding:5px 10px; margin:1px 6px;
      cursor:pointer; border-radius:6px;
      font-size:12.5px; color:var(--text);
      transition:background 100ms;
      background:none; width:calc(100% - 12px); text-align:left;
    }
    .fs-item:hover { background:rgba(110,90,158,0.10); }
    .fs-item.active { background:rgba(110,90,158,0.22); color:var(--accent-p); font-weight:600; }
    .fs-icon { width:16px; height:16px; flex-shrink:0; display:flex; align-items:center; }
    .fs-icon svg { width:16px; height:16px; }
    .fs-divider { border:none; border-top:1px solid rgba(0,0,0,0.12); margin:8px 14px; }
    .finder-main { flex:1; overflow:hidden; display:flex; min-width:0; }
    /* Folder view */
    .finder-files {
      width:218px; flex-shrink:0; min-width:140px; max-width:360px;
      border-right:none;
      overflow-y:auto; padding:8px;
    }
    .ff-item {
      display:flex; align-items:center; gap:10px;
      padding:8px 10px; border-radius:8px; cursor:pointer;
      transition:background 100ms;
      background:none; width:100%; text-align:left;
    }
    .ff-item:hover { background:rgba(110,90,158,0.08); }
    .ff-item.selected { background:rgba(110,90,158,0.20); }
    .ff-doc { display:block; }
    .ff-proj-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .mob-proj-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
    .ff-info { flex:1; min-width:0; }
    .ff-name { font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ff-type { font-size:10px; color:var(--muted); margin-top:2px; }
    .ff-group-hdr { font-size:10px; font-weight:700; letter-spacing:.10em; color:var(--muted); text-transform:uppercase; padding:10px 10px 6px; }
    .ff-group-hdr:first-child { padding-top:2px; }
    /* Detail pane */
    .finder-detail { flex:1; overflow-y:auto; border-left:1px solid rgba(0,0,0,0.18); }
    .finder-empty {
      height:100%; display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      gap:8px; color:var(--muted); font-size:12px;
      pointer-events:none;
    }
    /* File info card */
    .finder-info { padding:22px 20px; display:flex; flex-direction:column; align-items:center; }
    .fi-thumb { display:none; }
    .fpi-logo { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-family:'Calistoga',serif; font-size:16px; color:#fff; margin-bottom:12px; box-shadow:0 4px 14px rgba(0,0,0,0.18); }
    .fi-name { font-size:13px; font-weight:700; letter-spacing:-0.01em; text-align:center; margin-bottom:2px; }
    .fi-type { font-size:11px; color:var(--muted); margin-bottom:14px; }
    .fi-div { border:none; border-top:1px solid rgba(0,0,0,0.18); width:100%; margin:10px 0; }
    .fi-row { display:flex; justify-content:space-between; align-items:baseline; width:100%; font-size:11.5px; margin-bottom:5px; }
    .fi-lbl { color:var(--muted); }
    .fi-val { font-weight:500; font-family:var(--mono); font-size:11px; }
    .fi-summary { font-size:12px; color:var(--text); line-height:1.68; width:100%; margin-top:4px; }
    .fi-outcome-chip { font-size:11px; font-weight:600; color:#fff; border-radius:100px; padding:5px 12px; margin-top:12px; text-align:center; }
    .fi-cs-btn { margin-top:14px; width:100%; padding:10px 16px; background:var(--text); color:#FBEED6; font-family:var(--sans); font-size:12px; font-weight:600; border:none; border-radius:10px; cursor:pointer; transition:opacity .18s,transform .15s; }
    .fi-cs-btn:hover { opacity:.85; transform:translateY(-1px); }
    /* Non-folder full content */
    .finder-full { flex:1; overflow-y:auto; padding:22px; }

    /* ── Quick Start Widget ── */
    #quickStart {
      position: fixed; z-index: 15;
      top: 36px; right: 16px;
      width: 256px;
      border-radius: 16px;
      padding: 12px 12px 10px;
      background: linear-gradient(145deg, rgba(254,250,224,0.65) 0%, rgba(226,209,249,0.45) 100%);
      backdrop-filter: blur(16px) saturate(1.5) brightness(1.05);
      -webkit-backdrop-filter: blur(16px) saturate(1.5) brightness(1.05);
      border: 2px solid rgba(0,0,0,0.55);
      box-shadow: 0 10px 32px rgba(110,90,158,0.18), 0 2px 8px rgba(110,90,158,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
      display: flex; flex-direction: column; gap: 8px;
      overflow: hidden;
    }
    #quickStart::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
      border-radius: 16px 16px 0 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.90), transparent);
      pointer-events: none;
    }
    #quickStart::after {
      content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; z-index: 2;
      border-radius: 16px 0 0 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.85), transparent, rgba(255,255,255,0.30));
      pointer-events: none;
    }
    .qs-eyebrow {
      display: block;
      font-family: var(--mono); font-size: 8px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--accent); opacity: 0.50;
    }
    .qs-title {
      display: block;
      font-family: var(--mono); font-size: 9.5px;
      color: var(--accent); opacity: 0.72;
      letter-spacing: 0.01em; margin-top: 1px;
    }
    .qs-items { display: flex; flex-direction: column; gap: 5px; }
    .qs-item {
      display: flex; align-items: center; gap: 9px;
      width: 100%; padding: 9px 10px;
      background: rgba(213,200,245,0.30);
      border: 1px solid rgba(110,90,158,0.15);
      border-radius: 10px;
      cursor: pointer;
      text-align: left;
      transition: background 130ms ease, transform 130ms ease;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.50);
    }
    .qs-item:hover { background: rgba(213,200,245,0.52); transform: translateY(-1px); }
    .qs-item:active { transform: scale(0.98); }
    .qs-icon {
      flex-shrink: 0;
      width: 26px; height: 26px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
    }
    .qs-item-body { flex: 1; min-width: 0; }
    .qs-item-label {
      display: block;
      font-family: var(--mono); font-size: 9.5px; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--accent); line-height: 1.3;
    }
    .qs-item-sub {
      display: block;
      font-family: var(--body); font-size: 9px;
      color: var(--muted); line-height: 1.4;
      margin-top: 1px;
    }
    .qs-chevron { flex-shrink: 0; color: var(--muted); opacity: 0.45; }
    @media (prefers-reduced-motion: reduce) {
      .album { animation: none !important; }
    }


    /* ── Character Card — Trading Card Style ── */
    #char-card {
      position:fixed; top:calc(36px + 148px + 24px); right:16px; z-index:15;
      width:256px;
      border-radius:14px; overflow:hidden;
      background:rgba(254,250,224,0.98);
      border:2px solid rgba(0,0,0,0.55);
      box-shadow:0 12px 36px rgba(110,90,158,0.22), inset 0 1px 0 rgba(255,255,255,0.70);
      display:flex; flex-direction:column;
      font-family:var(--sans);
    }
    /* ── Header strip ── */
    #cc-header {
      display:flex; flex-direction:column; gap:5px;
      padding:11px 14px 9px;
      background:rgba(197,198,231,0.35);
      border-bottom:1.5px solid rgba(0,0,0,0.18);
    }
    #cc-header-top {
      display:flex; align-items:center; justify-content:space-between;
    }
    #cc-header-sub {
      font-family:var(--mono); font-size:9px; font-weight:700;
      letter-spacing:0.14em; text-transform:uppercase;
      color:#3D3D3D; opacity:0.72;
    }
    #cc-title {
      font-family:var(--hand); font-size:21px; font-weight:600;
      color:var(--text); letter-spacing:-0.02em; line-height:1;
    }
    #cc-date-badge {
      font-family:var(--mono); font-size:9px; font-weight:700;
      letter-spacing:0.10em; text-transform:uppercase;
      color:#3D3D3D; background:#FCE2DB;
      border:1.5px solid rgba(0,0,0,0.35); border-radius:4px;
      padding:2px 7px;
    }
    /* ── Illustrated zone ── */
    #cc-illus {
      position:relative; height:210px;
      background:#eda424;
      border-bottom:1.5px solid rgba(0,0,0,0.18);
      overflow:hidden;
    }
    /* Base face images */
    #cc-face-idle, #cc-face-happy, #cc-vid, #cc-canvas {
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover; object-position:top center;
    }
    /* White layer behind image — narrower so yellow shows on sides */
    #cc-illus::before {
      content:''; position:absolute;
      top:0; bottom:0; left:17%; right:17%;
      background:#ffffff;
      z-index:1;
    }
    #cc-face-idle  { z-index:2; }
    #cc-face-happy { z-index:3; opacity:0; transition:opacity 0.45s ease; pointer-events:none; }
    #cc-vid        { z-index:4; opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
    #cc-canvas     { z-index:4; opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
    /* Eye layers — behind face */
    .cc-eye {
      position:absolute; pointer-events:none;
      transform:translate(-50%,-50%);
      z-index:1;
    }
    #cc-eye-l { width:6.3%; aspect-ratio:1; left:40%;   top:45.5%; }
    #cc-eye-r { width:6.3%; aspect-ratio:1; left:53.75%; top:45.5%; }
    .cc-eye-inner { width:100%; height:100%; will-change:transform; }
    .cc-eye-inner img { width:100%; height:100%; display:block; }
    #cc-name-badge {
      position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
      font-family:var(--mono); font-size:9px; font-weight:700;
      letter-spacing:0.10em; text-transform:uppercase;
      color:#FEFAE0; background:#2D2440;
      border-radius:99px; padding:2px 10px;
      z-index:5; white-space:nowrap;
    }
    /* ── Stats section ── */
    #cc-stats-zone {
      padding:11px 14px 9px;
      border-bottom:1.5px solid rgba(0,0,0,0.15);
    }
    .cc-stat-row {
      display:flex; align-items:baseline;
      margin-bottom:5px;
    }
    .cc-stat-row:last-child { margin-bottom:0; }
    .cc-stat-key {
      font-family:var(--mono); font-size:10px;
      color:var(--text); opacity:0.78; white-space:nowrap;
    }
    .cc-stat-leader {
      flex:1; border-bottom:1.5px dotted rgba(110,90,158,0.28);
      margin:0 4px 2px; min-width:0;
    }
    .cc-stat-rval {
      font-family:var(--mono); font-size:10.5px; font-weight:600;
      color:#3D3D3D; white-space:nowrap;
    }
    .cc-gem { color:#D4A5A5; font-size:9px; letter-spacing:1px; }
    /* ── Banner ── */
    #cc-banner {
      margin:10px 12px 0;
      border:2px solid rgba(0,0,0,0.55); border-radius:5px;
      background:#2D2440; padding:7px 10px;
      text-align:center;
      font-family:var(--mono); font-size:10px; font-weight:700;
      letter-spacing:0.16em; text-transform:uppercase;
      color:#FEFAE0;
    }
    /* ── Tagline ── */
    #cc-tagline {
      text-align:center; padding:6px 14px 0;
      font-family:var(--hand); font-size:13px;
      color:var(--muted); letter-spacing:0.01em;
    }
    /* ── CTA ── */
    #cc-follow {
      display:flex; align-items:center; justify-content:center; gap:7px;
      margin:9px 12px 13px;
      background:linear-gradient(160deg,rgba(226,209,249,0.75) 0%,rgba(197,198,231,0.55) 100%);
      border:2px solid rgba(0,0,0,0.45); border-radius:99px;
      padding:8px 0; font-size:11.5px; font-weight:600;
      color:var(--text); text-decoration:none; cursor:pointer;
      transition:transform 120ms var(--ease), background 120ms;
      box-shadow:0 2px 8px rgba(110,90,158,0.15), inset 0 1px 0 rgba(255,255,255,0.50);
    }
    #cc-follow:hover { transform:translateY(-1px); background:linear-gradient(160deg,rgba(226,209,249,0.90) 0%,rgba(197,198,231,0.75) 100%); }

    /* ── Finder panel resizers ── */
    .finder-resizer {
      width:4px; flex-shrink:0; cursor:col-resize;
      background:transparent;
      position:relative; z-index:5;
      transition:background 120ms;
    }
    .finder-resizer:hover, .finder-resizer.dragging {
      background:rgba(110,90,158,0.30);
    }

    /* ─── RESIZE HANDLES ─────────────────────────────────── */
    .win-resize { position:absolute; z-index:10; }
    .win-resize.n  { top:-3px;    left:10px;    right:10px;   height:6px;  cursor:n-resize; }
    .win-resize.s  { bottom:-3px; left:10px;    right:10px;   height:6px;  cursor:s-resize; }
    .win-resize.e  { right:-3px;  top:10px;     bottom:10px;  width:6px;   cursor:e-resize; }
    .win-resize.w  { left:-3px;   top:10px;     bottom:10px;  width:6px;   cursor:w-resize; }
    .win-resize.ne { top:-4px;    right:-4px;   width:12px;   height:12px; cursor:ne-resize; }
    .win-resize.nw { top:-4px;    left:-4px;    width:12px;   height:12px; cursor:nw-resize; }
    .win-resize.se { bottom:-4px; right:-4px;   width:12px;   height:12px; cursor:se-resize; }
    .win-resize.sw { bottom:-4px; left:-4px;    width:12px;   height:12px; cursor:sw-resize; }

    /* ── Window card hover interaction (project cards) ── */
    .pcard:hover {
      anchor-name: --pcard-hl;
    }

    /* ═══════════════════════════════════════
       MOBILE UI
    ═══════════════════════════════════════ */
    #mob { display:none; }

    @media (max-width:768px) {
      #desktop { display:none !important; }
      #lock-center { width:88vw; max-width:380px; }
      #l-notifs, #l-actions { padding-left:4px; padding-right:4px; }
      #lclk { font-size:54px; }
      #quickStart {
        position:static; width:100%;
        border-radius:20px;
        box-shadow:0 8px 24px rgba(110,90,158,0.16), inset 0 1px 0 rgba(255,255,255,0.70);
      }
      #char-card {
        position:static; width:100%;
        border-radius:20px;
        box-shadow:0 8px 24px rgba(110,90,158,0.16), inset 0 1px 0 rgba(255,255,255,0.70);
      }
      #char-card #cc-illus { height:240px; }
      #char-card #cc-stats-zone { padding:6px 12px; gap:3px; }
      #char-card #cc-header { padding:6px 12px 4px; }
      #char-card #cc-follow { padding:7px 12px; font-size:11px; margin:6px 10px 10px; }
      #mob { display:flex; }

      /* ── Mobile contact layout ── */
      .ct-wrap { flex-direction:column; height:auto; gap:0; }
      .ct-left { display:contents; }
      .ct-headline { order:1; font-size:clamp(17px,4.5vw,22px) !important; margin-bottom:8px; }
      .ct-avail { order:2; margin-bottom:16px !important; }
      .ct-right { order:3; }
      .ct-sub { display:none; }
      .ct-links { order:4; flex-direction:row !important; flex-wrap:wrap; gap:4px !important; margin-top:16px !important; }
      .ct-send { margin-top:8px; }
    }

    /* ── Mobile shell ── */
    #mob {
      position:fixed; inset:0; z-index:10;
      flex-direction:column; font-family:var(--sans);
      background-color:#F9D5E5;
      background-image:
        radial-gradient(ellipse 80% 60% at 50% 10%, rgba(197,178,230,0.45) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 90% 90%, rgba(142,154,175,0.22) 0%, transparent 60%);
      overflow:hidden;
    }
    /* Status bar */
    #mob-status {
      height:44px; flex-shrink:0;
      display:flex; align-items:center; justify-content:space-between;
      padding:8px 20px 0;
    }
    #mob-time-s { font-family:var(--mono); font-size:15px; font-weight:600; color:var(--text); }
    .mob-status-r { display:flex; align-items:center; gap:7px; }

    /* Slides */
    #mob-slides-outer { flex:1; overflow:hidden; position:relative; min-height:0; }
    #mob-slides {
      display:flex; flex-direction:row; height:100%; width:300%;
      transform:translateX(0%); transition:transform 420ms var(--ease);
      will-change:transform;
    }
    .mob-slide {
      width:33.3333%; height:100%; overflow-y:auto; overflow-x:hidden;
      flex-shrink:0; display:flex; flex-direction:column;
      padding:12px 16px; box-sizing:border-box;
      -webkit-overflow-scrolling:touch;
    }

    /* Slide 0: Home */
    #mob-search-bar {
      display:flex; align-items:center; gap:10px;
      background:rgba(254,250,224,0.72); border:1.5px solid rgba(0,0,0,0.35);
      border-radius:13px; padding:10px 14px; margin-bottom:20px;
      box-shadow:0 2px 8px rgba(110,90,158,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
    }
    #mob-search-input {
      flex:1; border:none; background:transparent;
      font-family:var(--sans); font-size:14px; color:var(--text);
    }
    #mob-search-input::placeholder { color:var(--muted); }

    /* Mobile search overlay */
    #mob-search-overlay {
      position:absolute; top:0; left:0; right:0; bottom:0; z-index:310;
      display:flex; flex-direction:column;
      background:#F9D5E5;
      background-image:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(197,178,230,0.35) 0%, transparent 60%);
      opacity:0; transform:translateY(8px);
      transition:opacity 260ms var(--ease), transform 260ms var(--ease);
      pointer-events:none;
    }
    #mob-search-overlay.open { opacity:1; transform:translateY(0); pointer-events:auto; }
    #mob-search-overlay.mob-hidden { visibility:hidden; }
    #mob-so-bar {
      height:52px; flex-shrink:0; display:flex; align-items:center; gap:8px; padding:0 10px 0 4px;
      background:rgba(226,209,249,0.85);
      backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
      border-bottom:1.5px solid rgba(0,0,0,0.18);
    }
    #mob-so-back {
      display:flex; align-items:center; justify-content:center;
      width:40px; height:40px; background:none; border:none; cursor:pointer; flex-shrink:0; padding:0;
    }
    #mob-so-input {
      flex:1; border:none; background:transparent;
      font-family:var(--sans); font-size:15px; color:var(--text); caret-color:var(--accent);
      -webkit-appearance:none; appearance:none;
    }
    #mob-so-input::placeholder { color:var(--muted); opacity:0.65; }
    #mob-so-input::-webkit-search-cancel-button { display:none; }
    #mob-so-clear {
      align-items:center; justify-content:center;
      width:30px; height:30px; background:none; border:none; cursor:pointer; flex-shrink:0; padding:0;
    }
    #mob-so-results {
      flex:1; overflow-y:auto; padding:6px 8px; -webkit-overflow-scrolling:touch;
    }
    .mob-so-row {
      display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:10px;
      cursor:pointer; background:none; border:none; width:100%; text-align:left;
      -webkit-tap-highlight-color:transparent; transition:background 80ms;
    }
    .mob-so-row:active { background:rgba(110,90,158,0.12); }
    .mob-so-icon {
      width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
      flex-shrink:0; background:rgba(110,90,158,0.10); color:var(--accent);
    }
    .mob-so-title { font-size:14px; font-weight:500; color:var(--text); flex:1; text-align:left; }
    .mob-so-tag { font-size:10px; color:var(--muted); font-family:var(--mono); letter-spacing:0.04em; }
    .mob-so-empty { padding:32px 16px; text-align:center; font-size:13px; color:var(--muted); font-family:var(--mono); }

    /* Home screen clock */
    #mob-clock-wrap {
      text-align:center; padding:20px 0 18px; flex-shrink:0;
    }
    #mob-clock-time {
      font-family:var(--sans); font-size:70px; font-weight:300; line-height:1;
      color:var(--text); letter-spacing:-2.5px;
    }
    #mob-clock-date {
      font-family:var(--sans); font-size:15px; font-weight:400;
      color:var(--muted); margin-top:7px; letter-spacing:0.01em;
    }

    #mob-icon-grid {
      display:grid; grid-template-columns:repeat(4,1fr); gap:18px 8px; padding:0 4px;
    }
    .mob-icon {
      display:flex; flex-direction:column; align-items:center; gap:6px;
      cursor:pointer; -webkit-tap-highlight-color:transparent;
      background:none; padding:0;
    }
    .mob-icon-img {
      width:62px; height:62px; display:flex; align-items:center; justify-content:center;
      overflow:hidden; transition:transform 130ms var(--ease);
    }
    .mob-icon:active .mob-icon-img { transform:scale(0.86); }
    .mob-icon-lbl {
      font-size:10px; font-family:var(--mono); color:var(--text);
      text-align:center; line-height:1.3; max-width:64px;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      text-shadow:0 1px 3px rgba(249,213,229,0.80);
    }

    /* Slide 1: New here */
    #mob-s1 { align-items:center; justify-content:center; padding:16px; gap:0; }
    .mob-nh-wrap { width:100%; display:flex; flex-direction:column; gap:20px; }
    .mob-nh-eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
    .mob-nh-title { font-family:var(--sans); font-size:22px; font-weight:600; color:var(--text); line-height:1.3; margin:0; }
    .mob-nh-title em { font-style:italic; color:var(--accent); }
    .mob-nh-btns { display:flex; flex-direction:column; gap:10px; }
    .mob-nh-btn {
      display:flex; align-items:center; gap:12px; padding:14px 16px;
      background:rgba(254,250,224,0.75); border:1.5px solid rgba(0,0,0,0.22);
      border-radius:14px; cursor:pointer; -webkit-tap-highlight-color:transparent;
      width:100%; text-align:left;
      box-shadow:0 2px 8px rgba(110,90,158,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
    }
    .mob-nh-btn:active { transform:scale(0.97); }
    .mob-nh-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .mob-nh-body { flex:1; display:flex; flex-direction:column; gap:2px; }
    .mob-nh-lbl { font-size:14px; font-weight:600; color:var(--text); }
    .mob-nh-sub { font-size:11px; color:var(--muted); }

    /* Slide 2: Character card */
    #mob-s2 { align-items:center; justify-content:flex-end; padding:0 16px 16px; gap:10px; }
    .mob-music-wrap, .mob-char-wrap { width:100%; max-width:320px; }

    /* Page dots */
    #mob-dots {
      display:flex; align-items:center; justify-content:center;
      gap:7px; height:24px; flex-shrink:0; margin-bottom:4px;
    }
    .mob-dot {
      width:6px; height:6px; border-radius:50%;
      background:rgba(110,90,158,0.28); cursor:pointer;
      transition:background 220ms, width 220ms, border-radius 220ms;
    }
    .mob-dot.active { background:var(--accent); width:20px; border-radius:3px; }

    /* Bottom dock */
    #mob-dock {
      height:72px; flex-shrink:0;
      display:flex; align-items:center; justify-content:space-around;
      background:rgba(249,213,229,0.80);
      backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
      border-top:1.5px solid rgba(0,0,0,0.15);
      border-radius:20px 20px 0 0; padding:0 32px;
    }
    .mob-dock-btn {
      display:flex; flex-direction:column; align-items:center;
      cursor:pointer; -webkit-tap-highlight-color:transparent;
      border:none; background:none; padding:0;
    }
    .mob-dock-icon-wrap {
      width:50px; height:50px; display:flex; align-items:center; justify-content:center;
      transition:transform 130ms var(--ease);
    }
    .mob-dock-btn:active .mob-dock-icon-wrap { transform:scale(0.86); }

    /* App screen — leaves dock visible at bottom */
    #mob-app {
      position:absolute; top:0; left:0; right:0; bottom:72px; z-index:300;
      display:flex; flex-direction:column;
      background:#F9D5E5;
      background-image:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(197,178,230,0.35) 0%, transparent 60%);
      transform:translateY(100%); transition:transform 380ms var(--ease);
    }
    #mob-app.open { transform:translateY(0); }
    #mob-app.mob-hidden { visibility:hidden; pointer-events:none; }
    #mob-app-bar {
      height:58px; flex-shrink:0; display:flex; align-items:center; padding:0 20px;
      background:rgba(226,209,249,0.85);
      backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
      border-bottom:1.5px solid rgba(0,0,0,0.18);
    }
    #mob-app-back {
      display:flex; align-items:center; gap:6px; min-width:64px;
      background:none; border:none; cursor:pointer;
      font-family:var(--sans); font-size:14px; font-weight:600; color:var(--accent); padding:8px 0;
    }
    #mob-app-title {
      flex:1; text-align:center;
      font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text); opacity:0.90;
    }
    .mob-bar-spacer { min-width:60px; }
    #mob-app-body {
      flex:1; overflow-y:auto; padding:20px 16px; -webkit-overflow-scrolling:touch;
    }

    /* Folder popup — iOS card style, dock stays visible */
    #mob-folder-backdrop {
      position:absolute; inset:0; z-index:155;
      background:rgba(45,36,64,0.22);
      backdrop-filter:blur(7px) saturate(0.85); -webkit-backdrop-filter:blur(7px) saturate(0.85);
      opacity:0; transition:opacity 260ms ease; pointer-events:none;
    }
    #mob-folder-backdrop.open { opacity:1; pointer-events:auto; }

    #mob-folder {
      position:absolute; z-index:160;
      left:18px; right:18px; top:50px;
      max-height:calc(100% - 140px);
      border-radius:22px; overflow:hidden;
      background:rgba(254,250,224,0.97);
      backdrop-filter:blur(32px) saturate(1.6); -webkit-backdrop-filter:blur(32px) saturate(1.6);
      border:1.5px solid rgba(0,0,0,0.20);
      box-shadow:0 24px 64px rgba(45,36,64,0.30), inset 0 1px 0 rgba(255,255,255,0.72);
      transform:scale(0.86) translateY(-8px); opacity:0;
      transition:transform 280ms var(--ease), opacity 220ms ease;
      pointer-events:none;
    }
    #mob-folder.open { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }
    #mob-folder.mob-hidden { display:none; }

    #mob-folder-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:15px 18px 12px;
      border-bottom:1px solid rgba(0,0,0,0.09);
    }
    #mob-folder-title {
      font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text);
    }
    #mob-folder-close {
      width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      background:rgba(110,90,158,0.12); color:var(--muted);
      font-size:16px; line-height:1; transition:background 120ms;
      -webkit-tap-highlight-color:transparent;
    }
    #mob-folder-close:active { background:rgba(110,90,158,0.22); }

    #mob-folder-body {
      overflow-y:auto; padding:18px 16px 22px; -webkit-overflow-scrolling:touch;
    }
    #mob-folder-eyebrow {
      font-size:10px; font-weight:700; letter-spacing:0.10em;
      color:var(--muted); text-transform:uppercase; margin-bottom:16px;
    }
    #mob-folder-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px 8px; }
    .mob-fgroup-hdr {
      grid-column:1/-1; font-size:10px; font-weight:700; letter-spacing:0.10em;
      color:var(--muted); text-transform:uppercase; margin:6px 0 -8px;
    }
    .mob-fgroup-hdr:first-child { margin-top:0; }
    .mob-fapp {
      display:flex; flex-direction:column; align-items:center; gap:7px;
      cursor:pointer; -webkit-tap-highlight-color:transparent;
      background:none; padding:0;
    }
    .mob-fapp-icon {
      width:68px; height:68px; display:flex; align-items:center; justify-content:center;
      transition:transform 130ms var(--ease);
    }
    .mob-fapp:active .mob-fapp-icon { transform:scale(0.86); }
    .mob-fapp-lbl {
      font-size:11px; font-family:var(--mono); color:var(--text);
      text-align:center; line-height:1.3; max-width:70px;
    }
    /* ── Decorative Ghibli Layer ── */
    #deco {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 6;
      overflow: hidden;
    }
    .deco-sparkle {
      position: absolute;
      opacity: 0;
      animation: deco-twinkle 4s ease-in-out infinite;
    }
    .deco-soot {
      position: absolute;
      opacity: 0.72;
      animation: deco-bob 3.2s ease-in-out infinite;
    }
    #deco-scene {
      position: absolute;
      bottom: 84px;
      left: 50%;
      transform: translateX(-50%);
      width: min(600px, 88vw);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 12px;
    }
    .deco-totoro-big {
      flex-shrink: 0;
      animation: deco-breathe 4.2s ease-in-out infinite;
      filter: drop-shadow(0 8px 18px rgba(110,90,158,0.18));
    }
    .deco-totoro-sm {
      flex-shrink: 0;
      animation: deco-breathe 4.8s ease-in-out infinite;
      animation-delay: 0.6s;
      filter: drop-shadow(0 5px 12px rgba(110,90,158,0.14));
      align-self: flex-end;
      margin-bottom: 6px;
    }
    .deco-grass {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      pointer-events: none;
    }
    @keyframes deco-twinkle {
      0%,100% { opacity: 0.22; transform: scale(1) rotate(0deg); }
      50%      { opacity: 0.62; transform: scale(1.14) rotate(20deg); }
    }
    @keyframes deco-bob {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-6px); }
    }
    @keyframes deco-breathe {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-5px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }