/* roulang page: index */
:root{
      --bg:#f6f7fb;
      --bg-2:#ffffff;
      --bg-soft:#f2efff;
      --surface:rgba(255,255,255,.78);
      --surface-strong:#ffffff;
      --text:#111827;
      --muted:#667085;
      --muted-2:#98a2b3;
      --line:rgba(17,24,39,.10);
      --line-strong:rgba(124,58,237,.16);
      --primary:#7c3aed;
      --primary-2:#9f67ff;
      --primary-3:#d8c7ff;
      --accent:#14b8a6;
      --accent-2:#ff7a59;
      --shadow-sm:0 8px 24px rgba(15,23,42,.08);
      --shadow-md:0 16px 40px rgba(15,23,42,.12);
      --shadow-lg:0 28px 70px rgba(15,23,42,.16);
      --radius-sm:14px;
      --radius-md:20px;
      --radius-lg:28px;
      --radius-xl:38px;
      --container:1200px;
      --header-h:76px;
      --gap:24px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
      background:
        radial-gradient(circle at 15% 15%, rgba(124,58,237,.09), transparent 22%),
        radial-gradient(circle at 85% 10%, rgba(20,184,166,.08), transparent 18%),
        radial-gradient(circle at 80% 85%, rgba(255,122,89,.08), transparent 18%),
        linear-gradient(180deg, #f8f9ff 0%, #f5f6fb 42%, #eef1f8 100%);
      color:var(--text);
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(124,58,237,.18);color:#1b1036}
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .skip-link{
      position:absolute;
      left:-999px;
      top:12px;
      z-index:9999;
      background:var(--text);
      color:#fff;
      padding:10px 14px;
      border-radius:999px;
    }
    .skip-link:focus{left:12px}
    .site-header{
      position:sticky;
      top:14px;
      z-index:1000;
      padding:10px 0 0;
    }
    .dock{
      display:flex;
      align-items:center;
      gap:16px;
      justify-content:space-between;
      padding:14px 16px;
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border:1px solid rgba(124,58,237,.14);
      border-radius:999px;
      box-shadow:var(--shadow-sm);
      transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), padding .3s var(--ease);
    }
    .site-header.is-scrolled .dock{
      box-shadow:var(--shadow-md);
      transform:translateY(-1px);
      background:rgba(255,255,255,.88);
      padding:12px 14px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text);
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), transparent 32%),
        linear-gradient(135deg, var(--primary) 0%, #5a2fc4 50%, var(--accent) 100%);
      box-shadow:0 12px 30px rgba(124,58,237,.22);
      font-size:1rem;
      letter-spacing:.08em;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }
    .brand-text strong{
      font-size:1rem;
    }
    .brand-text span{
      font-size:.78rem;
      color:var(--muted);
      font-weight:600;
      margin-top:4px;
    }
    .dock-nav{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .nav-link, .nav-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      color:var(--muted);
      font-weight:600;
      transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
      border:1px solid transparent;
      white-space:nowrap;
    }
    .nav-link:hover, .nav-pill:hover{
      color:var(--text);
      background:rgba(124,58,237,.08);
      transform:translateY(-1px);
    }
    .nav-link:focus-visible, .nav-pill:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(124,58,237,.16);
      border-color:rgba(124,58,237,.34);
    }
    .nav-link.active{
      color:var(--text);
      background:rgba(124,58,237,.11);
      border-color:rgba(124,58,237,.15);
    }
    .dock-actions{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:max-content;
    }
    .btn{
      appearance:none;
      border:1px solid transparent;
      border-radius:999px;
      padding:12px 16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-weight:700;
      cursor:pointer;
      transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
      user-select:none;
      line-height:1;
    }
    .btn:hover{transform:translateY(-1px);box-shadow:0 14px 24px rgba(15,23,42,.08)}
    .btn:active{transform:translateY(0)}
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--primary) 0%, #5d33cf 55%, var(--primary-2) 100%);
      box-shadow:0 16px 30px rgba(124,58,237,.24);
    }
    .btn-primary:hover{background:linear-gradient(135deg, #6d2fe7 0%, #4b23bd 55%, #9965ff 100%)}
    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.8);
      border-color:rgba(17,24,39,.12);
    }
    .btn-secondary:hover{
      background:#fff;
      border-color:rgba(124,58,237,.22);
    }
    .btn-ghost{
      color:var(--primary);
      background:rgba(124,58,237,.08);
      border-color:rgba(124,58,237,.08);
    }
    .btn-ghost:hover{
      background:rgba(124,58,237,.12);
      color:#5e22d1;
    }
    .btn-sm{padding:10px 14px;font-size:.94rem}
    .btn:disabled{
      opacity:.56;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }

    main{padding:18px 0 72px}
    section{
      position:relative;
      padding:34px 0;
      scroll-margin-top:108px;
    }

    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:22px;
    }
    .section-head h2{
      margin:0;
      font-size:clamp(1.45rem, 1.2rem + 1vw, 2.15rem);
      line-height:1.15;
      letter-spacing:-.03em;
    }
    .section-head p{
      margin:0;
      max-width:760px;
      color:var(--muted);
      font-size:1rem;
    }

    .hero{
      padding-top:22px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);
      gap:24px;
      align-items:stretch;
    }
    .hero-left, .hero-right, .panel, .card, .info-card, .news-card, .faq-item, .form-card{
      background:var(--surface);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.66);
      box-shadow:var(--shadow-sm);
    }
    .hero-left{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      padding:34px;
      min-height:520px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:
        radial-gradient(circle at top right, rgba(124,58,237,.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(20,184,166,.08), transparent 22%),
        rgba(255,255,255,.74);
    }
    .hero-left::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(124,58,237,.06), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.18), transparent 50%);
      pointer-events:none;
    }
    .hero-top{
      position:relative;
      z-index:1;
      max-width:740px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      color:#4b1db3;
      background:rgba(124,58,237,.10);
      border:1px solid rgba(124,58,237,.14);
      font-weight:700;
      font-size:.92rem;
      margin-bottom:16px;
    }
    .eyebrow-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      box-shadow:0 0 0 4px rgba(124,58,237,.12);
    }
    .hero h1{
      margin:0;
      font-size:clamp(2.2rem, 1.3rem + 3vw, 4.75rem);
      line-height:1.04;
      letter-spacing:-.05em;
      max-width:10.8em;
    }
    .hero p.lead{
      margin:18px 0 0;
      color:var(--muted);
      font-size:1.08rem;
      max-width:44em;
    }
    .hero-cta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:24px;
    }
    .hero-chips{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:20px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(17,24,39,.08);
      color:var(--text);
      font-weight:600;
      box-shadow:0 8px 18px rgba(15,23,42,.04);
    }
    .chip small{color:var(--muted);font-weight:700}
    .hero-foot{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:14px;
      margin-top:28px;
    }
    .micro-stat{
      padding:16px;
      border-radius:22px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(124,58,237,.12);
    }
    .micro-stat strong{
      display:block;
      font-size:1.32rem;
      line-height:1;
      margin-bottom:6px;
      letter-spacing:-.03em;
    }
    .micro-stat span{
      color:var(--muted);
      font-size:.92rem;
    }

    .hero-right{
      border-radius:var(--radius-xl);
      padding:20px;
      display:grid;
      gap:16px;
      align-content:start;
      background:
        linear-gradient(180deg, rgba(124,58,237,.06), rgba(255,255,255,.76)),
        rgba(255,255,255,.8);
    }
    .hero-visual{
      border-radius:28px;
      padding:18px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, #281658 0%, #7c3aed 45%, #14b8a6 100%);
      color:#fff;
      box-shadow:var(--shadow-lg);
      min-height:220px;
      position:relative;
      overflow:hidden;
    }
    .hero-visual::after{
      content:"";
      position:absolute;
      inset:auto -60px -70px auto;
      width:190px;
      height:190px;
      border-radius:50%;
      background:rgba(255,255,255,.10);
      filter:blur(2px);
    }
    .hero-visual__row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      position:relative;
      z-index:1;
    }
    .avatar{
      width:58px;
      height:58px;
      border-radius:18px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.22);
      display:grid;
      place-items:center;
      font-weight:900;
      font-size:1.2rem;
      letter-spacing:.05em;
    }
    .hero-visual__title{
      margin:14px 0 8px;
      font-size:1.42rem;
      line-height:1.2;
      letter-spacing:-.03em;
    }
    .hero-visual__text{
      margin:0;
      color:rgba(255,255,255,.84);
      max-width:28ch;
      font-size:.96rem;
    }
    .stack-cards{
      display:grid;
      gap:14px;
    }
    .stack-card{
      border-radius:24px;
      padding:18px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(124,58,237,.10);
      box-shadow:0 12px 28px rgba(15,23,42,.06);
    }
    .stack-card h3{
      margin:0 0 8px;
      font-size:1.02rem;
      line-height:1.2;
    }
    .stack-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .stack-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(124,58,237,.08);
      color:#4b1db3;
      font-size:.84rem;
      font-weight:700;
      border:1px solid rgba(124,58,237,.10);
    }
    .stack-mini{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
    }
    .stack-mini .stack-card{
      min-height:126px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    .panel{
      border-radius:var(--radius-lg);
      padding:24px;
      background:rgba(255,255,255,.8);
    }
    .panel .panel-title{
      margin:0 0 10px;
      font-size:1.18rem;
      line-height:1.25;
    }
    .panel .panel-desc{
      margin:0;
      color:var(--muted);
    }

    .service-layout{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
      gap:18px;
      align-items:stretch;
    }
    .service-main{
      border-radius:var(--radius-xl);
      padding:28px;
      background:
        linear-gradient(180deg, rgba(124,58,237,.05), rgba(255,255,255,.82)),
        rgba(255,255,255,.84);
    }
    .service-main .panel-badge, .card-badge, .label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(20,184,166,.10);
      color:#0d7469;
      border:1px solid rgba(20,184,166,.14);
      font-size:.85rem;
      font-weight:700;
    }
    .service-main h3{
      margin:16px 0 10px;
      font-size:1.9rem;
      line-height:1.15;
      letter-spacing:-.03em;
    }
    .service-main p{
      margin:0;
      color:var(--muted);
      max-width:54ch;
    }
    .service-points{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
      margin-top:18px;
    }
    .point-card{
      padding:18px;
      border-radius:24px;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(17,24,39,.08);
      box-shadow:0 12px 26px rgba(15,23,42,.05);
    }
    .point-card strong{
      display:block;
      margin-bottom:8px;
      font-size:1.03rem;
    }
    .point-card span{
      color:var(--muted);
      font-size:.95rem;
    }
    .service-side{
      display:grid;
      gap:14px;
    }
    .card{
      border-radius:var(--radius-lg);
      padding:20px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(124,58,237,.11);
      box-shadow:var(--shadow-sm);
    }
    .card h4{
      margin:0 0 8px;
      font-size:1.05rem;
      line-height:1.25;
    }
    .card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .card .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }

    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px;
    }
    .stat-card{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      padding:22px;
      background:
        radial-gradient(circle at top right, rgba(124,58,237,.09), transparent 30%),
        rgba(255,255,255,.86);
      border:1px solid rgba(124,58,237,.10);
      box-shadow:var(--shadow-sm);
    }
    .stat-card::after{
      content:"";
      position:absolute;
      inset:auto -24px -34px auto;
      width:100px;
      height:100px;
      border-radius:50%;
      background:rgba(20,184,166,.10);
    }
    .stat-card strong{
      display:block;
      font-size:2.3rem;
      line-height:1;
      letter-spacing:-.05em;
      margin-bottom:10px;
      position:relative;
      z-index:1;
    }
    .stat-card span{
      display:block;
      color:var(--muted);
      position:relative;
      z-index:1;
    }
    .meter{
      margin-top:16px;
      height:8px;
      border-radius:999px;
      background:rgba(17,24,39,.08);
      overflow:hidden;
      position:relative;
      z-index:1;
    }
    .meter > i{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    }

    .cases-layout{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:stretch;
    }
    .showcase{
      border-radius:var(--radius-xl);
      padding:24px;
      background:
        linear-gradient(180deg, rgba(20,184,166,.06), rgba(255,255,255,.84)),
        rgba(255,255,255,.86);
      border:1px solid rgba(20,184,166,.12);
      box-shadow:var(--shadow-sm);
      min-height:420px;
      display:flex;
      flex-direction:column;
    }
    .showcase-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
    }
    .showcase-top h3{
      margin:0;
      font-size:1.4rem;
      line-height:1.2;
    }
    .showcase-top p{
      margin:0;
      color:var(--muted);
      max-width:40ch;
    }
    .bento{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:14px;
      flex:1;
    }
    .bento-card{
      border-radius:26px;
      padding:20px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(17,24,39,.08);
      box-shadow:0 12px 28px rgba(15,23,42,.05);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:160px;
    }
    .bento-card h4{margin:0 0 8px;font-size:1.08rem}
    .bento-card p{margin:0;color:var(--muted)}
    .bento-card--large{
      grid-row:span 2;
      min-height:338px;
      background:
        radial-gradient(circle at top right, rgba(124,58,237,.12), transparent 32%),
        linear-gradient(180deg, rgba(124,58,237,.03), rgba(255,255,255,.92));
    }
    .mock-window{
      border-radius:22px;
      background:linear-gradient(180deg, rgba(17,24,39,.02), rgba(255,255,255,.86));
      border:1px solid rgba(124,58,237,.10);
      padding:14px;
      min-height:180px;
      position:relative;
      overflow:hidden;
    }
    .mock-window .bar{
      display:flex;
      gap:8px;
      margin-bottom:14px;
    }
    .mock-window .bar i{
      width:10px;
      height:10px;
      border-radius:50%;
      background:rgba(124,58,237,.28);
    }
    .mock-lines{
      display:grid;
      gap:10px;
    }
    .mock-line{
      height:14px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(124,58,237,.14), rgba(124,58,237,.06));
    }
    .mock-line.short{width:62%}
    .mock-line.mid{width:78%}
    .mock-line.tiny{width:34%}
    .side-stack{
      display:grid;
      gap:14px;
    }
    .side-note{
      border-radius:26px;
      padding:20px;
      background:rgba(255,255,255,.86);
      border:1px solid rgba(124,58,237,.10);
      box-shadow:var(--shadow-sm);
    }
    .side-note h4{margin:0 0 8px;font-size:1.05rem}
    .side-note p{margin:0;color:var(--muted)}
    .side-note .inline-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }

    .updates-layout{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
      gap:18px;
      align-items:start;
    }
    .updates-box, .aside-box{
      border-radius:var(--radius-xl);
      padding:24px;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(124,58,237,.10);
      box-shadow:var(--shadow-sm);
    }
    .updates-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
    }
    .updates-head h3{
      margin:0;
      font-size:1.5rem;
      line-height:1.2;
    }
    .updates-head p{
      margin:0;
      color:var(--muted);
    }
    .news-list{
      display:grid;
      gap:12px;
    }
    .news-card{
      border-radius:24px;
      overflow:hidden;
      transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
    }
    .news-card:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-md);
      border-color:rgba(124,58,237,.18);
    }
    .news-card__link{
      display:block;
      padding:18px 18px 16px;
    }
    .news-card__meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
      color:var(--muted);
      font-size:.9rem;
    }
    .news-card__meta .badge{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(124,58,237,.08);
      color:#4b1db3;
      border:1px solid rgba(124,58,237,.10);
      font-weight:700;
      font-size:.84rem;
    }
    .news-card h4{
      margin:0;
      font-size:1.07rem;
      line-height:1.45;
      letter-spacing:-.02em;
    }
    .news-card p{
      margin:10px 0 14px;
      color:var(--muted);
      font-size:.95rem;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:2.9em;
    }
    .news-card .read-more{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--primary);
      font-weight:700;
    }
    .news-card .read-more::after{
      content:"→";
      transition:transform .25s var(--ease);
    }
    .news-card:hover .read-more::after{transform:translateX(3px)}
    .empty-state{
      border-radius:26px;
      border:1px dashed rgba(124,58,237,.22);
      background:linear-gradient(180deg, rgba(124,58,237,.05), rgba(255,255,255,.68));
      padding:26px;
      color:var(--muted);
      font-weight:700;
      text-align:center;
    }
    .aside-box{
      display:grid;
      gap:14px;
      position:sticky;
      top:108px;
    }
    .aside-card{
      border-radius:24px;
      padding:18px;
      background:rgba(255,255,255,.9);
      border:1px solid rgba(17,24,39,.08);
    }
    .aside-card h4{
      margin:0 0 8px;
      font-size:1.04rem;
    }
    .aside-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .share-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }

    .plan-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px;
    }
    .step-card{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      padding:22px;
      background:
        radial-gradient(circle at top right, rgba(255,122,89,.08), transparent 28%),
        rgba(255,255,255,.86);
      border:1px solid rgba(255,122,89,.10);
      box-shadow:var(--shadow-sm);
      min-height:220px;
    }
    .step-index{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      color:#fff;
      font-weight:800;
      box-shadow:0 12px 24px rgba(124,58,237,.20);
      margin-bottom:16px;
    }
    .step-card h4{
      margin:0 0 10px;
      font-size:1.08rem;
      line-height:1.25;
    }
    .step-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .step-card .link{
      margin-top:auto;
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--primary);
      font-weight:700;
      padding-top:16px;
    }

    .faq-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:16px;
    }
    .faq-item{
      border-radius:24px;
      overflow:hidden;
    }
    .faq-trigger{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      border:0;
      background:transparent;
      color:var(--text);
      padding:20px 20px;
      cursor:pointer;
      text-align:left;
    }
    .faq-trigger strong{
      font-size:1.02rem;
      line-height:1.4;
    }
    .faq-trigger span{
      width:30px;
      height:30px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:var(--primary);
      background:rgba(124,58,237,.08);
      flex:none;
      transition:transform .25s var(--ease), background .25s var(--ease);
    }
    .faq-item.is-open .faq-trigger span{transform:rotate(45deg);background:rgba(124,58,237,.13)}
    .faq-answer{
      max-height:0;
      overflow:hidden;
      transition:max-height .35s var(--ease);
      border-top:1px solid transparent;
    }
    .faq-item.is-open .faq-answer{
      max-height:240px;
      border-top-color:rgba(17,24,39,.08);
    }
    .faq-answer > div{
      padding:0 20px 20px;
      color:var(--muted);
    }

    .contact-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
      gap:18px;
      align-items:stretch;
    }
    .form-card{
      border-radius:var(--radius-xl);
      padding:26px;
      background:rgba(255,255,255,.86);
    }
    .form-card h3{
      margin:0 0 10px;
      font-size:1.6rem;
      line-height:1.2;
    }
    .form-card p{
      margin:0 0 18px;
      color:var(--muted);
      max-width:52ch;
    }
    .form-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .field.full{grid-column:1 / -1}
    .field label{
      font-size:.92rem;
      font-weight:700;
      color:var(--text);
    }
    .field input, .field textarea{
      width:100%;
      border-radius:18px;
      border:1px solid rgba(17,24,39,.10);
      background:rgba(255,255,255,.92);
      padding:14px 16px;
      color:var(--text);
      transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
    }
    .field input::placeholder, .field textarea::placeholder{color:#9aa4b2}
    .field textarea{min-height:128px;resize:vertical}
    .field input:hover, .field textarea:hover{
      border-color:rgba(124,58,237,.18);
      background:#fff;
    }
    .form-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:16px;
      align-items:center;
    }
    .privacy-note{
      margin-top:14px;
      color:var(--muted);
      font-size:.92rem;
    }
    .contact-side{
      display:grid;
      gap:14px;
      align-content:start;
    }
    .contact-card{
      border-radius:28px;
      padding:20px;
      background:
        linear-gradient(180deg, rgba(124,58,237,.06), rgba(255,255,255,.88)),
        rgba(255,255,255,.86);
      border:1px solid rgba(124,58,237,.10);
      box-shadow:var(--shadow-sm);
    }
    .contact-card h4{
      margin:0 0 8px;
      font-size:1.08rem;
    }
    .contact-card p{
      margin:0;
      color:var(--muted);
    }
    .contact-list{
      list-style:none;
      padding:0;
      margin:14px 0 0;
      display:grid;
      gap:10px;
    }
    .contact-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--text);
    }
    .contact-list li i{
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--primary), var(--accent));
      margin-top:.62em;
      flex:none;
    }

    footer{
      padding:22px 0 42px;
    }
    .footer-box{
      border-radius:34px;
      padding:24px;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(124,58,237,.10);
      box-shadow:var(--shadow-sm);
    }
    .footer-top{
      display:flex;
      gap:20px;
      justify-content:space-between;
      align-items:flex-start;
      flex-wrap:wrap;
    }
    .footer-brand{
      max-width:34ch;
    }
    .footer-brand .brand{
      margin-bottom:12px;
    }
    .footer-brand p{
      margin:0;
      color:var(--muted);
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px 12px;
      align-items:center;
      justify-content:flex-end;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:600;
      padding:8px 12px;
      border-radius:999px;
      transition:background .25s var(--ease), color .25s var(--ease);
    }
    .footer-links a:hover{
      color:var(--text);
      background:rgba(124,58,237,.08);
    }
    .footer-bottom{
      margin-top:18px;
      padding-top:18px;
      border-top:1px solid rgba(17,24,39,.08);
      display:flex;
      gap:14px;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:.94rem;
    }

    .section-divider{
      height:1px;
      width:100%;
      background:linear-gradient(90deg, transparent, rgba(124,58,237,.18), transparent);
      margin:8px 0;
    }

    @media (max-width: 1180px){
      .hero-grid,
      .service-layout,
      .cases-layout,
      .updates-layout,
      .contact-grid{
        grid-template-columns:1fr;
      }
      .aside-box{position:static}
      .stats-grid,
      .plan-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .faq-grid{
        grid-template-columns:1fr;
      }
      .dock{
        border-radius:28px;
      }
    }
    @media (max-width: 860px){
      .site-header{
        top:10px;
      }
      .dock{
        padding:12px;
        border-radius:24px;
        align-items:flex-start;
        flex-direction:column;
      }
      .dock-nav{
        justify-content:flex-start;
        overflow-x:auto;
        width:100%;
        padding-bottom:2px;
        flex-wrap:nowrap;
      }
      .dock-nav::-webkit-scrollbar{height:0}
      .dock-actions{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
      }
      .hero-left{
        min-height:auto;
        padding:24px;
      }
      .hero h1{
        max-width:none;
      }
      .hero-foot{
        grid-template-columns:1fr;
      }
      .service-points,
      .bento{
        grid-template-columns:1fr;
      }
      .bento-card--large{
        grid-row:auto;
        min-height:220px;
      }
      .stack-mini,
      .stats-grid,
      .plan-grid{
        grid-template-columns:1fr;
      }
      .section-head{
        align-items:flex-start;
        flex-direction:column;
      }
      .footer-top{
        flex-direction:column;
      }
      .footer-links{
        justify-content:flex-start;
      }
    }
    @media (max-width: 520px){
      .container{
        width:min(100% - 20px, var(--container));
      }
      main{padding-bottom:56px}
      section{
        padding:26px 0;
      }
      .hero-left,
      .hero-right,
      .service-main,
      .updates-box,
      .aside-box,
      .form-card,
      .footer-box{
        border-radius:24px;
      }
      .hero-visual{min-height:180px}
      .micro-stat strong{font-size:1.1rem}
      .service-main h3,
      .showcase-top h3,
      .form-card h3{
        font-size:1.5rem;
      }
      .news-card__meta{
        flex-direction:column;
        align-items:flex-start;
      }
      .form-grid{
        grid-template-columns:1fr;
      }
      .btn{
        width:100%;
      }
      .dock-actions .btn{
        width:auto;
      }
      .footer-links{
        gap:8px;
      }
    }

