:root { --ink:#1e1e1e; --muted:#6d6d6d; --line:#bbb; --soft:#f1f1f1; --paper:#fff; --shade:#dedede; }
    * { box-sizing:border-box; }
    html,body { width:100%; height:100%; min-height:100dvh; overflow:hidden; overscroll-behavior:none; }
    body { margin:0; background:#fff; color:var(--ink); font:14px/1.5 Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
    button,input,textarea,select { font:inherit; }
    button { cursor:pointer; color:var(--ink); }
    .shell { width:100vw; height:100vh; height:100dvh; min-height:0; margin:0; background:var(--paper); border:0; position:relative; overflow:hidden; }
    .intro { position:absolute; z-index:30; inset:0; display:grid; place-items:center; background:#fff; text-align:center; cursor:pointer; transition:opacity .45s ease, visibility .45s ease; }
    .intro.hide { opacity:0; visibility:hidden; pointer-events:none; }
    .intro-inner { width:min(680px,80%); }
    .intro-mark { width:104px; height:104px; border:3px solid var(--ink); border-radius:50%; display:grid; place-items:center; margin:0 auto 26px; font-size:25px; font-weight:700; animation:introPulse 1.8s ease-in-out infinite; }
    .intro-line { height:2px; width:100%; background:var(--ink); margin:30px 0 17px; transform-origin:left; animation:introLine .9s ease both; }
    .intro-hint { display:inline-block; margin-top:26px; border:1.5px solid var(--ink); padding:9px 18px; font-size:13px; animation:introPulse 1.8s .5s ease-in-out infinite; }
    @keyframes introPulse { 50% { transform:scale(.92); opacity:.55; } }
    @keyframes introLine { from { transform:scaleX(0); } to { transform:scaleX(1); } }
    .nav { height:76px; border-bottom:2px solid var(--ink); display:flex; align-items:center; justify-content:space-between; padding:0 42px; }
    .brand { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:700; }
    .logo { width:28px; height:28px; border:2px solid; border-radius:7px; display:grid; place-items:center; font-size:11px; }
    .links { display:flex; gap:28px; align-items:center; }
    .links button { background:none; border:0; padding:10px 0; }
    .links button.active { border-bottom:2px solid; font-weight:700; }
    .screen { display:none; height:calc(100vh - 76px); height:calc(100dvh - 76px); min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:58px 90px 76px; }
    .screen.active { display:block; }
    h1,h2,h3,p { margin-top:0; }
    h1 { font-size:34px; line-height:1.25; margin-bottom:12px; }
    h2 { font-size:24px; margin-bottom:8px; }
    h3 { margin-bottom:7px; }
    .subtitle { color:var(--muted); font-size:16px; }
    .btn { border:2px solid var(--ink); background:var(--ink); color:#fff; padding:12px 20px; min-width:130px; font-weight:700; }
    .btn.ghost { background:#fff; color:var(--ink); }
    .btn.small { min-width:auto; padding:8px 13px; font-size:13px; }
    .hero { width:100%; text-align:center; }
    #home { padding:0; scroll-snap-type:y mandatory; scroll-behavior:smooth; }
    #home.active { display:block; }
    .home-panel { min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; position:relative; overflow:hidden; }
    .warmup-panel { display:grid; place-items:center; padding:40px 72px; background:#fff; }
    .warmup-canvas { width:min(1180px,100%); height:min(680px,76vh); min-height:470px; position:relative; display:grid; place-items:center; }
    .warmup-center { width:min(760px,72%); position:relative; z-index:2; text-align:center; }
    .warmup-kicker { display:inline-block; border:1.5px solid var(--ink); padding:7px 12px; margin-bottom:24px; font-size:12px; letter-spacing:.08em; }
    .warmup-center h1 { font-size:clamp(32px,3.3vw,52px); line-height:1.2; margin-bottom:18px; }
    .warmup-center .subtitle { max-width:620px; margin:0 auto; }
    .thought-bubble { position:absolute; z-index:1; display:inline-flex; align-items:center; min-height:48px; padding:11px 19px; border:2px solid var(--ink); border-radius:999px; background:#f2f2f2; font-weight:700; box-shadow:5px 5px 0 #d0d0d0; pointer-events:none; animation:bubbleFloat 4.6s ease-in-out infinite; }
    .thought-bubble::before { content:'○'; margin-right:8px; font-size:12px; }
    .thought-bubble:nth-of-type(1) { left:3%; top:10%; --drift:-5px; }
    .thought-bubble:nth-of-type(2) { right:1%; top:14%; --drift:7px; animation-delay:-1.1s; }
    .thought-bubble:nth-of-type(3) { left:0; top:46%; --drift:6px; animation-delay:-2.6s; }
    .thought-bubble:nth-of-type(4) { right:0; top:48%; --drift:-6px; animation-delay:-.7s; }
    .thought-bubble:nth-of-type(5) { left:9%; bottom:10%; --drift:5px; animation-delay:-3.2s; }
    .thought-bubble:nth-of-type(6) { right:9%; bottom:8%; --drift:-7px; animation-delay:-1.9s; }
    @keyframes bubbleFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(var(--drift)); } }
    .warmup-note { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:100%; text-align:center; color:var(--muted); font-size:13px; }
    .warmup-note::after { content:'↓'; display:block; color:var(--ink); font-size:22px; margin-top:7px; animation:scrollCue 1.7s ease-in-out infinite; }
    @keyframes scrollCue { 50% { transform:translateY(6px); } }
    .home-entry-panel { display:grid; place-items:center; padding:50px 90px 64px; background:#fafafa; border-top:2px solid var(--ink); }
    .home-entry-panel .hero { max-width:980px; }
    .home-entry-panel .entry-grid { margin-top:clamp(54px,9vh,105px); }
    .entry-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:880px; margin:auto; text-align:left; }
    .card { border:2px solid var(--ink); background:#fff; padding:24px; }
    .entry-card { min-height:202px; display:flex; flex-direction:column; align-items:flex-start; }
    .entry-card p { flex:1; color:var(--muted); }
    .page-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:35px; }
    .back { border:0; background:none; padding:4px 0; font-weight:700; }
    .steps { display:flex; align-items:center; gap:8px; color:var(--muted); }
    .dot { height:10px; width:10px; border:1px solid var(--ink); border-radius:50%; }
    .dot.on { background:var(--ink); }
    .form { max-width:740px; margin:35px auto 0; }
    .field { margin:22px 0; }
    label,.field-label { display:block; font-weight:700; margin-bottom:8px; }
    input,textarea,select { width:100%; border:2px solid var(--ink); padding:12px 13px; background:#fff; outline:none; }
    textarea { min-height:106px; resize:vertical; }
    .chips { display:flex; gap:9px; flex-wrap:wrap; }
    .chip { border:1.5px solid var(--ink); background:#fff; padding:8px 12px; }
    .chip.selected { background:var(--ink); color:#fff; }
    .form-actions { display:flex; justify-content:flex-end; margin-top:34px; }
    .loading { min-height:650px; display:grid; place-content:center; text-align:center; }
    .loading-icon { width:72px; height:72px; border:3px solid var(--ink); border-radius:50%; display:grid; place-items:center; margin:auto auto 24px; font-size:28px; }
    .bar { height:14px; width:440px; max-width:75vw; border:2px solid var(--ink); margin:26px auto 9px; background:#fff; }
    .bar > span { display:block; height:100%; background:var(--ink); width:70%; transition:width .25s; }
    .loading-list { display:grid; gap:10px; text-align:left; width:350px; max-width:75vw; margin:28px auto 0; color:var(--muted); }
    .loading-list > div::before { content:'○'; color:var(--muted); display:inline-block; width:23px; }
    .loading-list > .done::before { content:'✓'; color:var(--ink); font-weight:bold; }
    #recommend { text-align:center; }
    #recommend > h1 { margin-bottom:7px; }
    .recommendations { min-height:clamp(380px,52vh,500px); max-width:1080px; margin:24px auto 0; display:flex; justify-content:center; align-items:center; padding:28px 48px 44px; overflow:visible; }
    .recommend-card { --r:0deg; --y:0px; position:relative; flex:0 0 clamp(285px,26vw,350px); height:clamp(340px,45vh,420px); margin-left:clamp(-75px,-4vw,-48px); padding:25px 24px 21px; border:2px solid var(--ink); background:#eee; box-shadow:8px 9px 0 rgba(0,0,0,.16); text-align:left; display:flex; flex-direction:column; transform:translateY(var(--y)) rotate(var(--r)); transform-origin:50% 88%; transition:transform .2s ease,box-shadow .2s ease,z-index 0s; }
    .recommend-card:first-child { margin-left:0; --r:-5deg; --y:13px; z-index:1; background:#e0e0e0; }
    .recommend-card:nth-child(2) { --r:0deg; --y:-10px; z-index:3; background:#c9c9c9; }
    .recommend-card:nth-child(3) { --r:5deg; --y:13px; z-index:2; background:#eeeeee; }
    .recommend-card:hover,.recommend-card:focus-within { z-index:8; transform:translateY(calc(var(--y) - 17px)) rotate(0deg); box-shadow:11px 14px 0 rgba(0,0,0,.2); }
    .recommend-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
    .recommend-number { width:38px; height:38px; border:1.5px solid; border-radius:50%; display:grid; place-items:center; font-weight:700; }
    .recommend-label { border:1.5px solid; background:#fff; padding:5px 9px; font-size:12px; font-weight:700; }
    .recommend-card h2 { font-size:clamp(23px,1.8vw,30px); line-height:1.15; border-bottom:2px solid; padding-bottom:14px; margin-bottom:14px; }
    .recommend-card p { color:#4f4f4f; min-height:74px; margin-bottom:14px; }
    .recommend-card .tags { margin-bottom:14px; }
    .recommend-card .btn { width:100%; margin-top:auto; }
    .role-card { border:2px solid var(--ink); padding:20px; min-height:290px; display:flex; flex-direction:column; }
    .rank { display:flex; align-items:center; justify-content:space-between; }
    .rank strong { font-size:34px; }
    .match { border:1.5px solid; padding:4px 7px; font-weight:700; }
    .role-card p { color:var(--muted); flex:1; }
    .tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
    .tag { padding:4px 7px; border:1px solid #777; color:#555; font-size:12px; }
    .center-link { display:block; background:none; border:0; margin:30px auto 0; border-bottom:1px solid; padding:5px; }
    /* Figma node 280:233 — 探索岗位选择 */
    #roles {
      padding:0;
      text-align:left;
      overflow:hidden;
      background:#fff;
      background-image:none;
    }
    #roles.active { display:block; }
    .roles-explore {
      position:relative;
      width:100%;
      height:100%;
      min-height:calc(100dvh - 96px);
      background:#fff;
    }
    .roles-return-recommend {
      position:absolute;
      z-index:20;
      top:clamp(16px,2.6vh,28px);
      left:clamp(18px,4vw,58px);
      padding:7px 4px;
      border:0;
      border-bottom:2px solid #f2c94c;
      background:rgba(255,255,255,.9);
      font-weight:700;
    }
    .roles-explore-scene {
      position:relative;
      width:100%;
      max-width:1440px;
      margin:0 auto;
      height:100%;
      min-height:calc(100dvh - 96px);
      aspect-ratio:1440 / 909;
    }
    .roles-explore-floor-wrap {
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      height:47.74%;
      overflow:hidden;
      pointer-events:none;
      z-index:0;
    }
    .roles-explore-floor {
      position:absolute;
      left:0;
      top:-166.05%;
      width:100%;
      height:266.05%;
      max-width:none;
      object-fit:cover;
      object-position:center bottom;
      pointer-events:none;
    }
    .roles-explore-desk-stage {
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:1;
    }
    .roles-explore-desk-item {
      position:absolute;
      object-fit:contain;
      pointer-events:none;
      transform-origin:center center;
    }
    .roles-explore-node {
      position:absolute;
      width:9%;
      min-width:88px;
      max-width:130px;
      padding:0;
      border:0;
      background:transparent;
      cursor:pointer;
      z-index:8;
      transition:z-index 0s;
    }
    .roles-explore-node:hover,
    .roles-explore-node:focus-visible {
      z-index:10;
      outline:none;
    }
    .roles-explore-avatar {
      display:block;
      width:100%;
      aspect-ratio:1;
      transition:transform .28s cubic-bezier(.34,1.4,.64,1);
      transform-origin:center center;
    }
    .roles-explore-avatar img {
      width:100%;
      height:100%;
      display:block;
      object-fit:contain;
    }
    .roles-explore-node:hover .roles-explore-avatar,
    .roles-explore-node:focus-visible .roles-explore-avatar {
      transform:scale(1.18);
    }
    .roles-explore-bubble {
      position:absolute;
      display:block;
      pointer-events:none;
    }
    .roles-explore-bubble-bg {
      width:100%;
      height:auto;
      display:block;
    }
    .roles-explore-bubble-text {
      position:absolute;
      left:10%;
      right:8%;
      top:20%;
      font-size:clamp(11px,1.15vw,16px);
      line-height:1.35;
      color:#494949;
      font-family:"Microsoft YaHei","SimHei",sans-serif;
      text-align:center;
    }
    .roles-explore-bubble--ui {
      left:-42%;
      bottom:88%;
      width:min(210px,22vw);
    }
    .roles-explore-bubble--pm {
      left:-8%;
      bottom:92%;
      width:min(210px,22vw);
    }
    .roles-explore-bubble--dev {
      left:-12%;
      bottom:86%;
      width:min(210px,22vw);
    }
    .roles-explore-bubble--data {
      right:-28%;
      left:auto;
      bottom:90%;
      width:min(230px,24vw);
    }
    .roles-explore-bubble--ops {
      left:-8%;
      bottom:92%;
      width:min(240px,25vw);
    }
    .roles-explore-bubble--data .roles-explore-bubble-text {
      left:8%;
      right:10%;
    }
    @media (max-width:900px) {
      #roles { padding:0; }
      .roles-return-recommend { top:12px; left:14px; font-size:13px; }
      .roles-explore,
      .roles-explore-scene {
        min-height:calc(100dvh - 70px);
      }
      .roles-explore-node {
        min-width:64px;
        max-width:96px;
      }
      .roles-explore-bubble-text { font-size:10px; }
    }
    @media (max-width:800px) {
      #roles {
        overflow-x:hidden;
        overflow-y:auto;
      }
      .roles-explore {
        height:auto;
        min-height:100%;
      }
      .roles-explore-scene {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        align-content:start;
        gap:22px 18px;
        height:auto;
        min-height:100%;
        padding:58px 24px 390px;
        aspect-ratio:auto;
        overflow:hidden;
      }
      .roles-explore-node {
        position:relative;
        left:auto !important;
        top:auto !important;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-self:stretch;
        width:100%;
        min-width:0;
        max-width:none;
        min-height:132px;
      }
      .roles-explore-avatar {
        width:clamp(78px,13vw,96px);
      }
      .roles-explore-bubble,
      .roles-explore-bubble--ui,
      .roles-explore-bubble--pm,
      .roles-explore-bubble--dev,
      .roles-explore-bubble--data,
      .roles-explore-bubble--ops {
        position:relative;
        inset:auto;
        width:min(100%,190px);
        margin:0 auto -2px;
      }
      .roles-explore-bubble-text {
        font-size:12px;
        line-height:1.35;
        white-space:normal;
        overflow-wrap:anywhere;
      }
      .roles-explore-floor-wrap {
        height:350px;
      }
      .roles-explore-desk-stage {
        inset:auto 0 0;
        height:360px;
      }
    }
    @media (max-width:520px) {
      .roles-explore-scene {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px 14px;
        padding:52px 18px 340px;
      }
      .roles-explore-node {
        min-height:124px;
      }
      .roles-explore-node:last-child {
        grid-column:1 / -1;
        justify-self:center;
        width:calc((100% - 14px) / 2);
      }
      .roles-explore-avatar {
        width:78px;
      }
      .roles-explore-bubble,
      .roles-explore-bubble--ui,
      .roles-explore-bubble--pm,
      .roles-explore-bubble--dev,
      .roles-explore-bubble--data,
      .roles-explore-bubble--ops {
        width:min(100%,160px);
      }
      .roles-explore-floor-wrap {
        height:310px;
      }
      .roles-explore-desk-stage {
        height:320px;
      }
    }
    @media (prefers-reduced-motion:reduce) {
      .roles-explore-avatar { transition:none; }
      .roles-explore-node:hover .roles-explore-avatar,
      .roles-explore-node:focus-visible .roles-explore-avatar { transform:none; }
    }
    .fan-card { --r:0deg; --y:0px; position:relative; z-index:1; flex:0 0 clamp(210px,17vw,270px); height:clamp(310px,42vh,390px); margin-left:clamp(-58px,-3vw,-35px); padding:24px 22px 20px; border:2px solid var(--ink); background:#eee; box-shadow:7px 8px 0 rgba(0,0,0,.16); text-align:left; display:flex; flex-direction:column; transform:translateY(var(--y)) rotate(var(--r)); transform-origin:50% 90%; transition:transform .2s ease,box-shadow .2s ease,z-index 0s; }
    .fan-card:first-child { margin-left:0; --r:-7deg; --y:15px; background:#d9d9d9; }
    .fan-card:nth-child(2) { --r:-3deg; --y:4px; background:#f5f5f5; z-index:2; }
    .fan-card:nth-child(3) { --r:2deg; --y:-8px; background:#c9c9c9; z-index:3; }
    .fan-card:nth-child(4) { --r:5deg; --y:5px; background:#ececec; z-index:4; }
    .fan-card:nth-child(5) { --r:8deg; --y:18px; background:#d4d4d4; z-index:5; }
    .fan-card:hover,.fan-card:focus-within { z-index:9; transform:translateY(calc(var(--y) - 18px)) rotate(0deg); box-shadow:10px 14px 0 rgba(0,0,0,.2); }
    .fan-number { width:34px; height:34px; border:1.5px solid; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; margin-bottom:18px; }
    .fan-card h2 { font-size:clamp(20px,1.5vw,27px); line-height:1.15; padding-bottom:13px; margin-bottom:12px; border-bottom:2px solid; }
    .fan-card p { color:#555; min-height:52px; margin-bottom:10px; }
    .fan-list { list-style:none; padding:0; margin:0 0 14px; font-size:13px; line-height:1.75; }
    .fan-list li::before { content:'＋'; margin-right:5px; font-weight:700; }
    .fan-card .btn { width:100%; margin-top:auto; padding:10px 8px; }
    .task-top { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--ink); padding-bottom:22px; margin-bottom:26px; }
    .task-top h3 { font-size:18px; }
    .task-progress { width:230px; text-align:center; }
    .task-progress .bar { width:230px; height:10px; margin:7px 0 0 auto; }
    .scenario { background:var(--soft); border:1.5px solid var(--ink); padding:14px; margin:15px 0 28px; }
    .question { max-width:800px; margin:auto; }
    .options { display:grid; gap:10px; margin:30px 0 30px; }
    .option { border:2px solid var(--ink); padding:14px; background:#fff; text-align:left; }
    .option.selected { background:var(--ink); color:white; }
    .task-actions { display:flex; justify-content:flex-end; }
    .ranking { display:grid; gap:9px; max-width:650px; margin:22px 0 30px; }
    .sort-item { display:grid; grid-template-columns:36px 1fr; align-items:center; border:2px solid; min-height:58px; background:#fff; cursor:grab; transition:transform .12s ease, background .12s ease, opacity .12s ease; }
    .sort-item:active { cursor:grabbing; }.sort-item.dragging { opacity:.35; }.sort-item.drag-over { background:var(--soft); transform:translateY(4px); }
    .handle { text-align:center; font-size:19px; color:#666; }
    .drag-tip { color:var(--muted); font-size:13px; margin-top:-10px; }
    .matching-board { display:grid; grid-template-columns:1fr 1fr; gap:150px; position:relative; min-height:360px; margin:25px 0; }
    .match-column { display:grid; align-content:start; gap:13px; z-index:1; }.match-column h3 { margin:0 0 4px; font-size:14px; }
    .match-item { min-height:48px; border:2px solid var(--ink); background:#fff; padding:11px 14px; display:flex; align-items:center; cursor:pointer; transition:background .14s ease,color .14s ease; }
    .match-item.selected { background:var(--ink); color:#fff; }.match-item.connected { background:var(--soft); }.match-item.target { justify-content:space-between; }.match-item.target::after { content:'○'; font-size:19px; }
    .match-lines { position:absolute; z-index:0; inset:36px 0 0; width:100%; height:calc(100% - 36px); pointer-events:none; overflow:visible; }.match-lines line { stroke:var(--ink); stroke-width:2.5; }.match-lines circle { fill:var(--ink); }
    .match-tip { color:var(--muted); font-size:13px; margin-top:-9px; }
    .evidence-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:25px; margin:20px 0 28px; }
    .material { border:2px solid; padding:17px; background:var(--soft); }
    .material li { margin:12px 0; }
    .check-option { display:flex; gap:9px; align-items:flex-start; border:1.5px solid; padding:12px; margin-bottom:9px; }
    .check-option input { width:auto; margin-top:3px; }
    .report { max-width:1040px; margin:auto; }
    .report-header { display:flex; justify-content:space-between; align-items:center; }
    .summary { border:2px solid; display:grid; grid-template-columns:190px 1fr; gap:22px; margin:22px 0; padding:24px; }
    .score { font-size:20px; font-weight:700; text-align:center; border-right:1px solid; padding-right:20px; display:grid; place-content:center; line-height:1.35; }
    .score small { display:block; font-size:13px; font-weight:400; color:var(--muted); margin-top:6px; }
    .report-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:20px; margin:20px 0; }
    .section { border:2px solid; padding:20px; }
    .section h3 { font-size:18px; }
    .radar-wrap { display:grid; grid-template-columns:1fr 160px; align-items:center; gap:8px; }
    .radar { width:260px; height:245px; position:relative; margin:auto; }
    .radar svg { width:100%; height:100%; overflow:visible; }
    .legend { display:grid; gap:9px; font-size:12px; }
    .key { display:flex; align-items:center; gap:7px; }.key i { width:24px; height:9px; display:inline-block; border-top:3px solid #222; }.key i.mine { border-color:#888; }
    .insight { border-left:5px solid var(--ink); padding:10px 12px; background:var(--soft); margin:9px 0; }
    .basis { padding-left:20px; margin:0; }.basis li { margin:9px 0; }
    .report-actions { display:flex; gap:12px; justify-content:center; margin-top:24px; }
    .tabs { display:flex; gap:10px; margin:25px 0 18px; }.tab { border:1.5px solid; background:#fff; padding:8px 15px; }.tab.active { background:#222;color:#fff; }
    .track-list { display:grid; gap:11px; }
    .track-item { display:grid; grid-template-columns:1.1fr 1.2fr .6fr auto; gap:15px; align-items:center; border:2px solid; padding:16px; }
    .status { display:inline-block; padding:3px 7px; border:1px solid; font-size:12px; }.status.completed { background:#222;color:#fff; }
    .trend { margin-top:24px; border:2px solid; padding:20px; }.trend-box { height:190px; position:relative; margin:12px 0 8px; border-left:2px solid;border-bottom:2px solid; background:linear-gradient(#eee 1px,transparent 1px); background-size:100% 47px; }.trend-box svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }.ability { display:flex; flex-wrap:wrap; gap:10px; }.ability span { border:1px solid; padding:7px 10px; }
    .drawer-shade { display:none; position:absolute; inset:0; background:rgba(0,0,0,.22); z-index:10; }.drawer-shade.show { display:block; }.drawer { position:absolute; z-index:11; top:0; right:-420px; width:390px; height:100%; background:#fff; border-left:2px solid; padding:32px; transition:right .25s; }.drawer.show { right:0; }.drawer-head { display:flex; justify-content:space-between; }.close { border:0; background:#fff; font-size:24px; }.avatar { width:68px; height:68px; border:2px solid; border-radius:50%; display:grid;place-items:center;margin:30px 0 12px; }.profile-id { color:var(--muted); font-size:12px; }.drawer-menu { list-style:none; margin:32px 0; padding:0; border-top:1px solid; }.drawer-menu li { padding:15px 4px; border-bottom:1px solid; display:flex; justify-content:space-between; }.drawer-menu li::after { content:'›'; font-size:20px; }.drawer-menu .logout { margin-top:16px; border:1px solid; padding:12px; display:block; text-align:center; }
    @media (max-width:850px) { .shell{width:100%;margin:0;box-shadow:none;border:0}.nav{padding:0 20px}.links{gap:12px}.screen{padding:35px 24px}#home{padding:0}.warmup-panel{padding:25px 18px}.warmup-canvas{min-height:520px}.warmup-center{width:88%}.thought-bubble{font-size:12px;padding:8px 11px;min-height:38px}.thought-bubble:nth-of-type(1){left:0;top:4%}.thought-bubble:nth-of-type(2){right:0;top:13%}.thought-bubble:nth-of-type(3){left:0;top:65%}.thought-bubble:nth-of-type(4){right:0;top:72%}.thought-bubble:nth-of-type(5){left:5%;bottom:3%}.thought-bubble:nth-of-type(6){right:4%;bottom:11%}.home-entry-panel{padding:38px 24px}.home-entry-panel .entry-grid{margin-top:36px}.entry-grid,.report-grid,.evidence-grid{grid-template-columns:1fr}.recommendations{min-height:410px;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 16px 44px}.recommend-card,.recommend-card:first-child{flex:0 0 82vw;height:370px;margin-left:14px;transform:none;scroll-snap-align:center}.recommend-card:hover,.recommend-card:focus-within{transform:translateY(-8px)}.roles{min-height:390px;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:25px 20px 42px}.fan-card,.fan-card:first-child{flex:0 0 78vw;height:350px;margin-left:14px;transform:none;scroll-snap-align:center}.fan-card:hover,.fan-card:focus-within{transform:translateY(-8px)}.task-top{display:block}.task-progress{text-align:left;margin-top:16px}.task-progress .bar{margin-left:0}.matching-board{grid-template-columns:1fr;gap:32px}.match-lines{display:none}.summary{grid-template-columns:1fr}.score{border-right:0;border-bottom:1px solid;padding:0 0 15px}.track-item{grid-template-columns:1fr}.radar-wrap{grid-template-columns:1fr} }
    @media (prefers-reduced-motion:reduce) { .thought-bubble,.warmup-note::after,.intro-mark,.intro-hint,.intro-line { animation:none; } #home { scroll-behavior:auto; } }

    /* Doodle paper theme — inspired by the supplied hand-drawn references */
    :root { --ink:#454149; --muted:#746f77; --line:#58535b; --soft:#f5eee4; --paper:#fffaf0; --shade:#e8dfd3; --coral:#ff6240; --yellow:#ffd15a; --mint:#67d6c8; --pink:#f58bb7; --violet:#bd91ef; --blue:#5ebfd7; }
    body { background:#171717; color:var(--ink); font-family:"Kaiti SC","STKaiti","KaiTi","Comic Sans MS",cursive; }
    .shell { background:var(--paper); }
    .shell::before { content:""; position:absolute; z-index:40; top:0; left:0; right:0; height:7px; background:linear-gradient(90deg,var(--coral),var(--yellow),var(--mint),var(--blue),var(--pink),var(--violet)); pointer-events:none; }
    .nav { position:relative; z-index:8; padding-top:5px; background:rgba(255,250,240,.96); border-bottom:2px dashed var(--line); }
    .brand,h1,h2,h3,.btn,.field-label,label { font-family:"Marker Felt","Kaiti SC","STKaiti","KaiTi","Comic Sans MS",cursive; }
    .brand { letter-spacing:.03em; }
    .logo { background:#fff0a8; border-color:var(--line); border-radius:45% 55% 43% 57%; transform:rotate(-4deg); box-shadow:2px 3px 0 #d9cfae; }
    .links button { font-weight:700; color:var(--ink); }
    .links button.active { border-bottom:4px solid var(--yellow); transform:rotate(-1deg); }
    .screen { background-color:var(--paper); background-image:radial-gradient(rgba(69,65,73,.075) 1px,transparent 1.2px); background-size:22px 22px; }
    h1 { color:#403c43; letter-spacing:.015em; }
    .subtitle { color:var(--muted); }
    .btn { background:var(--coral); color:#fff; border:2px solid var(--line); border-radius:5px 11px 6px 9px; box-shadow:5px 6px 0 #4a464e; transform:rotate(-1deg); transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; }
    .btn:hover { transform:translateY(-3px) rotate(0deg); box-shadow:7px 9px 0 #4a464e; filter:saturate(1.08); }
    .btn.ghost { background:#fff8e9; color:var(--ink); }
    .back { color:var(--ink); border-bottom:2px solid var(--yellow); }
    .card,.role-card,.section,.summary,.trend,.track-item { border-color:var(--line); border-radius:8px 13px 7px 11px; box-shadow:5px 6px 0 rgba(69,65,73,.18); }
    .home-entry-panel { background:#fffaf0; border-top:2px dashed var(--line); }
    .home-entry-panel .warmup-kicker,.warmup-kicker { background:#fff2aa; border:0; border-bottom:4px solid var(--yellow); transform:rotate(-1deg); }
    .entry-card { position:relative; overflow:visible; background:#fff8eb; }
    .entry-card:first-child { background:linear-gradient(145deg,#fff7e5 0%,#ffe0d4 100%); transform:rotate(-1deg); }
    .entry-card:last-child { background:linear-gradient(145deg,#f6fff9 0%,#d9f5ef 100%); transform:rotate(1deg); }
    .entry-card::before { content:""; position:absolute; width:76px; height:20px; top:-11px; left:calc(50% - 38px); background:rgba(255,210,90,.72); border:1px solid rgba(120,100,55,.18); transform:rotate(-3deg); }
    .intro { background-color:#fffaf0; background-image:radial-gradient(rgba(69,65,73,.08) 1px,transparent 1.2px); background-size:22px 22px; }
    .intro-mark { background:#fff1a1; border-radius:46% 54% 42% 58%; box-shadow:5px 6px 0 #d9d0bb; }
    .intro-line { height:5px; border-radius:50%; background:linear-gradient(90deg,var(--coral),var(--yellow),var(--mint),var(--pink),var(--violet)); }
    .intro-hint { background:var(--coral); color:#fff; border:2px solid var(--line); box-shadow:4px 5px 0 var(--line); transform:rotate(-2deg); }
    .warmup-panel { background:#fffaf0; }
    .warmup-center h1 { text-shadow:2px 2px 0 #fff,4px 4px 0 rgba(255,209,90,.35); }
    .thought-bubble { border-color:var(--line); background:#fff1a8; box-shadow:4px 5px 0 rgba(69,65,73,.22); }
    .thought-bubble:nth-of-type(2),.thought-bubble:nth-of-type(5) { background:#ccefe8; }
    .thought-bubble:nth-of-type(3),.thought-bubble:nth-of-type(6) { background:#f7c8d9; }
    .thought-bubble:nth-of-type(4) { background:#ded0f5; }
    .form { position:relative; padding:30px; background:#f7f0e7; border:2px solid var(--line); border-radius:10px 16px 8px 14px; box-shadow:7px 8px 0 rgba(69,65,73,.18); }
    .form::before { content:""; position:absolute; width:84px; height:22px; top:-12px; right:36px; background:rgba(255,195,88,.7); transform:rotate(4deg); }
    input,textarea,select { background:#fffaf2; border-color:var(--line); border-radius:4px 8px 5px 7px; }
    input:focus,textarea:focus,select:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,98,64,.16); }
    .chip,.tag,.tab { background:#fff8ea; border-color:var(--line); border-radius:3px 7px 4px 6px; }
    .chip:nth-child(3n+1),.tag:nth-child(3n+1) { background:#fff1b9; }
    .chip:nth-child(3n+2),.tag:nth-child(3n+2) { background:#d9f3ed; }
    .chip:nth-child(3n),.tag:nth-child(3n) { background:#f5d7e4; }
    .chip.selected,.tab.active { background:var(--coral); color:#fff; box-shadow:3px 4px 0 var(--line); }
    .loading-icon { background:#fff0a1; border-radius:44% 56% 50% 48%; box-shadow:5px 6px 0 #d9cfb6; }
    .bar { background:#fff8ea; border-radius:99px; overflow:hidden; }
    .bar > span { background:linear-gradient(90deg,var(--coral),var(--yellow),var(--mint)); }
    .recommend-card,.fan-card { border-color:var(--line); border-radius:7px 14px 8px 12px; box-shadow:8px 10px 0 rgba(69,65,73,.24); }
    .recommend-card::before,.fan-card::before { content:""; position:absolute; width:68px; height:20px; left:calc(50% - 34px); top:-12px; background:rgba(255,215,90,.76); transform:rotate(-3deg); border:1px solid rgba(100,80,50,.14); }
    .recommend-card:first-child,.fan-card:first-child { background:linear-gradient(145deg,#ffc760,#ff8a62); }
    .recommend-card:nth-child(2),.fan-card:nth-child(2) { background:linear-gradient(145deg,#78ddd1,#5cbfd8); }
    .recommend-card:nth-child(3),.fan-card:nth-child(3) { background:linear-gradient(145deg,#f49ac1,#c49aef); }
    .fan-card:nth-child(4) { background:linear-gradient(145deg,#ffe088,#ffb5a4); }
    .fan-card:nth-child(5) { background:linear-gradient(145deg,#a9ead5,#86c9ed); }
    .recommend-card h2,.fan-card h2 { border-bottom:2px dashed var(--line); }
    .recommend-label { background:#fff8df; border-radius:4px 8px 3px 7px; transform:rotate(2deg); }
    .recommend-number,.fan-number { background:rgba(255,255,255,.72); border-style:dashed; }
    .recommend-card .tag,.fan-card .tag { background:rgba(255,255,255,.68); }
    .fan-list li::before { color:#fff; text-shadow:1px 1px 0 var(--line); }
    .task-top { border-bottom:2px dashed var(--line); }
    .scenario,.material { background:#fff1ad; border-color:var(--line); transform:rotate(-.4deg); box-shadow:4px 5px 0 rgba(69,65,73,.17); }
    .option,.sort-item,.check-option,.match-item { background:#fffaf0; border-color:var(--line); border-radius:4px 9px 5px 7px; box-shadow:3px 4px 0 rgba(69,65,73,.14); }
    .option:hover,.sort-item:hover,.match-item:hover { background:#fff0b5; transform:translateY(-2px); }
    .option.selected,.match-item.selected { background:var(--coral); color:#fff; }
    .matching-board { background:rgba(255,255,255,.35); padding:16px; border:2px dashed rgba(69,65,73,.34); }
    .score { background:#fff0ad; border-right:2px dashed var(--line); }
    .section:nth-child(odd),.track-item:nth-child(odd) { background:#fff4df; }
    .section:nth-child(even),.track-item:nth-child(even) { background:#e3f5f0; }
    .insight { background:#fff0b9; border-left-color:var(--coral); transform:rotate(-.25deg); }
    .trend-box { background-color:#fffaf0; background-image:linear-gradient(rgba(69,65,73,.09) 1px,transparent 1px); }
    .ability span { background:#fff0b9; border-radius:4px 8px 5px 7px; }
    .drawer { background:#fff8ea; border-left:2px dashed var(--line); box-shadow:-9px 0 0 rgba(69,65,73,.15); }
    .avatar { background:#f7c8d9; border-radius:46% 54% 48% 52%; }
    .drawer-menu li { border-bottom:1px dashed var(--line); }
    @media (max-width:850px) { .nav { border-bottom-style:dashed; } .form { padding:20px; } .recommend-card,.fan-card { box-shadow:6px 7px 0 rgba(69,65,73,.2); } }

    /* Figma node 8:67 — 职业体验报告 */
    #report.active { height:100vh; height:100dvh; padding:0; }
    #report .report:not(.figma-report) { display:none; }
    .shell:has(#report.active) > .nav { display:none; }
    .figma-report { min-height:100%; max-width:none; background:#fff; color:#1e1e1e; font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
    .figma-report-nav { width:min(1280px,calc(100% - 48px)); height:100px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
    .figma-brand,.figma-user { display:flex; align-items:center; gap:44px; font-size:18px; font-weight:800; }
    .figma-brand img { width:62px; height:38px; object-fit:contain; object-position:left center; }
    .figma-brand span { position:relative; }.figma-brand .active::after { content:""; position:absolute; height:4px; border-radius:99px; background:#aac393; left:50%; bottom:-12px; transform:translateX(-50%); width:30px; }
    .figma-user { gap:12px; font-size:16px; }.figma-user img { width:46px; height:46px; border-radius:50%; }
    .figma-report-body { width:min(1280px,calc(100% - 48px)); margin:auto; padding:14px 0 72px; }
    .figma-hero { min-height:530px; display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; gap:36px; }.figma-copy { padding:0 14px 0 18px; }.figma-report-return { display:flex; align-items:center; gap:18px; color:#aac393; font-size:16px; margin-bottom:25px; }
    .figma-back { border:0; background:transparent; color:#111; font:400 42px/1 Arial; padding:0; }.figma-eyebrow { margin:0; font-size:19px; }    .figma-copy h1 { color:#aac393; font-size:clamp(46px,5.25vw,72px); letter-spacing:-.06em; margin:0 0 12px; }
    .figma-hero-lead { margin:8px 0 0; font-size:19px; color:#20232a; }
    .figma-copy > p:last-child { max-width:440px; color:#494949; font-size:16px; line-height:1.9; margin-top:16px; }
    .figma-hero-art { display:block; width:100%; max-height:520px; object-fit:contain; object-position:center; }
    .figma-evidence-panel { min-height:420px; background:#f8fff2; border-radius:30px; padding:38px 48px; display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:40px; align-items:start; }
    .figma-evidence-left h2 { color:#779d56; font-size:32px; margin:0 0 18px; }
    .figma-radar-wrap { width:100%; max-width:369px; }
    .figma-radar-wrap svg { display:block; width:100%; height:auto; }
    .figma-evidence-panel h2 { color:#779d56; font-size:32px; margin:0; }
    .figma-evidence-copy h3 { color:#56703f; font-size:24px; margin:0 0 16px; line-height:1.35; }
    .figma-signal-list { display:flex; flex-direction:column; gap:18px; }
    .figma-signal-card { padding:0; border:0; background:transparent; }
    .figma-signal-head { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
    .figma-signal-num { color:#aac393; font-size:15px; font-weight:800; letter-spacing:.04em; }
    .figma-signal-card h4 { margin:0; color:#39571f; font-size:20px; font-weight:800; }
    .figma-signal-card p { margin:0 0 6px; color:#39571f; font-size:15px; line-height:1.55; }
    .figma-signal-card p:last-child { margin-bottom:0; }
    .figma-signal-empty { color:#56703f; font-size:15px; line-height:1.7; margin:0; }
    .figma-evidence-toggle { margin-top:14px; padding:0; border:0; background:transparent; color:#779d56; font-size:15px; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
    .figma-signal-list--all { margin-top:16px; padding-top:16px; border-top:1px dashed #c5d9b8; }
    .figma-signal-list--all.is-collapsed { display:none; }
    .figma-notice { color:#56703f; font-size:14px; margin-top:16px; }
    .figma-advice { padding:74px 0 12px; }.figma-advice > h2 { text-align:center; font-size:30px; margin-bottom:32px; }.figma-advice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }.figma-advice-card { min-height:420px; border-radius:22px; padding:30px 28px 18px; display:flex; flex-direction:column; overflow:hidden; }.figma-advice-card span { align-self:center; font-size:13px; padding:4px 12px; border-radius:20px; }.figma-advice-card h3 { text-align:center; font-size:24px; margin:28px 0 14px; }.figma-advice-card p { font-size:16px; line-height:1.75; min-height:84px; }.figma-advice-card img { width:76%; aspect-ratio:1/0.76; object-fit:cover; object-position:center; border-radius:9px; margin:auto auto 0; mix-blend-mode:multiply; }
    .figma-advice-card.coral { background:#fff4f4; }.figma-advice-card.coral span { background:#ffe2e2; color:#f05153; }.figma-advice-card.yellow { background:#fffee4; }.figma-advice-card.yellow span { background:#fffab2; color:#f5a949; }.figma-advice-card.blue { background:#ebfdff; }.figma-advice-card.blue span { background:#bfedff; color:#57b4fb; }.figma-advice-card.green { background:#f8fff2; }.figma-advice-card.green span { background:#d9f9e1; color:#66a95f; }
    .figma-report-actions { display:flex; justify-content:center; gap:16px; padding-top:46px; }.figma-report-actions button { padding:13px 24px; border-radius:99px; font-weight:700; }.figma-secondary { background:#fff; border:1px solid #aac393; color:#779d56; }.figma-primary { background:#aac393; border:1px solid #aac393; color:#fff; }
    @media (max-width:850px) { .figma-report-nav,.figma-report-body { width:min(100% - 32px,1280px); }.figma-report-nav { height:70px; }.figma-brand { gap:20px; font-size:14px; }.figma-brand img { width:44px; }.figma-user b,.figma-brand span:nth-of-type(3) { display:none; }.figma-user img { width:34px; height:34px; }.figma-hero { grid-template-columns:1fr; gap:8px; min-height:0; padding-top:20px; }.figma-copy { padding:0 4px; }.figma-copy h1 { font-size:48px; }.figma-hero-art { max-height:310px; }.figma-evidence-panel { grid-template-columns:1fr; gap:6px; padding:26px 24px; min-height:0; }.figma-evidence-panel h2 { font-size:25px; }.figma-evidence-copy h3 { margin-top:14px; font-size:22px; }.figma-evidence-copy ul { font-size:15px; line-height:1.8; }.figma-advice { padding-top:48px; }.figma-advice > h2 { font-size:23px; }.figma-advice-grid { grid-template-columns:1fr 1fr; gap:12px; }.figma-advice-card { min-height:330px; padding:20px 14px 12px; border-radius:15px; }.figma-advice-card h3 { font-size:17px; margin:16px 0 8px; }.figma-advice-card p { font-size:13px; min-height:95px; }.figma-advice-card img { width:92%; }.figma-report-actions { padding-top:28px; } }

    /* Homepage refresh — white paper, hand-drawn career map */
    .intro { background:#fff; }
    .intro::before { content:""; position:absolute; inset:22px; border:2px dashed rgba(88,83,91,.38); border-radius:22px; pointer-events:none; }
    .intro-inner { width:min(1120px,88%); display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:54px; text-align:left; }
    .intro-copy { position:relative; z-index:1; }
    .intro-mark { width:max-content; height:auto; min-height:0; display:inline-flex; align-items:center; gap:8px; margin:0 0 25px; padding:8px 13px; font-size:12px; letter-spacing:.1em; border:0; border-radius:0; box-shadow:none; animation:none; }
    .intro-mark b { display:grid; place-items:center; width:25px; height:25px; border:2px solid var(--line); border-radius:50% 45% 55% 44%; background:#fff0a1; font-size:10px; }
    .intro h1,.warmup-center h1 { line-height:1.13; letter-spacing:-.04em; }
    .intro h1 { max-width:600px; margin:0 0 18px; font-size:clamp(41px,4.4vw,68px); }
    .intro h1 em,.warmup-center h1 strong { color:var(--coral); font-style:normal; position:relative; font-weight:inherit; }
    .intro h1 em::after,.warmup-center h1 strong::after { content:""; position:absolute; z-index:-1; left:-5px; right:-4px; bottom:5px; height:13px; background:#ffe99f; transform:rotate(-2deg); }
    .intro .subtitle,.warmup-center .subtitle { max-width:480px; margin:0; font-family:Arial,"PingFang SC",sans-serif; font-size:16px; line-height:1.8; }
    .intro-actions,.warmup-actions { display:flex; align-items:center; gap:22px; margin-top:32px; }
    .intro-hint { margin:0; padding:13px 22px; font-size:15px; font-weight:700; animation:none; }
    .intro-note,.warmup-actions small { color:var(--muted); font-family:Arial,"PingFang SC",sans-serif; font-size:12px; }.intro-line { display:none; }
    .intro-scene,.hero-sketch { position:relative; min-height:430px; }.intro-scene svg,.hero-sketch svg { width:100%; height:100%; overflow:visible; }
    .scene-sticker,.mini-role { position:absolute; z-index:2; display:flex; gap:7px; align-items:center; padding:9px 12px; background:#fff; border:2px solid var(--line); border-radius:9px 13px 8px 11px; box-shadow:4px 5px 0 rgba(69,65,73,.2); font-size:13px; font-weight:700; }
    .scene-sticker.one { top:10px; right:-18px; transform:rotate(6deg); }.scene-sticker.two { bottom:25px; left:-18px; transform:rotate(-6deg); background:#dff5ee; }
    .scene-sticker i,.mini-role b,.home-strip i,.warmup-note span { display:grid; place-items:center; width:24px; height:24px; border:1.5px solid var(--line); border-radius:50%; background:#fff0a1; font-style:normal; }
    #home { scroll-snap-type:none; background:#fff; }.warmup-panel { display:block; padding:0; background:#fff; }.warmup-canvas { width:min(1220px,100%); height:auto; min-height:0; margin:0 auto; padding:clamp(48px,7vh,78px) clamp(28px,6vw,80px) 38px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:55px; }.warmup-center { width:auto; position:static; z-index:auto; text-align:left; }.warmup-center h1 { max-width:610px; margin:0 0 18px; font-size:clamp(39px,4.1vw,64px); }.warmup-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; font-family:Arial,"PingFang SC",sans-serif; font-weight:700; }.warmup-kicker::before { content:"✦"; color:var(--coral); }.thought-bubble { display:none; }.warmup-note { position:static; transform:none; display:flex; gap:8px; align-items:center; margin-top:44px; color:var(--ink); font-family:Arial,"PingFang SC",sans-serif; font-size:13px; }.warmup-note::after { display:none; }
    .mini-role { font-family:Arial,"PingFang SC",sans-serif; font-size:12px; }.mini-role.product { left:-16px; top:36px; transform:rotate(-5deg); background:#fff1b9; }.mini-role.data { right:-12px; top:140px; transform:rotate(5deg); background:#d9f3ed; }.mini-role.content { left:4px; bottom:12px; transform:rotate(4deg); background:#f5d7e4; }.mini-role.data b { background:#86dfd1; }.mini-role.content b { background:#f3aac9; }
    .home-strip { width:min(1060px,calc(100% - 56px)); margin:0 auto 42px; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding:17px 21px; border:2px dashed rgba(88,83,91,.42); border-radius:16px; background:#fffdf9; }.home-strip div { display:flex; align-items:center; gap:11px; font-family:Arial,"PingFang SC",sans-serif; font-size:13px; }.home-strip i { flex:0 0 auto; width:31px; height:31px; font-family:"Kaiti SC",cursive; font-weight:700; }.home-entry-panel { min-height:auto; display:block; padding:50px 30px 66px; border-top:2px dashed rgba(88,83,91,.45); background:#fff; }.home-entry-panel .hero { max-width:1060px; margin:auto; text-align:left; }.home-entry-panel h2 { font-size:clamp(28px,3vw,40px); margin:0; }.home-entry-panel .entry-grid { margin-top:30px; max-width:none; grid-template-columns:1fr 1fr; gap:24px; }.entry-card { min-height:230px; padding:26px 28px; }.entry-card h2 { font-size:23px; margin-bottom:10px; }.entry-card .btn { margin-top:18px; }
    @media (max-width:850px) { .nav { height:64px; padding:0 14px; }.screen { height:calc(100vh - 64px); height:calc(100dvh - 64px); }.brand { flex-shrink:0; gap:7px; font-size:14px; white-space:nowrap; }.logo { width:24px; height:24px; }.links { gap:10px; flex-shrink:1; }.links button { padding:7px 0; font-size:12px; white-space:nowrap; }.intro::before { inset:12px; }.intro-inner,.warmup-canvas { grid-template-columns:1fr; gap:18px; }.intro-inner { padding:55px 0 30px; text-align:center; }.intro-copy { display:flex; flex-direction:column; align-items:center; }.intro h1 { font-size:42px; }.intro-actions { justify-content:center; }.intro-scene { min-height:280px; max-width:400px; width:100%; margin:auto; }.scene-sticker.one { right:0; }.scene-sticker.two { left:0; }.warmup-canvas { padding:46px 24px 30px; }.warmup-center { text-align:center; }.warmup-center h1 { max-width:345px; margin-left:auto; margin-right:auto; font-size:35px; line-height:1.18; }.warmup-actions { justify-content:center; flex-wrap:wrap; }.hero-sketch { min-height:300px; max-width:410px; width:100%; margin:auto; }.mini-role { font-size:11px; padding:7px 9px; }.mini-role.product { left:0; top:12px; }.mini-role.data { right:0; top:95px; }.mini-role.content { left:0; bottom:-8px; }.warmup-note { justify-content:center; margin-top:22px; }.home-strip { grid-template-columns:1fr; gap:12px; margin-bottom:30px; }.home-entry-panel { padding:42px 24px 56px; }.home-entry-panel .hero { text-align:center; }.home-entry-panel .entry-grid { grid-template-columns:1fr; }.entry-card { text-align:left; } }

    /* Keep the original homepage composition; switch paper from cream to white. */
    :root { --paper:#fff; }
    .nav { background:rgba(255,255,255,.96); }
    .intro { background-color:#fff; text-align:center; }
    .intro::before { display:none; }
    .intro-inner { width:min(680px,80%); display:block; text-align:center; }
    .intro-mark { width:104px; height:104px; min-height:104px; display:grid; margin:0 auto 26px; padding:0; font-size:25px; letter-spacing:0; border:3px solid var(--ink); border-radius:46% 54% 42% 58%; box-shadow:5px 6px 0 #d9d0bb; animation:introPulse 1.8s ease-in-out infinite; }
    .intro h1 { max-width:none; margin:0 0 12px; font-size:34px; line-height:1.25; letter-spacing:.015em; }
    .intro .subtitle { max-width:none; margin-top:0; font-family:inherit; font-size:16px; line-height:1.5; }
    .intro-line { display:block; }
    .intro-hint { margin-top:26px; padding:9px 18px; font-size:13px; animation:introPulse 1.8s .5s ease-in-out infinite; }
    #home { scroll-snap-type:y; background:transparent; }
    .warmup-panel { display:grid; place-items:center; padding:40px 72px; background:#fff; }
    .warmup-canvas { width:min(1180px,100%); height:min(680px,76vh); min-height:470px; margin:0; padding:0; position:relative; display:grid; grid-template-columns:none; align-items:normal; gap:0; place-items:center; }
    .warmup-center { width:min(760px,72%); position:relative; z-index:2; text-align:center; }
    .warmup-center h1 { max-width:none; margin:0 0 18px; font-size:clamp(32px,3.3vw,52px); line-height:1.2; letter-spacing:normal; }
    .warmup-center .subtitle { max-width:620px; margin:0 auto; font-family:inherit; font-size:16px; line-height:1.5; }
    .warmup-kicker { display:inline-block; margin-bottom:24px; font-family:inherit; font-weight:inherit; }
    .warmup-kicker::before { content:none; }
    .thought-bubble { display:inline-flex; }
    .warmup-note { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); display:block; width:100%; margin-top:0; text-align:center; color:var(--muted); font-family:inherit; font-size:13px; }
    .warmup-note::after { content:'↓'; display:block; }
    .home-entry-panel { min-height:100%; display:grid; place-items:center; padding:50px 90px 64px; background:#fff; border-top:2px dashed var(--line); }
    .home-entry-panel .hero { max-width:980px; margin:0; text-align:center; }
    .home-entry-panel .entry-grid { max-width:880px; margin:clamp(54px,9vh,105px) auto 0; grid-template-columns:1fr 1fr; gap:22px; }
    .entry-illustrations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:880px; margin:10px auto 0; pointer-events:none; }
    .entry-illustrations img { display:block; justify-self:center; width:min(100%,460px); height:clamp(240px,30vh,320px); object-fit:contain; object-position:center top; }
    @media (max-width:850px) {
      .entry-illustrations { grid-template-columns:1fr; gap:0; margin-top:12px; }
      .entry-illustrations img { height:220px; }
    }
    .entry-card { min-height:202px; padding:24px; text-align:left; }
    .entry-card h2 { font-size:24px; margin-bottom:8px; }
    .entry-card .btn { margin-top:0; }
    @media (max-width:850px) { .nav { height:76px; padding:0 20px; }.links { gap:12px; }.links button { padding:10px 0; font-size:inherit; white-space:normal; }.screen { height:calc(100vh - 76px); height:calc(100dvh - 76px); padding:35px 24px; }.warmup-panel { padding:25px 18px; }.warmup-canvas { min-height:520px; height:min(680px,76vh); padding:0; display:grid; }.warmup-center { width:88%; text-align:center; }.warmup-center h1 { max-width:none; margin-left:0; margin-right:0; font-size:clamp(32px,3.3vw,52px); line-height:1.2; }.thought-bubble { display:inline-flex; }.home-entry-panel { padding:38px 24px; }.home-entry-panel .entry-grid { margin-top:36px; grid-template-columns:1fr; }.home-entry-panel .hero { text-align:center; } }

    /* Global type and surface cleanup */
    body, body * { font-family:"PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif !important; }
    *, *::before, *::after { box-shadow:none !important; }
    .bar > span { transition:width .18s ease; }
    .btn:disabled { cursor:not-allowed; opacity:1; background:#d8d2ca; color:#817a74; border-color:#aaa29a; filter:none; transform:none; }
    .btn:disabled:hover { background:#d8d2ca; color:#817a74; border-color:#aaa29a; filter:none; transform:none; }
    .entry-card:first-child { background:#ffe7d8; }
    .entry-card:last-child { background:#ddf4ef; }
    .fan-card:first-child { background:#ffe1a6; }
    .fan-card:nth-child(2) { background:#c9ece7; }
    .fan-card:nth-child(3) { background:#efd3e5; }
    .fan-card:nth-child(4) { background:#ffe5bf; }
    .fan-card:nth-child(5) { background:#d2ece8; }
    /* Softer solid stationery palette for recommended roles */
    .recommend-card:first-child { background:#ffe8c7; }
    .recommend-card:nth-child(2) { background:#d9f0ed; }
    .recommend-card:nth-child(3) { background:#ebddf2; }
    .recommend-card .tag { background:#fffdf8; }
    .recommend-card .btn { background:#f58c72; }

    /* Shared Wayve-style navigation */
    .shell::before { display:none; }
    .nav { height:96px; padding:0 clamp(28px,6vw,120px); gap:64px; justify-content:flex-start; background:#fff !important; border:0; }
    .nav .brand { display:flex; flex:0 0 auto; align-items:center; padding:0; border:0; background:transparent; transform:none; box-shadow:none; }
    .nav .brand img { width:90px; height:50px; object-fit:contain; object-position:left center; }
    .nav .links { gap:58px; }
    .nav .links button { position:relative; padding:12px 0; border:0; background:transparent; color:#171717; font-size:20px; font-weight:700; }
    .nav .links button.active { border:0; transform:none; }
    .nav .links button.active::after { content:""; position:absolute; left:50%; bottom:-5px; width:34px; height:5px; border-radius:99px; background:#aac393; transform:translateX(-50%); }
    .nav .links button[data-nav="home"].active::after { background:#aac393; }
    .nav .links button[data-nav="roles"].active::after { background:#ed9ab8; }
    .nav .links button[data-nav="growth"].active::after { background:#aac393; }
    .figma-report-return { transform:translateY(-24px); margin-bottom:1px; }
    .profile-trigger img,.figma-user img { border-radius:47% 53% 45% 55% / 52% 45% 55% 48%; object-fit:cover; object-position:center 30%; }
    .avatar { overflow:hidden; padding:0; background:#f7c8d9; border-radius:47% 53% 45% 55% / 52% 45% 55% 48%; }
    .avatar img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
    .warmup-panel { padding:0; background:#fff; }
    .reference-hero { position:relative; width:100%; height:100%; overflow:hidden; background:#fff; }
    .reference-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; transform:scale(1.1); transform-origin:center top; }
    .reference-hero::after { content:""; position:absolute; z-index:1; top:0; left:0; right:0; height:76px; background:#fff; }
    .reference-hero-cta { position:absolute; z-index:2; top:39%; left:50%; width:250px; height:72px; transform:translateX(-50%); border:0; background:transparent; color:transparent; cursor:pointer; }
    .reference-hero-cta:focus-visible { outline:3px solid #ff7d2e; outline-offset:4px; border-radius:999px; }
    @media (max-width:700px) { .reference-hero img { transform:scale(1.24); object-position:center 52%; }.reference-hero::after { height:54px; }.reference-hero-cta { top:37%; width:180px; height:52px; } }

    /* Editable HTML recreation of the home hero — line-art workspace style */
    .reference-hero-html { --hero-ink:#20232a; --hero-paper:#fffdfa; --hero-cream:#fbf5e8; --hero-lavender:#eae5ff; --hero-blue:#b8e2fb; --hero-yellow:#ffe497; --hero-coral:#ff8659; --hero-mint:#d8f1e8; position:relative; isolation:isolate; width:100%; height:100%; min-height:640px; overflow:hidden; color:var(--hero-ink); background:var(--hero-paper); font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
    .reference-hero-html::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 1px 1px,rgba(32,35,42,.075) 1px,transparent 1.1px) 0 0/22px 22px; opacity:.5; }
    .reference-hero-html::after { content:""; position:absolute; z-index:-1; top:44%; left:50%; width:82%; height:34%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(255,228,151,.21),transparent 67%); }
    .landing-head { position:absolute; z-index:3; top:8%; left:50%; width:min(850px,58vw); transform:translateX(-50%); text-align:center; }
    .landing-kicker { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:2px solid var(--hero-ink); border-radius:999px; background:#fff; font-size:12px; font-weight:800; box-shadow:3px 3px 0 rgba(32,35,42,.18); }
    .landing-kicker i { width:10px; height:10px; border:2px solid var(--hero-ink); border-radius:50%; background:var(--hero-coral); }
    .landing-head h1 { margin:17px 0 13px; color:var(--hero-ink); font-family:"PingFang SC","Microsoft YaHei",sans-serif; font-size:clamp(34px,3.65vw,65px); font-weight:900; line-height:1.19; letter-spacing:-.065em; }
    .landing-head h1 span { position:relative; z-index:0; white-space:nowrap; }
    .landing-head h1 span::after { content:""; position:absolute; z-index:-1; right:-4px; bottom:5px; left:-5px; height:14px; border-radius:9px; background:var(--hero-yellow); transform:rotate(-1.5deg); }
    .landing-head > p { margin:0 auto; max-width:650px; color:#676b74; font-size:clamp(13px,1.05vw,17px); }
    .landing-cta { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-width:210px; margin-top:23px; padding:14px 23px; border:2px solid var(--hero-ink); border-radius:999px; background:var(--hero-coral); box-shadow:5px 5px 0 var(--hero-ink); color:#fff; font-family:"PingFang SC","Microsoft YaHei",sans-serif; font-size:20px; font-weight:900; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
    .landing-cta:hover { transform:translate(-2px,-3px); box-shadow:8px 8px 0 var(--hero-ink); }
    .landing-cta b { font-size:25px; line-height:.8; }
    .landing-head small { display:block; margin-top:14px; color:#777b84; font-size:13px; }
    .landing-scroll-cue { position:absolute; z-index:4; left:50%; bottom:clamp(28%,calc(35% - 4vh + 28.8px),35%); width:48px; height:48px; padding:0; transform:translateX(-50%); border:2px solid var(--hero-ink); border-radius:50%; background:#fff; color:var(--hero-ink); font-size:30px; font-weight:700; line-height:42px; cursor:pointer; animation:landingScrollCue 1.7s ease-in-out infinite; }
    @keyframes landingScrollCue { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(6px); } }
    .hero-plane,.hero-sparkles { position:absolute; z-index:1; color:var(--hero-ink); }
    .home-hero-lower-illustration { position:absolute; z-index:1; left:50%; bottom:5%; display:block; width:min(1180px,90vw); height:auto; transform:translateX(-50%); pointer-events:none; }
    .hero-plane { top:14%; left:4%; width:clamp(130px,13vw,220px); transform:rotate(-6deg); }
    .hero-sparkles { top:43%; left:52%; width:clamp(76px,9vw,130px); transform:rotate(8deg); }
    .hero-doodle { position:absolute; z-index:1; width:56px; height:20px; border:2px solid var(--hero-ink); border-top:0; border-radius:0 0 70px 70px; }
    .hero-doodle::before,.hero-doodle::after { content:""; position:absolute; bottom:-2px; width:25px; height:19px; border:2px solid var(--hero-ink); border-bottom:0; border-radius:50% 50% 0 0; background:var(--hero-paper); }
    .hero-doodle::before { left:5px; }.hero-doodle::after { right:5px; }
    .cloud-one { top:41%; left:16%; }.cloud-two { top:46%; right:8%; transform:scale(.8); }
    .landing-path { position:absolute; z-index:0; border:2px dashed #8b9ba6; border-left:0; border-bottom:0; border-radius:0 75% 0 0; opacity:.8; }
    .path-left { left:10%; bottom:19%; width:32%; height:19%; transform:rotate(8deg); }
    .path-right { right:13%; bottom:19%; width:27%; height:23%; transform:rotate(-15deg); }
    .career-tag { position:absolute; z-index:2; display:flex; align-items:center; gap:10px; min-width:150px; max-width:220px; padding:12px 15px; border:2px solid var(--hero-ink); border-radius:14px 17px 13px 16px; box-shadow:4px 5px 0 rgba(32,35,42,.16); font-size:14px; font-weight:800; line-height:1.4; }
    .career-tag i { flex:0 0 auto; width:13px; height:13px; border:2px solid var(--hero-ink); border-radius:50%; background:white; }
    .tag-a { top:43%; left:9%; background:var(--hero-yellow); transform:rotate(-1deg); }.tag-b { top:36%; right:11%; background:var(--hero-mint); transform:rotate(1.5deg); }.tag-c { left:3%; bottom:21%; background:#ffd5d9; transform:rotate(1.5deg); }.tag-d { left:30%; bottom:7%; background:#d8f1e8; transform:rotate(-1deg); }.tag-e { right:10%; bottom:7%; background:#ffd5d9; transform:rotate(-1.4deg); }
    .career-scene { position:absolute; z-index:2; left:50%; bottom:3.5%; width:min(880px,76vw); height:37%; transform:translateX(-50%); pointer-events:none; }
    .scene-person { position:absolute; bottom:9%; width:130px; height:190px; }
    .person-left { left:3%; }.person-center { left:43%; transform:scale(.9); transform-origin:bottom center; }
    .person-head { position:absolute; top:8px; left:42px; width:44px; height:44px; border:3px solid var(--hero-ink); border-radius:50% 49% 48% 52%; background:#fff6e8; }
    .person-head::before { content:""; position:absolute; top:-7px; left:-3px; width:42px; height:24px; border:3px solid var(--hero-ink); border-right:0; border-bottom:0; border-radius:50% 50% 0 0; background:#252831; }
    .person-body { position:absolute; top:49px; left:27px; width:74px; height:105px; border:3px solid var(--hero-ink); border-radius:36px 36px 17px 17px; background:var(--hero-lavender); transform:rotate(-4deg); }
    .person-body::before,.person-body::after { content:""; position:absolute; top:84px; width:12px; height:58px; border:3px solid var(--hero-ink); border-top:0; background:#fff6e8; }
    .person-body::before { left:12px; transform:rotate(8deg); }.person-body::after { right:12px; transform:rotate(-8deg); }
    .person-laptop { position:absolute; top:104px; left:75px; width:66px; height:45px; border:3px solid var(--hero-ink); border-radius:4px; background:var(--hero-cream); transform:rotate(10deg); }.person-laptop::after { content:""; position:absolute; bottom:-10px; left:-8px; width:78px; height:10px; border:3px solid var(--hero-ink); border-radius:3px; background:#d9dde2; }
    .person-paper { position:absolute; top:78px; left:77px; width:46px; height:62px; border:3px solid var(--hero-ink); border-radius:4px; background:var(--hero-cream); transform:rotate(12deg); }.person-paper::before { content:""; position:absolute; inset:13px 8px auto; height:3px; background:var(--hero-ink); box-shadow:0 11px 0 var(--hero-ink),0 22px 0 var(--hero-ink); }
    .scene-bot { position:absolute; left:62%; bottom:15%; width:62px; height:58px; border:3px solid var(--hero-ink); border-radius:22px 22px 17px 17px; background:#fff; text-align:center; font-size:15px; line-height:52px; }.scene-bot::before,.scene-bot::after { content:""; position:absolute; top:22px; width:31px; height:3px; background:var(--hero-ink); }.scene-bot::before { left:-25px; transform:rotate(35deg); }.scene-bot::after { right:-25px; transform:rotate(-35deg); }.scene-bot i { position:absolute; top:-15px; left:27px; width:3px; height:13px; background:var(--hero-ink); }.scene-bot b { position:absolute; top:-21px; left:21px; width:12px; height:12px; border:2px solid var(--hero-ink); border-radius:50%; background:var(--hero-yellow); }
    .mini-bulb { position:absolute; left:57%; bottom:45%; width:37px; height:49px; border:3px solid var(--hero-ink); border-radius:50% 50% 42% 42%; background:var(--hero-yellow); }.mini-bulb::before { content:""; position:absolute; left:9px; bottom:-12px; width:14px; height:11px; border:3px solid var(--hero-ink); border-radius:2px; background:var(--hero-lavender); }.mini-bulb i,.mini-bulb b,.mini-bulb em { position:absolute; width:3px; height:12px; background:var(--hero-ink); }.mini-bulb i { left:16px; top:-20px; }.mini-bulb b { left:-11px; top:-10px; transform:rotate(-47deg); }.mini-bulb em { right:-11px; top:-10px; transform:rotate(47deg); }
    .scene-plant { position:absolute; bottom:8%; width:70px; height:50px; border-bottom:3px solid var(--hero-ink); }.plant-left { left:20%; }.plant-right { right:1%; }.scene-plant i { position:absolute; bottom:0; width:17px; height:35px; border:3px solid var(--hero-ink); border-bottom:0; border-radius:50% 50% 0 0; background:#d8f1e8; transform-origin:bottom center; }.scene-plant i:nth-child(1) { left:18px; transform:rotate(-28deg); }.scene-plant i:nth-child(2) { left:33px; height:42px; background:var(--hero-yellow); }.scene-plant i:nth-child(3) { left:47px; transform:rotate(28deg); }
    .hero-plane,.hero-sparkles,.hero-doodle,.landing-path,.career-scene { display:none; }
    @media (max-width:700px) { .home-hero-lower-illustration { bottom:20px; width:760px; max-width:none; } }
    @media (max-width:950px) { .landing-head { width:min(690px,72vw); top:7%; }.career-scene { width:94vw; }.tag-a { left:3%; }.tag-b { right:3%; }.tag-c { left:1%; }.tag-e { right:2%; }.hero-plane { left:1%; }.hero-sparkles { left:53%; } }
    @media (max-width:700px) { .reference-hero-html { min-height:760px; overflow:auto; }.landing-head { top:44px; width:calc(100% - 36px); }.landing-head h1 { font-size:34px; }.landing-head > p { font-size:13px; }.landing-head small { font-size:12px; }.career-scene { bottom:20px; width:650px; max-width:128vw; height:260px; transform:translateX(-50%) scale(.82); transform-origin:bottom center; }.career-tag { min-width:0; max-width:145px; padding:8px 10px; font-size:11px; }.tag-a { top:405px; left:14px; }.tag-b { top:420px; right:12px; }.tag-c { left:7px; bottom:210px; }.tag-d { left:37%; bottom:148px; }.tag-e { right:5px; bottom:135px; }.hero-plane { top:310px; left:6px; width:115px; }.hero-sparkles { top:410px; left:49%; width:70px; }.cloud-one { display:none; }.cloud-two { top:470px; right:5px; }.landing-path { display:none; } }
    @media (max-width:1100px) { .landing-scroll-cue { left:50%; right:auto; bottom:22%; transform:translateX(-50%); animation-name:landingScrollCue; } }
    @media (min-width:701px) and (max-width:800px) { .landing-scroll-cue { left:50%; right:auto; bottom:1%; transform:translateX(-50%); animation-name:landingScrollCue; } }
    @media (max-width:700px) { .landing-scroll-cue { left:50%; right:auto; bottom:1%; transform:translateX(-50%); animation-name:landingScrollCue; } }
    #profile1 .form,#profile2 .form,#profile3 .form { max-width:980px; min-height:590px; margin-top:-18px; padding:100px 46px 68px; overflow:visible; background:transparent; border:0; border-image-source:url("../assets/wide-sticky-note.svg"); border-image-slice:114 104 94 42 fill; border-image-width:90px 90px 90px 36px; border-image-repeat:stretch; border-radius:0; box-shadow:none; }
    #profile1 .form::before,#profile2 .form::before,#profile3 .form::before,#profile1 .form::after,#profile2 .form::after,#profile3 .form::after { content:none; }
    #profile1 .form .form-actions,#profile2 .form .form-actions,#profile3 .form .form-actions { position:relative; z-index:1; margin-top:38px; padding-right:42px; }
    @media (max-width:850px) { #profile1 .form,#profile2 .form,#profile3 .form { min-height:0; padding:88px 24px 62px; } #profile1 .form::before,#profile2 .form::before,#profile3 .form::before { width:190px; left:calc(50% - 95px); } }
    .profile-trigger { display:flex; align-items:center; gap:13px; margin-left:auto; padding:0; border:0; background:transparent; color:#171717; font-size:18px; font-weight:700; }
    .profile-trigger img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
    .nav button:hover { opacity:.72; }
    .screen { height:calc(100vh - 96px); height:calc(100dvh - 96px); }
    #report.active { height:calc(100vh - 96px); height:calc(100dvh - 96px); }
    .shell:has(#report.active) > .nav { display:flex; }
    .figma-report-nav { display:none; }
    @media (max-width:700px) { .nav { height:70px; padding:0 14px; gap:14px; }.nav .brand img { width:62px; height:40px; }.nav .links { gap:clamp(12px,4vw,20px); flex:0 1 auto; min-width:0; }.nav .links button { padding:9px 0; font-size:clamp(14px,4vw,16px); line-height:1; white-space:nowrap; word-break:keep-all; }.nav .links button.active::after { bottom:-5px; width:25px; height:4px; }.profile-trigger { flex:0 0 auto; margin-left:auto; }.profile-trigger span { display:none; }.profile-trigger img { width:34px; height:34px; }.screen,#report.active { height:calc(100vh - 70px); height:calc(100dvh - 70px); } }

    /* Wayve opening animation — intentionally scoped to the intro layer only. */
    .intro-wayve { overflow:hidden; cursor:default; color:#20232a; background:#fff; isolation:isolate; }
    .intro-wayve::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 1px 1px,rgba(32,35,42,.075) 1px,transparent 1.1px) 0 0/22px 22px; opacity:.48; }
    .intro-wayve::after { content:""; position:absolute; z-index:-1; top:50%; left:50%; width:min(780px,82vw); height:min(510px,62vh); border:3px solid #20232a; border-radius:30px 38px 28px 34px; background:#fbf6eb; transform:translate(-50%,-50%); }
    .intro-wayve-inner { width:min(720px,76vw); position:relative; z-index:2; text-align:center; transform:translateY(-1vh); }
    .intro-wayve-badge { display:grid; place-items:center; width:min(228px,46vw); height:auto; margin:0 auto 18px; border:0; border-radius:0; background:transparent; opacity:0; transform:rotate(-3deg); animation:wayveBadgeDrop .72s cubic-bezier(.2,.8,.22,1.2) .12s forwards; }
    .intro-wayve-badge img { display:block; width:100%; height:auto; }
    .intro-wayve h1 { margin:0; color:#20232a; font-size:clamp(31px,3.8vw,52px); font-weight:800; line-height:1.18; letter-spacing:-.035em; opacity:0; animation:wayveFadeUp .68s ease .55s forwards; }
    .intro-wayve-en { margin:10px 0 0; color:#70747c; font-size:17px; letter-spacing:.08em; opacity:0; animation:wayveFadeUp .62s ease .78s forwards; }
    .intro-wayve-path { width:min(560px,70vw); height:52px; margin:9px auto 0; opacity:0; animation:wayveAppear .2s linear 1.05s forwards; }
    .intro-wayve-path svg { width:100%; height:100%; overflow:visible; }
    .intro-wayve-main-path,.intro-wayve-tail-path { fill:none; stroke-linecap:round; }
    .intro-wayve-main-path { stroke:#6a8aa0; stroke-width:2.5; stroke-dasharray:7 9; stroke-dashoffset:1000; animation:wayveDraw 1.05s cubic-bezier(.4,0,.15,1) 1.06s forwards; }
    .intro-wayve-tail-path { stroke:#ff8659; stroke-width:2.5; stroke-dasharray:240; stroke-dashoffset:240; animation:wayveDrawSmall .8s ease 1.95s forwards; }
    .intro-wayve-sub { margin:7px 0 0; color:#70747c; font-size:17px; opacity:0; animation:wayveFadeUp .62s ease 2.05s forwards; }
    .intro-wayve-actions { margin-top:28px; opacity:0; animation:wayvePop .52s cubic-bezier(.2,.85,.28,1.15) 2.45s forwards; }
    .intro-wayve-actions button { border:2px solid #20232a; border-radius:999px; background:#ff8659; color:#fff; padding:13px 26px; font-size:17px; font-weight:800; }
    .intro-wayve-actions p { margin:12px 0 0; color:#70747c; font-size:13px; }
    .intro-wayve-plane,.intro-wayve-sparkles,.intro-wayve-bulb { position:absolute; z-index:1; opacity:0; pointer-events:none; }
    .intro-wayve-plane img,.intro-wayve-sparkles img,.intro-wayve-bulb img { display:block; width:100%; height:auto; }
    .intro-wayve-plane { top:18%; left:7%; width:128px; animation:wayveFlyIn 1.2s cubic-bezier(.2,.8,.2,1) 1.45s forwards,wayveFloat 3.4s ease-in-out 2.7s infinite; }
    .intro-wayve-sparkles { top:14%; right:8%; width:116px; transform:rotate(8deg); animation:wayveFadeUp .5s ease 1.8s forwards,wayveFloatTwo 4.2s ease-in-out 2.2s infinite; }
    .intro-wayve-bulb { top:39%; right:8%; width:78px; transform:rotate(45deg); animation:wayveFadeUp .56s ease 1.95s forwards,wayveFloat 3.7s ease-in-out 2.55s infinite; }
    .intro-wayve-skip { position:absolute; z-index:3; right:30px; bottom:27px; border:2px solid #20232a; border-radius:999px; background:#fff; padding:7px 11px; color:#20232a; font-size:13px; font-weight:700; opacity:0; animation:wayveAppear .5s ease 2.5s forwards; }
    .intro-wayve-route { position:absolute; z-index:4; inset:0; pointer-events:none; opacity:0; }.intro-wayve-route svg { width:100%; height:100%; }.intro-wayve-route path { fill:none; stroke:#ff8659; stroke-width:4; stroke-linecap:round; stroke-dasharray:2400; stroke-dashoffset:2400; }
    .intro-wayve.leaving .intro-wayve-route { opacity:1; }.intro-wayve.leaving .intro-wayve-route path { animation:wayveBigRoute .95s cubic-bezier(.4,0,.2,1) forwards; }
    @keyframes wayveBadgeDrop { 0% { opacity:0; transform:translateY(-30px) rotate(-3deg) scale(.86); } 70% { opacity:1; transform:translateY(5px) rotate(-3deg) scale(1.04); } 100% { opacity:1; transform:rotate(-3deg); } }
    @keyframes wayveFadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes wayveAppear { to { opacity:1; } } @keyframes wayveDraw { to { stroke-dashoffset:0; } } @keyframes wayveDrawSmall { to { stroke-dashoffset:0; } } @keyframes wayvePop { 0% { opacity:0; transform:translateY(12px) scale(.94); } 100% { opacity:1; transform:none; } } @keyframes wayveFlyIn { 0% { opacity:0; transform:translate(-40px,30px) rotate(-18deg); } 100% { opacity:1; transform:none; } } @keyframes wayveFloat { 50% { transform:translateY(-8px) rotate(2deg); } } @keyframes wayveFloatTwo { 50% { transform:translateY(7px); } } @keyframes wayveBigRoute { to { stroke-dashoffset:0; } }
    @media (max-width:780px) { .intro-wayve::after { width:90vw; height:535px; }.intro-wayve-inner { width:86vw; }.intro-wayve-path { width:74vw; }.intro-wayve h1 { font-size:38px; }.intro-wayve-plane { top:13%; left:1%; width:92px; }.intro-wayve-sparkles { top:15%; right:2%; width:82px; }.intro-wayve-bulb { top:37%; right:3%; width:58px; }.intro-wayve-skip { right:16px; bottom:16px; } }
    @media (prefers-reduced-motion:reduce) { .intro-wayve * { animation:none !important; opacity:1; }.intro-wayve-main-path,.intro-wayve-tail-path { stroke-dashoffset:0; } }

    /* Microtask workspace: adapted from Figma node 132:878. */
    :is(#choice,#ranking,#category,#evidence,#open) { --microtask-shift-x:clamp(40px,5vw,80px); }
    #choice {
      --mts:1.2;
      --microtask-content-width:min(900px,64vw);
      --microtask-half-width:min(450px,32vw);
    }
    :is(#previewNotice,#choice,#ranking,#category,#evidence,#open,#analyze2) { position:relative; isolation:isolate; padding:0 clamp(28px,6vw,90px) 40px; overflow-y:auto; background:#fff; }
    :is(#previewNotice,#choice,#ranking,#category,#evidence,#open,#analyze2)::before { content:""; position:absolute; z-index:-1; top:50%; left:50%; width:min(1380px,100vw); aspect-ratio:1280 / 679; transform:translate(-50%,-46%); background:url("../assets/microtask-laptop-clean.jpg") center / contain no-repeat; pointer-events:none; }
    :is(#previewNotice,#choice,#ranking,#category,#evidence,#open,#analyze2) > * { position:relative; z-index:1; }
    :is(#choice,#ranking,#category,#evidence,#open) .task-top { width:min(700px,55vw); margin:clamp(122px,16vh,168px) auto 16px; padding-bottom:12px; border-bottom:1.5px solid #d7ddd4; }
    :is(#choice,#ranking,#category,#evidence,#open) .task-top h3 { color:#20232a; }
    :is(#choice,#ranking,#category,#evidence,#open) .task-progress { color:#696968; }
    :is(#choice,#ranking,#category,#evidence,#open) .task-progress .bar,#analyze2 .bar { border-color:#e6f0e6; background:#f6fff6; }
    :is(#choice,#ranking,#category,#evidence,#open) .task-progress .bar > span,#analyze2 .bar > span { background:#a7dd9d; }
    :is(#choice,#ranking,#category,#evidence,#open) .question { width:min(700px,55vw); max-width:none; margin:0 auto 38px; }
    #category .question { width:min(760px,59vw); }
    :is(#choice,#ranking,#category,#evidence,#open) .scenario,:is(#choice,#ranking,#category,#evidence,#open) .option,:is(#choice,#ranking,#category,#evidence,#open) .sort-item,:is(#choice,#ranking,#category,#evidence,#open) .match-item,:is(#choice,#ranking,#category,#evidence,#open) .material,:is(#choice,#ranking,#category,#evidence,#open) .check-option,:is(#choice,#ranking,#category,#evidence,#open) textarea { border-color:#e5f2e8; border-radius:10px; background:#f6fff6; box-shadow:none; }
    :is(#choice,#ranking,#category,#evidence,#open) .option:hover,:is(#choice,#ranking,#category,#evidence,#open) .sort-item:hover,:is(#choice,#ranking,#category,#evidence,#open) .match-item:hover { background:#eefbed; transform:none; }
    :is(#choice,#ranking,#category,#evidence,#open) .option.selected,:is(#choice,#ranking,#category,#evidence,#open) .match-item.selected { background:#a7dd9d; color:#20232a; }
    :is(#choice,#ranking,#category,#evidence,#open) .task-actions .btn,#analyze2 .btn { border-color:#20232a; background:#a7dd9d; color:#20232a; }
    #category .matching-board { gap:46px; min-height:0; margin-bottom:18px; padding:0; border:0; background:transparent; }
    #category .match-lines line,#category .match-lines circle { stroke:#8fcb87; fill:#8fcb87; }
    #previewNotice .form { width:min(640px,55vw); margin:clamp(155px,21vh,205px) auto 0 !important; padding:36px; border:1.5px solid #e5f2e8; border-radius:16px; background:rgba(255,255,255,.88); }
    #analyze2 .loading { width:min(620px,55vw); min-height:0; margin:clamp(154px,21vh,208px) auto 0; padding:36px; border:1.5px solid #e5f2e8; border-radius:16px; background:rgba(255,255,255,.88); }
    #analyze2 .loading-icon { background:#d8f1e8; border-color:#20232a; }
    /* Keep the analysis result state calm and free of the laptop backdrop. */
    #analyze2.active { display:grid; place-items:center; padding:40px 28px; background-color:#fff; background-image:radial-gradient(circle at 1px 1px,rgba(32,35,42,.075) 1px,transparent 1.1px); background-size:22px 22px; }
    #analyze2::before { content:none; }
    #analyze2.active .loading { width:min(620px,100%); margin:0; padding:0; border:0; border-radius:0; background:transparent; }

    @media (max-width:850px) {
      :is(#previewNotice,#choice,#ranking,#category,#evidence,#open,#analyze2) { padding:118px 18px 34px; }
      :is(#previewNotice,#choice,#ranking,#category,#evidence,#open,#analyze2)::before { top:8px; width:min(680px,132vw); transform:translateX(-50%); background-position:center top; }
      :is(#choice,#ranking,#category,#evidence,#open) .task-top,:is(#choice,#ranking,#category,#evidence,#open) .question,#category .question,#previewNotice .form,#analyze2 .loading { width:100%; margin:0 auto 18px; }
      :is(#choice,#ranking,#category,#evidence,#open) .task-top { padding:18px; border:1.5px solid #e5f2e8; border-radius:16px; background:rgba(255,255,255,.9); }
      :is(#choice,#ranking,#category,#evidence,#open) .question,#previewNotice .form,#analyze2 .loading { padding:22px; border:1.5px solid #e5f2e8; border-radius:16px; background:rgba(255,255,255,.92); }
      #analyze2 { padding:32px 20px; }.screen.active#analyze2 .loading { padding:0; border:0; border-radius:0; background:transparent; }
      #category .matching-board { grid-template-columns:1fr; gap:22px; }.task-progress { width:100%; text-align:left; margin-top:12px; }.task-progress .bar { margin-left:0; }.evidence-grid { grid-template-columns:1fr; }
    }

    /* Desktop task content sits inside the laptop screen rather than on top of it. */
    #choice .microtask-nav { gap:16px; margin-top:calc(14px * var(--mts)); }
    .microtask-nav-btn {
      width:52px;
      height:52px;
      border-radius:50%;
      border:2.5px solid #7bc96f;
      background:#fff;
      display:grid;
      place-items:center;
      padding:0;
      min-width:0;
      transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
    }
    .microtask-nav-btn svg {
      width:22px;
      height:22px;
      stroke:#6fb863;
      fill:none;
      stroke-width:2.25;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .microtask-nav-btn:hover:not(:disabled) {
      background:#a7dd9d;
      border-color:#6fb863;
      box-shadow:0 0 0 4px rgba(167,221,157,.35);
    }
    .microtask-nav-btn:hover:not(:disabled) svg { stroke:#fff; }
    .microtask-nav-btn:disabled { opacity:.32; cursor:not-allowed; }

    @media (min-width:851px) {
      :is(#previewNotice,#choice,#ranking,#category,#evidence,#open)::before { top:-58px; width:min(1560px,104vw); transform:translateX(-50%); }
      #choice::before { top:-78px; width:min(1880px,118vw); }
      :is(#choice,#ranking,#category,#evidence,#open) .task-top {
        width:min(740px,52vw);
        margin:clamp(84px,11vh,112px) auto 10px;
        margin-left:calc(50% - min(370px,26vw) + var(--microtask-shift-x,0px));
        margin-right:auto;
        padding:0 0 8px;
        border-bottom:1px solid rgba(32,35,42,.15);
        background:transparent;
      }
      #choice .task-top {
        width:var(--microtask-content-width);
        margin:clamp(92px,12vh,124px) auto 12px;
        margin-left:calc(50% - var(--microtask-half-width) + var(--microtask-shift-x,0px));
        margin-right:auto;
      }
      :is(#choice,#ranking,#category,#evidence,#open) .question,#category .question {
        width:min(740px,52vw);
        margin:0 auto 28px;
        margin-left:calc(50% - min(370px,26vw) + var(--microtask-shift-x,0px));
        margin-right:auto;
      }
      #choice .question {
        width:var(--microtask-content-width);
        margin:0 auto 32px;
        margin-left:calc(50% - var(--microtask-half-width) + var(--microtask-shift-x,0px));
        margin-right:auto;
      }
      #choice .task-top h3 { font-size:calc(18px * var(--mts)); }
      #choice .subtitle { font-size:calc(16px * var(--mts)); }
      #choice .question-dropdown--chat .question-dropdown__meta { font-size:calc(17px * var(--mts)); }
      #choice .question-dropdown__hint { font-size:calc(13px * var(--mts)); }
      #choice .scenario {
        font-size:calc(15px * var(--mts));
        padding:calc(14px * var(--mts)) calc(16px * var(--mts));
        margin:calc(12px * var(--mts)) 0 calc(20px * var(--mts));
      }
      #choice #microtaskPrompt {
        font-size:calc(28px * var(--mts));
        line-height:1.28;
        margin-bottom:calc(10px * var(--mts));
      }
      #choice .options { gap:calc(12px * var(--mts)); margin:calc(18px * var(--mts)) 0 calc(22px * var(--mts)); }
      #choice .option {
        font-size:calc(15px * var(--mts));
        min-height:calc(52px * var(--mts));
        padding:calc(12px * var(--mts)) calc(16px * var(--mts));
      }
      :is(#choice,#ranking,#category,#evidence,#open) .question-dropdown { border-color:#e5f2e8; }
      :is(#choice,#ranking,#category,#evidence,#open) .options { margin:16px 0 20px; }
      :is(#choice,#ranking,#category,#evidence,#open) .option,
      :is(#choice,#ranking,#category,#evidence,#open) .sort-item,
      :is(#choice,#ranking,#category,#evidence,#open) .match-item { min-height:48px; padding:10px 14px; }
      :is(#choice,#ranking,#category,#evidence,#open) .task-actions { margin-top:12px; }
      #previewNotice .form { width:min(700px,52vw); margin:clamp(116px,15vh,150px) auto 0 !important; }
    }

    #analyze2 .bar > span { background:linear-gradient(90deg,#ff8659 0%,#ffe497 24%,#d8f1e8 48%,#b8e2fb 70%,#ffd5d9 86%,#eae5ff 100%); }

    /* Profile steps are self-contained single-screen forms. */
    :is(#profile1,#profile2,#profile3) {
      position:relative;
      display:none;
      overflow:hidden;
      padding:24px clamp(28px,6vw,90px);
    }
    :is(#profile1,#profile2,#profile3).active {
      display:flex;
      align-items:center;
      justify-content:center;
    }
    :is(#profile1,#profile2,#profile3) .page-top {
      position:absolute;
      z-index:2;
      top:clamp(22px,5vh,54px);
      left:clamp(28px,6vw,90px);
      right:clamp(28px,6vw,90px);
      margin:0;
    }
    #profile1 .form,#profile2 .form,#profile3 .form {
      width:min(980px,100%);
      min-height:0;
      margin:0;
      padding:clamp(74px,8vh,92px) clamp(30px,4vw,46px) clamp(42px,5vh,56px);
      overflow:visible;
      transform:none;
    }
    #profile1 .form .field,#profile2 .form .field,#profile3 .form .field { margin:14px 0 0; }
    #profile1 .form h1,#profile2 .form h1,#profile3 .form h1 {
      max-width:360px;
      font-size:clamp(26px,2.25vw,30px);
    }
    #profile1 .form textarea,#profile2 .form textarea,#profile3 .form textarea { min-height:82px; }
    #profile1 .form .form-actions,#profile2 .form .form-actions,#profile3 .form .form-actions { margin-top:18px; }
    @media (max-height:800px) {
      #profile1 .form,#profile2 .form,#profile3 .form { padding-top:62px; padding-bottom:32px; }
      #profile1 .form h1,#profile2 .form h1,#profile3 .form h1 { font-size:clamp(24px,2.25vw,28px); margin-bottom:6px; }
      #profile1 .form .subtitle,#profile2 .form .subtitle,#profile3 .form .subtitle { font-size:14px; margin-bottom:8px; }
      #profile1 .form .field,#profile2 .form .field,#profile3 .form .field { margin:10px 0; }
      #profile1 .form textarea,#profile2 .form textarea,#profile3 .form textarea { min-height:68px; }
      #profile1 .form .form-actions,#profile2 .form .form-actions,#profile3 .form .form-actions { margin-top:10px; }
      #profile1 .form .chip,#profile2 .form .chip,#profile3 .form .chip { padding:6px 10px; }
    }
    @media (max-width:850px) {
      :is(#profile1,#profile2,#profile3) { padding:16px; }
      :is(#profile1,#profile2,#profile3) .page-top { top:16px; left:18px; right:18px; font-size:12px; }
      #profile1 .form,#profile2 .form,#profile3 .form { width:100%; padding:68px 24px 26px; }
    }

    /* Figma node 108:561 — 轨迹页 */
    #growth {
      padding:0;
      background:#fff;
      background-image:none;
    }
    #growth.active {
      display:block;
      overflow-y:auto;
    }
    .growth-page {
      width:min(1280px,calc(100% - 48px));
      margin:0 auto;
      padding:8px 0 72px;
      color:#2e2d2b;
    }
    .growth-hero {
      text-align:center;
      padding:0 0 28px;
    }
    .growth-title-row {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:18px;
    }
    .growth-title-row h1 {
      margin:0;
      font-size:clamp(32px,3.4vw,48px);
      font-weight:900;
      letter-spacing:-.02em;
      color:#2e2d2b;
    }
    .growth-sparkle {
      flex:0 0 auto;
      width:24px;
      height:24px;
      object-fit:contain;
    }
    .growth-subtitle {
      margin:18px auto 0;
      max-width:600px;
      color:#7a7873;
      font-size:16px;
      line-height:1.5;
    }
    .growth-roadmap {
      padding:12px 0 48px;
    }
    .growth-roadmap-inner {
      position:relative;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:24px;
      align-items:start;
    }
    .growth-path {
      position:absolute;
      left:12%;
      right:12%;
      top:234px;
      height:4px;
      pointer-events:none;
    }
    .growth-path img {
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:4px;
      object-fit:fill;
    }
    .growth-path-secondary {
      opacity:.3;
    }
    .growth-milestone {
      display:grid;
      grid-template-rows:auto auto 1fr;
      align-items:start;
      min-height:472px;
    }
    .growth-sketch {
      height:220px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      overflow:hidden;
    }
    .growth-sketch img {
      max-width:100%;
      height:auto;
      object-fit:contain;
      pointer-events:none;
    }
    .growth-sketch--start img { max-height:204px; }
    .growth-sketch--station1 img { max-height:176px; }
    .growth-sketch--station2 img { max-height:194px; }
    .growth-sketch--station3 img { max-height:227px; }
    .growth-pin {
      display:flex;
      justify-content:center;
      padding:8px 0 16px;
    }
    .growth-pin img {
      width:32px;
      height:32px;
      object-fit:contain;
    }
    .growth-card {
      margin:0 auto;
      width:min(260px,100%);
      padding:18px;
      border:1.5px solid #e5e1d8;
      border-radius:20px;
      background:#fff;
      box-shadow:0 8px 8px rgba(0,0,0,.02);
    }
    .growth-card-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:12px;
    }
    .growth-card-icon {
      display:grid;
      place-items:center;
      width:40px;
      height:40px;
      border-radius:12px;
    }
    .growth-card-icon img {
      width:20px;
      height:20px;
      object-fit:contain;
    }
    .growth-card-icon--gray { background:#f3f2f7; }
    .growth-card-icon--green { background:#ebf3e6; }
    .growth-card-icon--yellow { background:#fdf7e7; }
    .growth-card-icon--blue { background:#eef5fa; }
    .growth-badge {
      padding:4px 10px;
      border-radius:6px;
      font-size:11px;
      font-weight:700;
      line-height:1.2;
    }
    .growth-badge--gray { background:#f3f2f7; color:#8f89a5; }
    .growth-badge--green { background:#ebf3e6; color:#5b9a6f; }
    .growth-badge--yellow { background:#fdf7e7; color:#e5b25d; }
    .growth-badge--blue { background:#eef5fa; color:#5d8ead; }
    .growth-card-meta {
      margin:0;
      color:#7a7873;
      font-size:12px;
      font-weight:700;
    }
    .growth-card-title {
      margin:4px 0 10px;
      font-size:18px;
      font-weight:900;
      color:#2e2d2b;
    }
    .growth-card-desc {
      margin:0;
      color:#7a7873;
      font-size:13px;
      line-height:1.4;
    }
    .growth-records {
      padding-top:8px;
    }
    .growth-records h2 {
      margin:0;
      font-size:clamp(28px,2.6vw,36px);
      font-weight:900;
      color:#2e2d2b;
    }
    .growth-records-sub {
      margin:12px 0 28px;
      color:#8b857d;
      font-size:13px;
    }
    .growth-record-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:20px;
    }
    .growth-record-card {
      position:relative;
      min-height:142px;
      padding:20px 20px 16px 36px;
      border:1px solid #e7dfd5;
      border-radius:18px;
      background:#fff;
    }
    .growth-record-accent {
      position:absolute;
      left:20px;
      top:20px;
      width:12px;
      height:58px;
      border-radius:6px;
    }
    .growth-record-card--purple .growth-record-accent { background:#b996d9; }
    .growth-record-card--green .growth-record-accent { background:#72b48c; }
    .growth-record-card--coral .growth-record-accent { background:#e99772; }
    .growth-record-card h3 {
      margin:0 0 8px;
      font-size:18px;
      font-weight:700;
      color:#2e2d2b;
    }
    .growth-record-status {
      display:inline-block;
      margin-bottom:12px;
      padding:6px 14px;
      border-radius:14px;
      font-size:12px;
      font-weight:700;
    }
    .growth-record-card--purple .growth-record-status { background:#f1e8f8; color:#b996d9; }
    .growth-record-card--green .growth-record-status { background:#e8f3eb; color:#72b48c; }
    .growth-record-card--coral .growth-record-status { background:#fbece5; color:#e99772; }
    .growth-record-desc {
      margin:0;
      color:#7a7873;
      font-size:13px;
      line-height:1.45;
    }
    .growth-record-action {
      position:absolute;
      right:20px;
      bottom:16px;
      padding:6px 16px;
      border:0;
      border-radius:13px;
      background:#2e2d2b;
      color:#fff;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
    }
    .growth-record-action:hover { opacity:.88; }
    @media (max-width:1100px) {
      .growth-roadmap-inner { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
      .growth-path { display:none; }
      .growth-milestone { min-height:0; }
      .growth-record-grid { grid-template-columns:1fr; }
    }
    @media (max-width:700px) {
      .growth-page { width:min(100% - 32px,1280px); padding-bottom:48px; }
      .growth-title-row { gap:10px; }
      .growth-title-row h1 { font-size:30px; }
      .growth-sparkle { width:20px; height:20px; }
      .growth-roadmap-inner { grid-template-columns:1fr; }
      .growth-sketch { height:180px; }
      .growth-record-card { padding-right:100px; }
    }

    /* Figma nodes 354:503 / 354:517 / 354:532 — 情景模拟 */
    #sceneSim {
      padding:0;
      background:#fff;
      background-image:none;
    }
    #sceneSim.active {
      display:block;
      overflow:hidden;
    }
    .scene-sim {
      --sts:1.18;
      position:relative;
      width:100%;
      height:100%;
      min-height:calc(100dvh - 96px);
      background:#fff;
      overflow:hidden;
    }
    .scene-sim-badge {
      position:absolute;
      z-index:3;
      top:clamp(18px,3vh,32px);
      left:clamp(24px,6vw,107px);
      padding:calc(6px * var(--sts)) calc(22px * var(--sts));
      border-radius:70px;
      color:#fff;
      font-size:calc(clamp(16px,1.6vw,24px) * var(--sts));
      font-weight:600;
      line-height:1.35;
    }
    .scene-sim-badge--green { background:#c1d8b0; }
    .scene-sim-badge--orange { background:#fecd86; }
    .scene-sim-badge--purple { background:#bdb0d8; }
    .scene-sim-stage {
      position:absolute;
      z-index:2;
      inset:clamp(48px,7vh,92px) clamp(12px,2.5vw,48px) clamp(200px,26vh,280px);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:clamp(10px,1.8vw,28px);
    }
    .scene-sim-side-btn {
      flex-shrink:0;
      z-index:5;
      min-width:calc(168px * var(--sts));
      height:calc(44px * var(--sts));
      padding:0 calc(20px * var(--sts));
      border-radius:999px;
      border:2px solid #aac393;
      background:#aac393;
      color:#fff;
      font-size:calc(14px * var(--sts));
      font-weight:700;
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .scene-sim-side-btn:hover:not(:disabled) {
      background:#9ab884;
      border-color:#9ab884;
    }
    .scene-sim-side-btn:disabled {
      opacity:.32;
      cursor:not-allowed;
    }
    .scene-sim-side-btn[hidden] {
      display:none;
    }
    .scene-sim-art {
      flex:0 0 auto;
      width:min(72vw,1100px);
      height:100%;
      max-height:min(52vh,620px);
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
    }
    .scene-sim-art img {
      display:block;
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:center bottom;
    }
    .scene-sim-panel {
      position:absolute;
      z-index:4;
      left:50%;
      bottom:clamp(16px,3vh,36px);
      width:min(1420px,calc(100% - 40px));
      min-height:calc(130px * var(--sts));
      max-height:min(46vh,380px);
      padding:calc(20px * var(--sts)) calc(36px * var(--sts)) calc(18px * var(--sts));
      border-radius:158px;
      background:rgba(255,255,255,.72);
      box-shadow:0 4px 4px rgba(188,188,188,.25), inset 0 4px 4px rgba(206,206,206,.25);
      overflow-y:auto;
      transform:translateX(-50%);
    }
    .scene-sim-panel-inner {
      max-width:calc(920px * var(--sts));
      margin:0 auto;
    }
    .scene-sim-head {
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:10px;
      color:#2e2d2b;
      font-weight:700;
    }
    .scene-sim-time {
      padding:calc(4px * var(--sts)) calc(10px * var(--sts));
      border-radius:8px;
      background:#f3f2f7;
      font-size:calc(13px * var(--sts));
      color:#7a7873;
    }
    .scene-sim-title {
      font-size:calc(clamp(16px,1.4vw,20px) * var(--sts));
    }
    .scene-sim-context {
      margin:0 0 calc(12px * var(--sts));
      color:#5a5752;
      font-size:calc(14px * var(--sts));
      line-height:1.55;
    }
    .scene-sim-messages {
      display:grid;
      gap:calc(8px * var(--sts));
      margin:0 0 calc(14px * var(--sts));
    }
    .scene-sim-message {
      padding:calc(10px * var(--sts)) calc(14px * var(--sts));
      border-radius:14px;
      background:#f6fff6;
      border:1px solid #e5f2e8;
      font-size:calc(14px * var(--sts));
      line-height:1.45;
      color:#2e2d2b;
      display:flex;
      align-items:baseline;
      gap:calc(8px * var(--sts));
      flex-wrap:wrap;
    }
    .scene-sim-message-speaker {
      flex-shrink:0;
      font-size:calc(12px * var(--sts));
      font-weight:700;
      color:#779d56;
    }
    .scene-sim-message-text {
      flex:1;
      min-width:0;
    }
    .scene-sim-question {
      margin:0 0 calc(12px * var(--sts));
      font-size:calc(15px * var(--sts));
      font-weight:700;
      color:#2e2d2b;
    }
    .scene-sim-options {
      display:grid;
      gap:calc(8px * var(--sts));
      margin-bottom:calc(12px * var(--sts));
    }
    .scene-sim-option {
      border:1.5px solid #e5f2e8;
      border-radius:12px;
      background:#fff;
      padding:calc(12px * var(--sts)) calc(14px * var(--sts));
      text-align:left;
      font-size:calc(14px * var(--sts));
      line-height:1.45;
      color:#2e2d2b;
      cursor:pointer;
      transition:background .15s ease, border-color .15s ease;
    }
    .scene-sim-option:hover { background:#f6fff6; }
    .scene-sim-option.selected {
      background:#e7f2dc;
      border-color:#aac393;
      font-weight:600;
    }
    .scene-sim-custom label {
      display:block;
      margin-bottom:calc(6px * var(--sts));
      font-size:calc(13px * var(--sts));
      font-weight:700;
      color:#5a5752;
    }
    .scene-sim-custom textarea {
      width:100%;
      min-height:calc(64px * var(--sts));
      max-height:calc(100px * var(--sts));
      padding:calc(10px * var(--sts)) calc(12px * var(--sts));
      border:1.5px solid #e5f2e8;
      border-radius:12px;
      background:#fff;
      resize:vertical;
      font-size:calc(14px * var(--sts));
      line-height:1.45;
    }
    .scene-sim-actions {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:calc(12px * var(--sts));
      margin-top:calc(14px * var(--sts));
    }
    .scene-sim-actions-start {
      display:flex;
      align-items:center;
      min-width:0;
    }
    .scene-sim-actions .btn {
      flex-shrink:0;
      margin-left:auto;
      min-width:140px;
      border-radius:999px;
      background:#aac393;
      border-color:#aac393;
      color:#fff;
      font-weight:700;
    }
    .scene-sim-actions-start:not(:empty) + .btn {
      margin-left:0;
    }
    .scene-sim-placeholder h3 {
      margin:0 0 calc(8px * var(--sts));
      font-size:calc(18px * var(--sts));
      color:#2e2d2b;
    }
    .scene-sim-placeholder p {
      margin:0;
      color:#7a7873;
      font-size:calc(14px * var(--sts));
      line-height:1.55;
    }
    .scene-sim-step {
      margin:0 0 calc(10px * var(--sts));
      font-size:calc(12px * var(--sts));
      font-weight:700;
      color:#aac393;
      letter-spacing:.04em;
    }
    .scene-sim-panel-inner--phased {
      display:flex;
      flex-direction:column;
      min-height:min(38vh,320px);
    }
    .scene-sim-phase-nav {
      display:flex;
      gap:8px;
      margin-bottom:14px;
      flex-wrap:wrap;
    }
    .scene-sim-phase-tab {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 14px;
      border:1.5px solid #e8e6e1;
      border-radius:999px;
      background:#fff;
      color:#7a7873;
      font-size:13px;
      font-weight:600;
      cursor:pointer;
      transition:background .15s ease, border-color .15s ease, color .15s ease;
    }
    .scene-sim-phase-tab.done:not(.active) {
      color:#5a5752;
      border-color:#d8e8cc;
      background:#f6fff6;
    }
    .scene-sim-phase-tab.active {
      color:#2e2d2b;
      border-color:#aac393;
      background:#e7f2dc;
    }
    .scene-sim-phase-tab.locked {
      opacity:.45;
      cursor:not-allowed;
    }
    .scene-sim-phase-num {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:20px;
      height:20px;
      border-radius:50%;
      background:#f3f2f7;
      font-size:11px;
      font-weight:700;
      color:#7a7873;
    }
    .scene-sim-phase-tab.active .scene-sim-phase-num {
      background:#aac393;
      color:#fff;
    }
    .scene-sim-phase-body {
      flex:1;
      min-height:0;
      overflow-y:auto;
      padding-right:4px;
    }
    .scene-sim-phase-label {
      margin:0 0 calc(8px * var(--sts));
      font-size:calc(12px * var(--sts));
      font-weight:700;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:#aac393;
    }
    .scene-sim-question--solo {
      margin:0;
      font-size:calc(clamp(16px,1.5vw,18px) * var(--sts));
      line-height:1.55;
    }
    .scene-sim-ghost {
      border:1.5px solid #e5f2e8;
      border-radius:999px;
      background:#fff;
      padding:calc(10px * var(--sts)) calc(18px * var(--sts));
      color:#5a5752;
      font-size:calc(14px * var(--sts));
      font-weight:600;
      cursor:pointer;
    }
    .scene-sim-ghost:hover { background:#f6fff6; }
    @media (max-width:900px) {
      .scene-sim-panel {
        border-radius:24px;
        max-height:min(52vh,400px);
      }
      .scene-sim-stage {
        inset:56px 6px 200px;
        gap:6px;
      }
      .scene-sim-side-btn {
        min-width:152px;
        height:40px;
        padding:0 16px;
        font-size:13px;
      }
      .scene-sim-art {
        width:min(68vw,900px);
        max-height:min(48vh,520px);
      }
    }
    @media (max-width:700px) {
      .scene-sim {
        min-height:calc(100dvh - 70px);
      }
      .scene-sim-badge {
        left:16px;
        font-size:15px;
        padding:5px 14px;
      }
      .scene-sim-panel {
        width:calc(100% - 24px);
        border-radius:20px;
        padding:16px 14px 14px;
      }
    }