/* roulang page: index */
:root {
            --ink: #211c2b;
            --ink-soft: #30283d;
            --coral: #f26b5b;
            --coral-dark: #c95047;
            --mint: #8fd8b4;
            --cream: #f3d889;
            --paper: #f5f0e8;
            --lavender: #e9e2ed;
            --muted: #776f7c;
            --line: #d7ccd5;
            --white: #fffdf8;
            --shadow: 5px 5px 0 rgba(33, 28, 43, .13);
            --radius: 14px;
            --container: 1210px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            overflow-x: hidden;
        }
        h1, h2, h3, h4, p { margin-top: 0; }
        h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; letter-spacing: -.035em; }
        h1 { font-size: clamp(2.6rem, 5vw, 5.3rem); }
        h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); }
        h3 { font-size: 1.35rem; }
        a { color: inherit; text-decoration: none; transition: color .2s ease, transform .2s ease, background .2s ease; }
        img { display: block; max-width: 100%; }
        button, input, select, textarea { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 44px)); margin: 0 auto; }
        .section { padding: 92px 0; position: relative; }
        .section-head { max-width: 690px; margin-bottom: 38px; }
        .section-head p { color: var(--muted); max-width: 650px; margin-bottom: 0; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--coral-dark);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .13em;
            margin-bottom: 15px;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 20px; height: 7px; background: var(--coral); box-shadow: 7px 0 var(--cream); }
        .pixel-grid {
            background-image: linear-gradient(rgba(243,216,137,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(243,216,137,.09) 1px, transparent 1px);
            background-size: 18px 18px;
        }

        .site-header {
            background: var(--ink);
            color: var(--white);
            border-bottom: 1px solid rgba(255,255,255,.12);
            position: sticky;
            top: 0;
            z-index: 20;
        }
        .nav-shell { min-height: 80px; display: flex; align-items: center; gap: 25px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 215px;
            font-size: 1.15rem;
            font-weight: 900;
            letter-spacing: -.04em;
            white-space: nowrap;
        }
        .brand-mark {
            width: 29px;
            height: 29px;
            display: inline-block;
            background: var(--coral);
            box-shadow: 6px 6px 0 var(--cream);
            transform: rotate(-3deg);
        }
        .search-wrap { flex: 1; position: relative; }
        .search-wrap svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); }
        .search-form { display: flex; gap: 8px; }
        .search-input {
            width: 100%;
            height: 46px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 9px;
            background: rgba(255,255,255,.1);
            color: var(--white);
            padding: 0 18px 0 47px;
            box-shadow: none;
            margin: 0;
        }
        .search-input::placeholder { color: #c5bec8; }
        .search-input:focus { border-color: var(--mint); background: rgba(255,255,255,.15); box-shadow: 0 0 0 3px rgba(143,216,180,.18); }
        .search-button, .button {
            border: 0;
            border-radius: 8px;
            background: var(--coral);
            color: var(--ink);
            font-weight: 800;
            padding: 11px 19px;
            line-height: 1.2;
            box-shadow: 3px 3px 0 rgba(0,0,0,.22);
            transition: .2s ease;
        }
        .search-button:hover, .button:hover { background: #ff8774; color: var(--ink); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 rgba(0,0,0,.24); }
        .search-button:active, .button:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,.24); }
        .nav-links { display: flex; align-items: center; gap: 7px; }
        .nav-links a { color: #d9d2da; padding: 10px 12px; border-radius: 6px; font-size: .92rem; white-space: nowrap; }
        .nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--cream); }
        .menu-toggle { display: none; background: transparent; color: var(--white); border: 1px solid #756d7b; padding: 9px 11px; border-radius: 7px; }

        .hero {
            background: var(--ink);
            color: var(--white);
            padding: 70px 0 90px;
            overflow: hidden;
        }
        .hero::after { content: ""; position: absolute; right: -80px; top: 80px; width: 270px; height: 270px; border: 1px solid rgba(243,216,137,.18); transform: rotate(45deg); }
        .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 72px; align-items: center; position: relative; z-index: 1; }
        .hero .eyebrow { color: var(--mint); }
        .hero h1 { color: var(--white); max-width: 710px; margin-bottom: 24px; }
        .hero h1 em { color: var(--coral); font-style: normal; }
        .hero-copy { color: #c9c0cc; font-size: 1.06rem; max-width: 650px; margin-bottom: 28px; }
        .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 33px; }
        .button.secondary {
            background: transparent;
            border: 1px solid #837a89;
            color: var(--white);
            box-shadow: none;
        }
        .button.secondary:hover { color: var(--ink); background: var(--mint); border-color: var(--mint); }
        .hero-notes { display: flex; gap: 22px; flex-wrap: wrap; color: #b8aebb; font-size: .84rem; }
        .hero-notes strong { display: block; color: var(--cream); font-size: 1.4rem; line-height: 1.2; }
        .hero-board {
            background: var(--lavender);
            color: var(--ink);
            padding: 20px;
            border: 2px solid var(--cream);
            box-shadow: 9px 9px 0 var(--coral);
            transform: rotate(1.5deg);
        }
        .board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: .78rem; font-weight: 800; }
        .board-code { color: var(--coral-dark); letter-spacing: .12em; }
        .visual-cover { aspect-ratio: 16/9; background: linear-gradient(135deg, #584768, #d56859 55%, #f3d889); position: relative; overflow: hidden; border: 1px solid var(--ink); }
        .visual-cover::before, .visual-cover::after { content: ""; position: absolute; background: rgba(255,255,255,.16); }
        .visual-cover::before { width: 52%; height: 150%; top: -25%; left: 22%; transform: rotate(25deg); }
        .visual-cover::after { width: 13px; height: 13px; right: 22px; top: 21px; box-shadow: -24px 18px var(--cream), 21px 43px var(--mint), -30px 75px var(--coral); }
        .play-badge { position: absolute; left: 24px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%; background: var(--white); display: grid; place-items: center; color: var(--coral-dark); }
        .board-info { display: flex; justify-content: space-between; align-items: end; gap: 15px; padding-top: 15px; }
        .board-info h3 { margin-bottom: 4px; font-size: 1.2rem; }
        .board-info p { margin: 0; color: var(--muted); font-size: .85rem; }
        .status-tag, .tag { display: inline-block; border-radius: 5px; padding: 4px 9px; font-size: .73rem; font-weight: 800; line-height: 1.3; }
        .status-tag { background: var(--mint); }
        .tag { color: var(--ink); background: var(--cream); }
        .tag.mint { background: var(--mint); }
        .tag.coral { background: var(--coral); }

        .service-section { background: var(--paper); }
        .service-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: stretch; }
        .feature-card, .mini-card, .content-card, .path-card, .feedback-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
        .feature-card { padding: 35px; min-height: 295px; position: relative; overflow: hidden; }
        .feature-card::after { content: "01"; position: absolute; right: 22px; bottom: -20px; color: var(--lavender); font-size: 7rem; font-weight: 900; line-height: 1; }
        .feature-card h3 { font-size: 2rem; max-width: 390px; }
        .feature-card p { color: var(--muted); max-width: 520px; }
        .feature-link { color: var(--coral-dark); font-weight: 800; }
        .mini-stack { display: grid; gap: 22px; }
        .mini-card { padding: 24px; display: flex; gap: 17px; align-items: flex-start; }
        .mini-icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; background: var(--mint); border-radius: 8px; font-weight: 900; }
        .mini-card h3 { font-size: 1.08rem; margin-bottom: 5px; }
        .mini-card p { color: var(--muted); font-size: .9rem; margin: 0; }

        .stats-section { background: var(--ink-soft); color: var(--white); }
        .stats-section h2 { color: var(--white); }
        .stats-section .section-head p { color: #c5bac8; }
        .stats-grid { display: grid; grid-template-columns: 1.25fr .9fr .9fr .9fr; gap: 1px; border: 1px solid #5c5064; background: #5c5064; }
        .stat { min-height: 150px; padding: 25px; background: var(--ink-soft); }
        .stat:first-child { background: var(--coral); color: var(--ink); }
        .stat strong { display: block; color: var(--cream); font-size: 2.7rem; line-height: 1; margin-bottom: 14px; }
        .stat:first-child strong { color: var(--ink); }
        .stat span { color: #c7bdca; font-size: .88rem; }
        .stat:first-child span { color: var(--ink); font-weight: 700; }

        .showcase { background: var(--lavender); }
        .showcase-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 25px; }
        .main-content-card { background: var(--ink); color: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
        .main-content-card .visual-cover { aspect-ratio: 16/8.7; border: 0; }
        .main-content-body { padding: 25px 28px 27px; }
        .main-content-body h3 { color: var(--white); margin: 12px 0 7px; font-size: 1.6rem; }
        .main-content-body p { color: #c6bdc9; margin-bottom: 0; }
        .side-list { display: grid; gap: 14px; }
        .side-item { display: grid; grid-template-columns: 116px 1fr; gap: 16px; background: var(--white); padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
        .side-thumb { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--coral), var(--cream)); position: relative; overflow: hidden; }
        .side-thumb::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--ink); right: 13px; bottom: 12px; box-shadow: -15px -11px var(--mint), -27px 4px var(--ink); }
        .side-item h3 { font-size: 1rem; margin: 7px 0 5px; }
        .side-item p { color: var(--muted); font-size: .8rem; line-height: 1.5; margin: 0; }

        .path-section { background: var(--paper); }
        .path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
        .path-card { padding: 22px; min-height: 190px; position: relative; }
        .path-card:nth-child(2) { transform: translateY(17px); }
        .path-card:nth-child(3) { transform: translateY(34px); }
        .path-card:nth-child(4) { transform: translateY(51px); background: var(--ink); color: var(--white); }
        .path-no { color: var(--coral-dark); font-size: .78rem; font-weight: 900; letter-spacing: .1em; }
        .path-card h3 { font-size: 1.15rem; margin: 24px 0 8px; }
        .path-card:nth-child(4) h3 { color: var(--white); }
        .path-card p { color: var(--muted); font-size: .86rem; margin-bottom: 15px; }
        .path-card:nth-child(4) p { color: #c5bbc8; }
        .path-card a { font-size: .83rem; color: var(--coral-dark); font-weight: 800; }
        .path-card:nth-child(4) a { color: var(--cream); }

        .news-section { background: var(--cream); }
        .news-layout { display: grid; grid-template-columns: 1fr .72fr; gap: 50px; }
        .news-list { border-top: 1px solid rgba(33,28,43,.32); }
        .news-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(33,28,43,.2); }
        .news-item a { font-weight: 800; }
        .news-item a:hover { color: var(--coral-dark); }
        .news-item time { color: #706458; white-space: nowrap; font-size: .82rem; }
        .news-note { background: var(--ink); color: var(--white); padding: 28px; border-radius: 10px; align-self: start; box-shadow: 7px 7px 0 rgba(33,28,43,.15); }
        .news-note h3 { color: var(--cream); }
        .news-note p { color: #c8bfca; font-size: .91rem; margin-bottom: 20px; }

        .faq-section { background: var(--paper); }
        .faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; align-items: start; }
        .faq-panel { background: var(--ink); color: var(--white); padding: 31px; border-radius: 10px; position: sticky; top: 110px; }
        .faq-panel h3 { color: var(--mint); font-size: 1.65rem; }
        .faq-panel p { color: #c9bfca; font-size: .92rem; }
        .accordion { background: transparent; margin: 0; }
        .accordion-item { border-top: 1px solid var(--line); }
        .accordion-title { color: var(--ink); font-weight: 800; padding: 20px 38px 20px 0; position: relative; }
        .accordion-title:hover { color: var(--coral-dark); background: transparent; }
        .accordion-title::before { color: var(--coral-dark); right: 4px; }
        .accordion-content { border: 0; background: transparent; color: var(--muted); padding: 0 32px 21px 0; font-size: .92rem; }

        .feedback-section { background: var(--ink); color: var(--white); }
        .feedback-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
        .feedback-section h2 { color: var(--white); }
        .feedback-section .section-head p { color: #c4bac7; }
        .feedback-box { background: var(--white); padding: 28px; color: var(--ink); }
        .feedback-box label { display: block; font-weight: 800; font-size: .88rem; margin-bottom:8px; }
        .feedback-box input,
        .feedback-box select,
        .feedback-box textarea {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 7px;
            background: var(--paper);
            color: var(--ink);
            padding: 11px 13px;
            margin: 0 0 17px;
            box-shadow: none;
        }
        .feedback-box input:focus,
        .feedback-box select:focus,
        .feedback-box textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(242,107,91,.16); }
        .feedback-box textarea { min-height: 120px; resize: vertical; }
        .feedback-box .button { margin: 3px 0 0; }
        .form-hint { color: var(--muted); font-size: .78rem; margin: 15px 0 0; }
        .site-footer { background: #17131f; color: #bdb3c0; padding: 42px 0 25px; }
        .footer-grid { display: grid; grid-template-columns: 1.3fr .7fr .7fr; gap: 45px; padding-bottom: 35px; border-bottom: 1px solid #403746; }
        .footer-brand { color: var(--white); font-size: 1.25rem; font-weight: 900; margin-bottom: 12px; }
        .site-footer p { font-size: .86rem; max-width: 390px; margin-bottom: 0; }
        .site-footer h3 { color: var(--cream); font-size: .9rem; margin-bottom: 14px; }
        .footer-links { display: grid; gap: 7px; font-size: .87rem; }
        .footer-links a:hover { color: var(--mint); }
        .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; font-size: .78rem; }
        .back-top { color: var(--cream); border-bottom: 1px solid var(--cream); }
        .back-top:hover { color: var(--mint); border-color: var(--mint); }

        @media (max-width: 1024px) {
            .nav-shell { gap: 15px; }
            .brand { min-width: auto; }
            .hero-grid { gap: 38px; }
            .path-grid { grid-template-columns: repeat(2, 1fr); }
            .path-card:nth-child(n) { transform: none; }
            .path-card:nth-child(3), .path-card:nth-child(4) { margin-top: 12px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 36px, var(--container)); }
            .section { padding: 66px 0; }
            .nav-shell { min-height: 70px; flex-wrap: wrap; padding: 12px 0 15px; }
            .brand { flex: 1; }
            .menu-toggle { display: block; }
            .nav-links { display: none; width: 100%; padding-top: 6px; }
            .nav-links.open { display: grid; grid-template-columns: 1fr 1fr; }
            .nav-links a { text-align: center; border: 1px solid rgba(255,255,255,.12); }
            .search-wrap { order: 3; flex: 0 0 100%; }
            .hero { padding: 56px 0 72px; }
            .hero-grid, .service-layout, .showcase-grid, .news-layout, .faq-grid, .feedback-grid { grid-template-columns: 1fr; }
            .hero-grid { gap: 45px; }
            .hero h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
            .hero-board { max-width: 560px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .stat:first-child { grid-column: span 2; }
            .faq-panel { position: static; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-grid > :first-child { grid-column: span 2; }
        }
        @media (max-width: 520px) {
            .container { width: calc(100% - 36px); }
            .search-form { gap: 5px; }
            .search-button { padding: 10px 12px; }
            .hero-actions .button { width: 100%; text-align: center; }
            .feature-card { padding: 27px 23px; }
            .feature-card h3 { font-size: 1.65rem; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .stat { min-height: 130px; padding: 19px 15px; }
            .stat strong { font-size: 2rem; }
            .side-item { grid-template-columns: 94px 1fr; gap: 11px; padding: 10px; }
            .news-item { align-items: flex-start; flex-direction: column; gap: 5px; }
            .path-grid { grid-template-columns: 1fr; }
            .path-card:nth-child(3), .path-card:nth-child(4) { margin-top: 0; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > :first-child { grid-column: auto; }
            .footer-bottom { align-items: flex-start; flex-direction: column; }
        }

/* roulang page: category1 */
:root{
      --ink:#211c2b;
      --ink-soft:#30283d;
      --coral:#f26b5b;
      --coral-dark:#c95047;
      --mint:#8fd8b4;
      --cream:#f3d889;
      --paper:#f5f0e8;
      --lavender:#e9e2ed;
      --muted:#776f7c;
      --line:#d7ccd5;
      --white:#fffdf8;
      --shadow:5px 5px 0 rgba(33,28,43,.13);
      --radius:14px;
      --container:1210px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:var(--paper);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      font-size:16px;
      line-height:1.75;
      overflow-x:hidden
    }
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3,h4{font-weight:900;letter-spacing:-.045em;line-height:1.2}
    h1{font-size:clamp(2.2rem,5vw,4.35rem)}
    h2{font-size:clamp(1.8rem,3vw,2.7rem)}
    h3{font-size:1.25rem}
    a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s ease}
    img{display:block;max-width:100%}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 44px));margin:0 auto}
    .section{padding:92px 0;position:relative}
    .section-head{max-width:720px;margin-bottom:38px}
    .section-head p{color:var(--muted);max-width:660px;margin-bottom:0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:9px;color:var(--coral-dark);
      font-size:.78rem;font-weight:800;letter-spacing:.13em;margin-bottom:15px;text-transform:uppercase
    }
    .eyebrow::before{content:"";width:20px;height:7px;background:var(--coral);box-shadow:7px 0 var(--cream)}
    .pixel-grid{
      background-image:linear-gradient(rgba(243,216,137,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(243,216,137,.09) 1px,transparent 1px);
      background-size:18px 18px
    }
    .site-header{
      background:var(--ink);color:var(--white);border-bottom:1px solid rgba(255,255,255,.12);
      position:sticky;top:0;z-index:20
    }
    .nav-shell{min-height:80px;display:flex;align-items:center;gap:25px}
    .brand{
      display:inline-flex;align-items:center;gap:11px;min-width:215px;font-size:1.15rem;
      font-weight:900;letter-spacing:-.04em;white-space:nowrap
    }
    .brand-mark{width:29px;height:29px;display:inline-block;background:var(--coral);box-shadow:6px 6px 0 var(--cream);transform:rotate(-3deg)}
    .search-wrap{flex:1;position:relative}
    .search-form{display:flex;gap:8px}
    .search-wrap svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);z-index:2}
    .search-input{
      width:100%;height:46px;border:1px solid rgba(255,255,255,.18);border-radius:9px;
      background:rgba(255,255,255,.1);color:var(--white);padding:0 18px 0 47px;box-shadow:none;margin:0
    }
    .search-input::placeholder{color:#c5bec8}
    .search-input:focus{border-color:var(--mint);background:rgba(255,255,255,.15);box-shadow:0 0 0 3px rgba(143,216,180,.18);outline:0}
    .search-button,.button{
      border:0;border-radius:8px;background:var(--coral);color:var(--ink);font-weight:800;padding:11px 19px;
      line-height:1.2;box-shadow:3px 3px 0 rgba(0,0,0,.22);transition:.2s ease
    }
    .search-button:hover,.button:hover{background:#ff8774;color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,.24)}
    .search-button:active,.button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.24)}
    .search-button:focus-visible,.button:focus-visible,.nav-links a:focus-visible,.footer-links a:focus-visible{
      outline:3px solid var(--cream);outline-offset:3px
    }
    .nav-links{display:flex;align-items:center;gap:7px}
    .nav-links a{color:#d9d2da;padding:10px 12px;border-radius:6px;font-size:.92rem;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--cream)}
    .menu-toggle{display:none;background:transparent;color:var(--white);border:1px solid #756d7b;padding:9px 11px;border-radius:7px}
    .menu-toggle:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
    .page-intro{
      background:var(--ink);color:var(--white);padding:72px 0 64px;position:relative;overflow:hidden
    }
    .page-intro::before,.page-intro::after{content:"";position:absolute;border:1px solid rgba(243,216,137,.2);transform:rotate(45deg)}
    .page-intro::before{width:180px;height:180px;right:11%;top:-80px}
    .page-intro::after{width:80px;height:80px;right:5%;bottom:24px;background:var(--coral);border:0;box-shadow:14px 14px 0 var(--cream)}
    .intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;position:relative;z-index:1}
    .page-intro .eyebrow{color:var(--mint)}
    .page-intro h1{color:var(--white);max-width:760px;margin-bottom:20px}
    .page-intro h1 em{color:var(--coral);font-style:normal}
    .intro-copy{color:#c9c0cc;max-width:700px;font-size:1.06rem;margin-bottom:0}
    .intro-note{
      border:1px solid rgba(255,255,255,.2);padding:22px;background:rgba(255,255,255,.06);
      border-left:6px solid var(--mint);color:#ddd4df
    }
    .intro-note strong{display:block;color:var(--cream);font-size:1.55rem;line-height:1.25;margin-bottom:6px}
    .filter-section{padding:34px 0 22px;background:var(--white);border-bottom:1px solid var(--line)}
    .filter-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
    .filter-label{font-weight:900;margin-right:5px}
    .filter-tags{display:flex;gap:8px;flex-wrap:wrap}
    .filter-tag{
      border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;
      padding:8px 13px;font-weight:800;font-size:.9rem;transition:.2s ease
    }
    .filter-tag:hover,.filter-tag.active{background:var(--coral);border-color:var(--coral);transform:translateY(-2px);box-shadow:2px 2px 0 var(--ink)}
    .filter-controls{margin-top:18px;display:grid;grid-template-columns:1fr 190px 170px;gap:12px}
    .control-field{margin:0}
    .control-field input,.control-field select{
      height:46px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);
      box-shadow:none;margin:0;padding:0 14px
    }
    .control-field input:focus,.control-field select:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(242,107,91,.15);outline:0}
    .listing-section{padding:74px 0 86px}
    .status-row{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px}
    .status-row p{color:var(--muted);margin:0}
    .status-chip{background:var(--mint);padding:7px 12px;border-radius:5px;font-size:.82rem;font-weight:900}
    .listing-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:28px;align-items:start}
    .feature-card{
      background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
      box-shadow:var(--shadow);transition:.25s ease
    }
    .feature-card:hover{transform:translateY(-4px);box-shadow:8px 9px 0 rgba(33,28,43,.16)}
    .cover{
      min-height:310px;position:relative;display:flex;align-items:flex-end;padding:24px;overflow:hidden;
      background-color:var(--ink);background-image:linear-gradient(135deg,rgba(242,107,91,.8),transparent 48%),linear-gradient(45deg,rgba(143,216,180,.45) 12%,transparent 12%,transparent 25%,rgba(243,216,137,.32) 25%,rgba(243,216,137,.32) 39%,transparent 39%),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:auto,auto,18px 18px,18px 18px
    }
    .cover::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(33,28,43,.13) 6px 7px);pointer-events:none}
    .cover-shape{position:absolute;width:160px;height:160px;right:12%;top:20%;border:2px solid var(--cream);transform:rotate(45deg)}
    .cover-shape::before{content:"";position:absolute;width:54px;height:54px;left:50%;top:50%;background:var(--mint);transform:translate(-50%,-50%)}
    .play-icon{position:relative;z-index:2;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--coral-dark);font-size:1.2rem;box-shadow:4px 4px 0 rgba(33,28,43,.25)}
    .cover-caption{position:relative;z-index:2;margin-left:15px;color:var(--white)}
    .cover-caption small{display:block;color:var(--cream);font-weight:800}
    .feature-body{padding:25px}
    .tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
    .tag{display:inline-block;border-radius:5px;padding:4px 9px;font-size:.73rem;font-weight:800;line-height:1.3;color:var(--ink);background:var(--cream)}
    .tag.mint{background:var(--mint)}
    .tag.coral{background:var(--coral)}
    .feature-body h2{font-size:1.65rem;margin-bottom:12px}
    .feature-body p{color:var(--muted);margin-bottom:20px}
    .meta-line{display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--muted);font-size:.84rem;border-top:1px solid var(--line);padding-top:16px}
    .text-link{color:var(--coral-dark);font-weight:900}
    .text-link:hover{color:var(--ink);text-decoration:underline}
    .compact-list{display:flex;flex-direction:column;gap:14px}
    .compact-card{
      display:grid;grid-template-columns:118px 1fr;gap:15px;background:var(--white);border:1px solid var(--line);
      border-radius:12px;padding:11px;transition:.2s ease
    }
    .compact-card:hover{transform:translateX(4px);border-color:var(--coral);box-shadow:3px 3px 0 rgba(33,28,43,.12)}
    .mini-cover{
      min-height:92px;border-radius:7px;background:var(--lavender);position:relative;overflow:hidden;
      border:1px solid rgba(33,28,43,.1)
    }
    .mini-cover::before{content:"";position:absolute;width:70px;height:70px;background:var(--coral);right:-12px;top:10px;transform:rotate(45deg)}
    .mini-cover::after{content:"";position:absolute;width:28px;height:28px;background:var(--cream);left:20px;bottom:15px;box-shadow:8px 8px 0 var(--mint)}
    .compact-card:nth-child(2) .mini-cover{background:var(--ink)}
    .compact-card:nth-child(2) .mini-cover::before{background:var(--mint)}
    .compact-card:nth-child(3) .mini-cover{background:var(--cream)}
    .compact-card:nth-child(3) .mini-cover::before{background:var(--ink)}
    .compact-card:nth-child(4) .mini-cover{background:var(--mint)}
    .compact-card:nth-child(4) .mini-cover::before{background:var(--coral)}
    .compact-body{min-width:0}
    .compact-body h3{font-size:1.05rem;margin:3px 0 6px}
    .compact-body p{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0 0 6px}
    .compact-meta{color:var(--muted);font-size:.75rem}
    .browse-path{background:var(--ink);color:var(--white);padding:28px 32px;margin-top:42px;position:relative;overflow:hidden}
    .browse-path::after{content:"";position:absolute;right:0;top:0;width:130px;height:100%;background:linear-gradient(135deg,transparent 48%,rgba(243,216,137,.2) 49%,rgba(243,216,137,.2) 52%,transparent 53%);opacity:.8}
    .path-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:32px;align-items:center;position:relative;z-index:1}
    .browse-path h2{color:var(--white);font-size:1.55rem;margin-bottom:8px}
    .browse-path p{color:#c9c0cc;margin:0}
    .path-steps{display:flex;align-items:center;gap:0}
    .path-step{flex:1;position:relative;padding-right:20px}
    .path-step:not(:last-child)::after{content:"→";position:absolute;right:8px;top:7px;color:var(--coral);font-size:1.5rem;font-weight:900}
    .path-step strong{display:block;color:var(--cream);font-size:1rem}
    .path-step span{color:#c9c0cc;font-size:.82rem}
    .faq-section{background:var(--lavender)}
    .faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
    .faq-note{background:var(--ink);color:var(--white);padding:28px;box-shadow:var(--shadow);position:relative}
    .faq-note::before{content:"问";display:block;color:var(--cream);font-size:3.5rem;font-weight:900;line-height:1;margin-bottom:16px}
    .faq-note p{color:#c9c0cc;margin-bottom:0}
    .accordion{background:transparent;margin:0}
    .accordion-item{background:var(--white);border:1px solid var(--line);margin-bottom:10px;border-radius:9px;overflow:hidden}
    .accordion-title{color:var(--ink);font-weight:900;padding:18px 48px 18px 20px;border:0;background:var(--white)}
    .accordion-title:hover{background:#fffaf0;color:var(--coral-dark)}
    .accordion-title:focus{background:#fffaf0;box-shadow:inset 0 0 0 3px rgba(242,107,91,.18);outline:0}
    .accordion-content{background:#fffaf0;color:var(--muted);border:0;padding:0 20px 19px}
    .feedback-section{padding:82px 0}
    .feedback-box{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);padding:36px;display:grid;grid-template-columns:.8fr 1.2fr;gap:58px}
    .feedback-box h2{margin-bottom:14px}
    .feedback-box .intro{color:var(--muted)}
    .feedback-form label{font-weight:800;color:var(--ink);font-size:.9rem}
    .feedback-form input,.feedback-form select,.feedback-form textarea{
      border:1px solid var(--line);border-radius:8px;background:var(--paper);box-shadow:none;color:var(--ink);margin:6px 0 17px;padding:11px 13px
    }
    .feedback-form input,.feedback-form select{height:46px}
    .feedback-form textarea{min-height:120px;resize:vertical}
    .feedback-form input:focus,.feedback-form select:focus,.feedback-form textarea:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(242,107,91,.15);outline:0}
    .form-hint{color:var(--muted);font-size:.8rem;margin:3px 0 0}
    .site-footer{background:var(--ink);color:var(--white);padding:58px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.4fr .7fr .8fr;gap:48px;padding-bottom:40px}
    .footer-brand{font-size:1.25rem;font-weight:900;margin-bottom:12px}
    .footer-grid p{color:#b8aebb;max-width:420px;margin:0}
    .footer-grid h3{color:var(--cream);font-size:.92rem;letter-spacing:.02em;margin-bottom:14px}
    .footer-links{display:flex;flex-direction:column;gap:8px}
    .footer-links a{color:#c9c0cc;font-size:.9rem}
    .footer-links a:hover{color:var(--mint);transform:translateX(3px)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:flex;justify-content:space-between;gap:18px;align-items:center;color:#9f96a6;font-size:.8rem}
    .back-top{color:var(--cream);font-weight:800}
    .back-top:hover{color:var(--mint)}
    .empty-state{display:none;padding:16px;background:#fff4df;border-left:4px solid var(--coral);color:var(--muted);margin-top:15px}
    @media(max-width:1024px){
      .nav-shell{gap:16px}.brand{min-width:190px;font-size:1rem}
      .intro-grid,.listing-grid,.faq-layout,.feedback-box{gap:34px}
      .section{padding:76px 0}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 36px))}
      .nav-shell{min-height:70px;flex-wrap:wrap;padding:12px 0 14px;gap:12px}
      .brand{min-width:0;flex:1}
      .menu-toggle{display:block}
      .nav-links{display:none;width:100%;padding-top:5px;flex-direction:column;align-items:stretch}
      .nav-links.is-open{display:flex}
      .nav-links a{text-align:center}
      .search-wrap{order:3;flex-basis:100%;width:100%}
      .page-intro{padding:54px 0 52px}
      .intro-grid,.listing-grid,.faq-layout,.feedback-box,.path-grid{grid-template-columns:1fr}
      .intro-note{max-width:460px}
      .filter-section{padding:25px 0 18px}
      .filter-tags{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}
      .filter-tag{white-space:nowrap}
      .filter-controls{grid-template-columns:1fr 1fr}
      .filter-controls .control-field:first-child{grid-column:1/-1}
      .listing-section{padding:58px 0 65px}
      .path-steps{flex-wrap:wrap;gap:18px}
      .path-step{min-width:42%}
      .path-step:not(:last-child)::after{display:none}
      .feedback-box{padding:26px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
      .footer-grid>div:first-child{grid-column:1/-1}
      .footer-bottom{align-items:flex-start;flex-direction:column}
    }
    @media(max-width:520px){
      .container{width:calc(100% - 36px)}
      h1{font-size:2.25rem}
      .search-form{gap:6px}.search-button{padding:11px 13px;font-size:.88rem}
      .cover{min-height:240px;padding:18px}
      .feature-body{padding:21px}
      .feature-body h2{font-size:1.4rem}
      .compact-card{grid-template-columns:92px 1fr;gap:11px}
      .mini-cover{min-height:82px}
      .status-row{align-items:flex-start;flex-direction:column;gap:8px}
      .filter-controls{display:block}
      .control-field{margin-bottom:10px}
      .browse-path{padding:24px 20px}
      .feedback-box{padding:22px}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div:first-child{grid-column:auto}
    }