/* roulang page: article */
:root{
      --bg:#f6f7fb;
      --bg-2:#ffffff;
      --bg-soft:#f2efff;
      --surface:rgba(255,255,255,.78);
      --surface-strong:#ffffff;
      --text:#111827;
      --muted:#667085;
      --muted-2:#98a2b3;
      --line:rgba(17,24,39,.10);
      --line-strong:rgba(124,58,237,.16);
      --primary:#7c3aed;
      --primary-2:#9f67ff;
      --primary-3:#d8c7ff;
      --accent:#14b8a6;
      --accent-2:#ff7a59;
      --shadow-sm:0 8px 24px rgba(15,23,42,.08);
      --shadow-md:0 16px 40px rgba(15,23,42,.12);
      --shadow-lg:0 28px 70px rgba(15,23,42,.16);
      --radius-sm:14px;
      --radius-md:20px;
      --radius-lg:28px;
      --radius-xl:38px;
      --container:1200px;
      --header-h:76px;
      --gap:24px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
      background:
        radial-gradient(circle at 15% 15%, rgba(124,58,237,.09), transparent 22%),
        radial-gradient(circle at 85% 10%, rgba(20,184,166,.08), transparent 18%),
        radial-gradient(circle at 80% 85%, rgba(255,122,89,.08), transparent 18%),
        linear-gradient(180deg, #f8f9ff 0%, #f5f6fb 42%, #eef1f8 100%);
      color:var(--text);
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    ::selection{background:rgba(124,58,237,.16);color:var(--text)}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}
    button{background:none;border:none}
    .sr-only{
      position:absolute;
      width:1px;height:1px;
      padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);
      white-space:nowrap;border:0;
    }

    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }

    .site-header{
      position:sticky;
      top:14px;
      z-index:1000;
      padding:10px 0 0;
      pointer-events:none;
    }
    .site-header .container{pointer-events:auto}
    .dock{
      display:flex;
      align-items:center;
      gap:14px;
      min-height:var(--header-h);
      padding:16px 18px;
      border-radius:999px;
      background:rgba(255,255,255,.74);
      backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.66);
      box-shadow:var(--shadow-sm);
      transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), padding .25s var(--ease);
    }
    .site-header.is-scrolled .dock{
      box-shadow:var(--shadow-md);
      transform:translateY(-1px);
      background:rgba(255,255,255,.88);
      padding:12px 14px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text);
      transition:transform .25s var(--ease), opacity .25s var(--ease);
    }
    .brand:hover{transform:translateY(-1px)}
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), transparent 32%),
        linear-gradient(135deg, var(--primary) 0%, #5a2fc4 50%, var(--accent) 100%);
      box-shadow:0 12px 30px rgba(124,58,237,.22);
      font-size:1rem;
      letter-spacing:.08em;
      flex:0 0 auto;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      line-height:1.1;
    }
    .brand-text strong{
      font-size:1rem;
      display:block;
    }
    .brand-text span{
      font-size:.78rem;
      color:var(--muted);
      font-weight:600;
      margin-top:4px;
    }
    .dock-nav{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex-wrap:wrap;
      min-width:0;
    }
    .dock-actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      flex:0 0 auto;
    }
    .nav-link, .nav-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      color:var(--muted);
      font-weight:600;
      transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
      border:1px solid transparent;
      white-space:nowrap;
      line-height:1;
    }
    .nav-link:hover, .nav-pill:hover{
      color:var(--text);
      background:rgba(124,58,237,.08);
      transform:translateY(-1px);
    }
    .nav-link:focus-visible, .nav-pill:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, .toc-link:focus-visible{
      outline:none;
      box-shadow:0 0 0 4px rgba(124,58,237,.16);
      border-color:rgba(124,58,237,.34);
    }
    .nav-link.active, .nav-pill.active{
      color:var(--text);
      background:rgba(124,58,237,.11);
      border-color:rgba(124,58,237,.15);
      box-shadow:0 10px 20px rgba(124,58,237,.06);
    }

    .btn{
      appearance:none;
      border:1px solid transparent;
      border-radius:999px;
      padding:12px 16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-weight:700;
      cursor:pointer;
      transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease), filter .25s var(--ease);
      user-select:none;
      line-height:1;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px);box-shadow:0 14px 24px rgba(15,23,42,.08)}
    .btn:active{transform:translateY(0);filter:saturate(.96)}
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--primary) 0%, #5d33cf 55%, var(--primary-2) 100%);
      box-shadow:0 16px 30px rgba(124,58,237,.24);
    }
    .btn-primary:hover{background:linear-gradient(135deg, #6d2fe7 0%, #4b23bd 55%, #9965ff 100%)}
    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.8);
      border-color:rgba(17,24,39,.12);
    }
    .btn-secondary:hover{
      background:#fff;
      border-color:rgba(124,58,237,.22);
    }
    .btn-ghost{
      color:var(--primary);
      background:rgba(124,58,237,.08);
      border-color:rgba(124,58,237,.08);
    }
    .btn-ghost:hover{
      background:rgba(124,58,237,.12);
      color:#5e22d1;
    }
    .btn-sm{padding:10px 14px;font-size:.94rem}
    .btn-lg{padding:14px 20px;font-size:1rem}
    .btn:disabled{
      opacity:.56;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }

    main{padding:18px 0 72px}
    section{
      position:relative;
      padding:28px 0;
      scroll-margin-top:108px;
    }

    .article-hero{
      padding-top:22px;
    }
    .hero-panel,
    .content-panel,
    .sidebar-panel,
    .empty-panel,
    .cta-panel,
    .note-panel,
    .stat-panel{
      background:var(--surface);
      backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.7);
      box-shadow:var(--shadow-sm);
    }
    .hero-panel{
      border-radius:var(--radius-xl);
      overflow:hidden;
      position:relative;
      padding:28px;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 12% 10%, rgba(124,58,237,.12), transparent 20%),
        radial-gradient(circle at 88% 12%, rgba(20,184,166,.10), transparent 18%),
        radial-gradient(circle at 68% 82%, rgba(255,122,89,.08), transparent 18%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.24fr) minmax(320px,.76fr);
      gap:22px;
      align-items:stretch;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--primary);
      font-size:.92rem;
      font-weight:700;
      margin:0 0 14px;
      letter-spacing:.02em;
    }
    .eyebrow::before{
      content:"";
      width:10px;height:10px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow:0 0 0 6px rgba(124,58,237,.08);
    }
    .hero-title{
      margin:0;
      font-size:clamp(2rem, 1.3rem + 2.2vw, 3.7rem);
      line-height:1.08;
      letter-spacing:-.04em;
      color:var(--text);
    }
    .hero-desc{
      margin:18px 0 0;
      color:var(--muted);
      font-size:1.02rem;
      max-width:68ch;
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .badge,
    .meta-chip,
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:999px;
      font-size:.84rem;
      font-weight:700;
      line-height:1;
      letter-spacing:.01em;
      border:1px solid transparent;
    }
    .badge{
      color:#4c1d95;
      background:rgba(124,58,237,.09);
      border-color:rgba(124,58,237,.12);
    }
    .badge-soft{
      color:#0f766e;
      background:rgba(20,184,166,.10);
      border-color:rgba(20,184,166,.14);
    }
    .badge-warm{
      color:#9a3412;
      background:rgba(255,122,89,.12);
      border-color:rgba(255,122,89,.16);
    }
    .meta-chip{
      color:var(--muted);
      background:rgba(255,255,255,.72);
      border-color:rgba(17,24,39,.08);
      font-weight:600;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:22px;
    }

    .hero-side{
      display:grid;
      gap:16px;
      align-content:start;
    }
    .preview-card,
    .info-card,
    .toc-card,
    .progress-card,
    .empty-card,
    .cta-card,
    .related-card,
    .content-panel,
    .sidebar-panel,
    .note-panel,
    .stat-panel{
      border-radius:var(--radius-lg);
      border:1px solid rgba(17,24,39,.08);
    }
    .preview-card{
      overflow:hidden;
      position:relative;
      padding:18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84)),
        linear-gradient(135deg, rgba(124,58,237,.08), rgba(20,184,166,.06));
      box-shadow:var(--shadow-md);
    }
    .preview-card::after{
      content:"";
      position:absolute;
      inset:auto -20% -28% auto;
      width:170px;
      height:170px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(124,58,237,.14), transparent 66%);
      pointer-events:none;
    }
    .preview-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
    }
    .avatar{
      width:56px;height:56px;
      border-radius:18px;
      display:grid;
      place-items:center;
      background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 34%),
        linear-gradient(135deg, var(--primary) 0%, #5e2ad4 55%, var(--accent) 100%);
      color:#fff;
      font-size:1.1rem;
      font-weight:800;
      box-shadow:0 18px 30px rgba(124,58,237,.20);
      flex:0 0 auto;
    }
    .preview-meta{
      display:flex;
      flex-direction:column;
      gap:3px;
      min-width:0;
    }
    .preview-meta strong{
      font-size:1.02rem;
      letter-spacing:.01em;
    }
    .preview-meta span{
      color:var(--muted);
      font-size:.9rem;
    }
    .preview-image{
      border-radius:22px;
      overflow:hidden;
      aspect-ratio:16/10;
      position:relative;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.7), transparent 22%),
        linear-gradient(135deg, rgba(124,58,237,.95), rgba(20,184,166,.82));
      box-shadow:var(--shadow-sm);
    }
    .preview-image::before,
    .preview-image::after{
      content:"";
      position:absolute;
      border-radius:50%;
      background:rgba(255,255,255,.14);
      filter:blur(2px);
    }
    .preview-image::before{width:120px;height:120px;left:-14px;top:-16px}
    .preview-image::after{width:150px;height:150px;right:-24px;bottom:-34px}
    .preview-image .chip{
      position:absolute;
      left:16px;
      bottom:16px;
      padding:10px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.16);
      color:#fff;
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.18);
      font-size:.86rem;
      font-weight:700;
    }
    .stat-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
    }
    .stat-box{
      padding:18px;
      border-radius:22px;
      background:rgba(255,255,255,.78);
      border:1px solid rgba(17,24,39,.08);
      box-shadow:var(--shadow-sm);
    }
    .stat-value{
      font-size:1.5rem;
      font-weight:800;
      letter-spacing:-.03em;
      line-height:1.1;
      color:var(--text);
    }
    .stat-label{
      margin-top:6px;
      color:var(--muted);
      font-size:.9rem;
    }

    .article-section{
      padding-top:16px;
    }
    .article-layout{
      display:grid;
      grid-template-columns:minmax(0,1.55fr) minmax(290px,.65fr);
      gap:22px;
      align-items:start;
    }
    .content-panel{
      background:var(--surface-strong);
      overflow:hidden;
      box-shadow:var(--shadow-md);
    }
    .content-head{
      padding:22px 24px 0;
    }
    .crumbs{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-size:.9rem;
    }
    .crumbs a{
      color:var(--muted);
      transition:color .2s var(--ease);
    }
    .crumbs a:hover{color:var(--primary)}
    .crumbs .sep{
      color:var(--muted-2);
    }
    .article-title{
      margin:14px 0 0;
      font-size:clamp(1.72rem, 1.32rem + 1.2vw, 2.75rem);
      line-height:1.16;
      letter-spacing:-.04em;
      overflow-wrap:anywhere;
    }
    .article-subtitle{
      margin:14px 0 0;
      color:var(--muted);
      font-size:1rem;
      max-width:72ch;
    }
    .article-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
    }
    .article-body{
      padding:22px 24px 26px;
    }

    .prose{
      color:var(--text);
      font-size:1.02rem;
    }
    .prose > :first-child{margin-top:0}
    .prose > :last-child{margin-bottom:0}
    .prose h2,
    .prose h3,
    .prose h4{
      line-height:1.25;
      letter-spacing:-.03em;
      margin:1.4em 0 .65em;
      color:var(--text);
    }
    .prose h2{font-size:1.58rem}
    .prose h3{font-size:1.28rem}
    .prose h4{font-size:1.08rem}
    .prose p{
      margin:.92em 0;
      color:#253045;
    }
    .prose a{
      color:var(--primary);
      text-decoration:none;
      border-bottom:1px solid rgba(124,58,237,.18);
      transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
    }
    .prose a:hover{
      color:#5d2ecc;
      border-color:rgba(124,58,237,.32);
      background:rgba(124,58,237,.05);
    }
    .prose strong{color:#0f172a}
    .prose em{color:#334155}
    .prose ul,
    .prose ol{
      margin:1em 0;
      padding-left:1.4em;
      color:#253045;
    }
    .prose li{margin:.45em 0}
    .prose blockquote{
      margin:1.35em 0;
      padding:18px 18px 18px 20px;
      border-left:4px solid var(--primary);
      background:linear-gradient(135deg, rgba(124,58,237,.07), rgba(20,184,166,.05));
      border-radius:18px;
      color:#334155;
    }
    .prose blockquote p{margin:.35em 0}
    .prose hr{
      border:none;
      border-top:1px solid rgba(17,24,39,.09);
      margin:1.5em 0;
    }
    .prose figure{
      margin:1.35em 0;
    }
    .prose img{
      border-radius:20px;
      box-shadow:var(--shadow-sm);
      border:1px solid rgba(17,24,39,.08);
      width:100%;
      height:auto;
    }
    .prose figcaption{
      margin-top:8px;
      font-size:.88rem;
      color:var(--muted);
      text-align:center;
    }
    .prose table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      margin:1.4em 0;
      overflow:hidden;
      border-radius:18px;
      border:1px solid rgba(17,24,39,.09);
      background:#fff;
      box-shadow:var(--shadow-sm);
      display:block;
      overflow-x:auto;
    }
    .prose thead th{
      background:rgba(124,58,237,.06);
      color:#111827;
      font-weight:700;
    }
    .prose th,
    .prose td{
      padding:12px 14px;
      text-align:left;
      border-bottom:1px solid rgba(17,24,39,.06);
      white-space:nowrap;
    }
    .prose tr:last-child td{border-bottom:none}
    .prose pre{
      margin:1.35em 0;
      padding:18px 20px;
      border-radius:18px;
      background:#0f172a;
      color:#e5eefb;
      overflow:auto;
      box-shadow:var(--shadow-sm);
    }
    .prose code{
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
      font-size:.94em;
      background:rgba(124,58,237,.08);
      color:#5b21b6;
      padding:.14em .42em;
      border-radius:8px;
    }
    .prose pre code{
      background:none;
      color:inherit;
      padding:0;
      border-radius:0;
    }
    .prose details{
      margin:1em 0;
      border-radius:18px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(17,24,39,.08);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .prose summary{
      cursor:pointer;
      list-style:none;
      padding:16px 18px;
      font-weight:700;
      color:var(--text);
      user-select:none;
    }
    .prose summary::-webkit-details-marker{display:none}
    .prose details > div{
      padding:0 18px 16px;
      color:#334155;
    }

    .article-bottom{
      padding:0 24px 24px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .sidebar-panel{
      position:sticky;
      top:116px;
      display:grid;
      gap:16px;
      padding:18px;
      background:rgba(255,255,255,.82);
      box-shadow:var(--shadow-sm);
    }
    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .panel-title{
      margin:0;
      font-size:1.02rem;
      letter-spacing:-.02em;
    }
    .panel-subtitle{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .progress-track{
      width:100%;
      height:10px;
      border-radius:999px;
      background:rgba(17,24,39,.08);
      overflow:hidden;
      margin-top:10px;
    }
    .progress-fill{
      width:0%;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 60%, var(--accent) 100%);
      transition:width .15s linear;
    }
    .toc-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:8px;
    }
    .toc-link{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:12px 12px;
      border-radius:16px;
      background:rgba(255,255,255,.7);
      border:1px solid rgba(17,24,39,.07);
      color:var(--muted);
      font-size:.94rem;
      transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
    }
    .toc-link:hover{
      color:var(--text);
      background:rgba(124,58,237,.07);
      border-color:rgba(124,58,237,.15);
      transform:translateY(-1px);
    }
    .toc-dot{
      width:8px;height:8px;
      border-radius:50%;
      background:var(--primary);
      margin-top:7px;
      flex:0 0 auto;
      box-shadow:0 0 0 5px rgba(124,58,237,.08);
    }
    .info-list{
      display:grid;
      gap:10px;
      margin:0;
    }
    .info-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.74);
      border:1px solid rgba(17,24,39,.07);
    }
    .info-row span:first-child{
      color:var(--muted);
      font-size:.9rem;
      flex:0 0 auto;
    }
    .info-row strong{
      font-size:.92rem;
      color:var(--text);
      text-align:right;
      overflow-wrap:anywhere;
    }
    .side-links{
      display:grid;
      gap:10px;
    }
    .side-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(124,58,237,.07);
      border:1px solid rgba(124,58,237,.11);
      color:var(--text);
      font-weight:700;
      transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
    }
    .side-link:hover{
      transform:translateY(-1px);
      background:rgba(124,58,237,.11);
      box-shadow:0 12px 22px rgba(124,58,237,.08);
    }

    .empty-wrap{
      padding:36px 0 0;
    }
    .empty-panel{
      margin:0 auto;
      width:min(680px,100%);
      padding:30px;
      text-align:center;
      background:rgba(255,255,255,.86);
      box-shadow:var(--shadow-md);
      border-radius:var(--radius-xl);
    }
    .empty-panel h2{
      margin:0;
      font-size:clamp(1.6rem, 1.3rem + .9vw, 2.2rem);
      letter-spacing:-.03em;
    }
    .empty-panel p{
      margin:14px auto 0;
      max-width:50ch;
      color:var(--muted);
    }
    .empty-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:12px;
      margin-top:22px;
    }

    .article-extra{
      margin-top:22px;
      display:grid;
      gap:16px;
    }
    .cta-panel{
      padding:22px;
      background:
        radial-gradient(circle at 12% 15%, rgba(124,58,237,.10), transparent 20%),
        radial-gradient(circle at 88% 20%, rgba(20,184,166,.08), transparent 18%),
        rgba(255,255,255,.84);
      box-shadow:var(--shadow-sm);
    }
    .cta-panel h2{
      margin:0;
      font-size:1.3rem;
      letter-spacing:-.03em;
    }
    .cta-panel p{
      margin:10px 0 0;
      color:var(--muted);
    }

    .note-panel{
      padding:18px 20px;
      background:rgba(255,255,255,.78);
    }
    .note-panel p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }

    footer{
      padding:14px 0 34px;
    }
    .footer-box{
      border-radius:var(--radius-xl);
      background:rgba(255,255,255,.8);
      backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.7);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
    }
    .footer-top{
      display:flex;
      justify-content:space-between;
      gap:28px;
      padding:26px 26px 18px;
      border-bottom:1px solid rgba(17,24,39,.08);
    }
    .footer-brand{
      max-width:540px;
    }
    .footer-brand p{
      margin:14px 0 0;
      color:var(--muted);
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px 12px;
      justify-content:flex-end;
      align-content:flex-start;
      max-width:500px;
    }
    .footer-links a{
      padding:10px 14px;
      border-radius:999px;
      color:var(--muted);
      background:rgba(124,58,237,.06);
      border:1px solid rgba(124,58,237,.08);
      transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
      font-weight:600;
    }
    .footer-links a:hover{
      transform:translateY(-1px);
      color:var(--text);
      background:rgba(124,58,237,.10);
    }
    .footer-bottom{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:10px 18px;
      padding:18px 26px 24px;
      color:var(--muted);
      font-size:.92rem;
    }

    .divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(124,58,237,.18), transparent);
      margin:8px 0;
    }

    .mobile-only{display:none}

    @media (max-width: 1120px){
      .hero-grid,
      .article-layout{
        grid-template-columns:1fr;
      }
      .sidebar-panel{
        position:relative;
        top:auto;
      }
      .dock{
        border-radius:28px;
      }
      .dock-actions{
        gap:8px;
      }
    }
    @media (max-width: 860px){
      .site-header{
        top:8px;
        padding-top:6px;
      }
      .dock{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        padding:14px;
        border-radius:28px;
      }
      .brand{justify-content:flex-start}
      .dock-nav{
        justify-content:flex-start;
        overflow-x:auto;
        padding-bottom:2px;
        scrollbar-width:none;
      }
      .dock-nav::-webkit-scrollbar{display:none}
      .dock-actions{
        justify-content:space-between;
        flex-wrap:wrap;
      }
      .hero-panel,
      .content-head,
      .article-body,
      .footer-top,
      .footer-bottom{
        padding-left:18px;
        padding-right:18px;
      }
      .hero-panel{padding:18px}
      .stat-grid{
        grid-template-columns:1fr 1fr;
      }
      .hero-actions,
      .article-bottom,
      .empty-actions{
        gap:10px;
      }
    }
    @media (max-width: 620px){
      main{padding-bottom:58px}
      section{padding:22px 0}
      .container{width:min(var(--container), calc(100% - 20px))}
      .brand-text span{display:none}
      .dock-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
      }
      .dock-actions .btn{width:100%}
      .hero-panel{
        border-radius:24px;
        padding:16px;
      }
      .hero-side{
        gap:12px;
      }
      .preview-card,
      .empty-panel,
      .cta-panel,
      .content-panel,
      .sidebar-panel,
      .footer-box,
      .stat-box,
      .info-row,
      .toc-link,
      .side-link{
        border-radius:20px;
      }
      .stat-grid{
        grid-template-columns:1fr;
      }
      .hero-title,
      .article-title{
        letter-spacing:-.03em;
      }
      .hero-desc,
      .article-subtitle,
      .prose{
        font-size:.98rem;
      }
      .article-body,
      .content-head{
        padding-left:16px;
        padding-right:16px;
      }
      .footer-top{
        flex-direction:column;
      }
      .footer-links{
        justify-content:flex-start;
      }
      .footer-bottom{
        flex-direction:column;
      }
      .btn-lg{padding:13px 18px}
    }
    @media (max-width: 480px){
      .dock-actions{
        grid-template-columns:1fr;
      }
      .nav-link,
      .nav-pill{
        padding:9px 12px;
      }
      .hero-actions,
      .article-bottom,
      .empty-actions{
        flex-direction:column;
      }
      .btn{
        width:100%;
      }
      .preview-top{
        align-items:flex-start;
      }
      .avatar{
        width:50px;height:50px;border-radius:16px;
      }
      .hero-panel{
        padding:14px;
      }
      .prose h2{font-size:1.35rem}
      .prose h3{font-size:1.16rem}
      .prose table{font-size:.92rem}
    }