/* Kiny 官网样式（一份，全站共用）。 * * 站点有两类版面，它们的 chrome 各有一套数值（导航间距、正文行高、按钮内边距、页脚形态 * 都不同），因此按上的版面类分区： * .t-home 首页（中 / 英），长滚动落地页 * .t-page .t-about 关于页（中 / 英），窄栏读文 * .t-page .t-download 下载页，宽栏卡片 + 更新日志 * .t-page .t-docs 文档（/docs/ 与各篇），三栏 * 共用的只有设计令牌、重置与 .wrap 栅格；其余一律带版面类前缀，改一处不会波及另一处。 * * 本文件放 public/ 直接，不经打包器：纯文字页面不加载任何 JS 也要拿到完整外观。 * 因此 url() 相对本文件所在的 /styles/ 解析，资源前缀是 ../assets/。 */ :root{ --paper:#F4EAD2; --paper-2:#EDE0C2; --paper-3:#F7F0DE; --paper-edge:#E2D2AC; --navy:#1E3A5F; --navy-deep:#16304E; --navy-2:#20385C; --ink:#23364d; --gold:#C9A24B; --gold-soft:#D4AF6A; --gold-deep:#B8893B; --fog:#1a2a38; --fog-deep:#0f1b26; --lamp:#e9a94e; --serif:"Fraunces", Georgia, "Songti SC", serif; --reader:"Newsreader", Georgia, "Songti SC", "STSong", serif; --sans:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace; --maxw:1140px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; -webkit-font-smoothing:antialiased; font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0; } pre,code,.kc{font-variant-ligatures:none;font-feature-settings:"liga" 0, "calt" 0;} ::selection{background:var(--gold-soft);color:var(--navy-deep);} a{color:inherit;text-decoration:none;} img{display:block;max-width:100%;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;} /* ═══════════════════════ 首页 .t-home ═══════════════════════ */ body.t-home{line-height:1.7;overflow-x:hidden;} .t-home p{text-wrap:pretty;} .t-home .eyebrow{ font-family:var(--sans);font-size:12.5px;letter-spacing:.34em; text-transform:uppercase;font-weight:600;color:var(--gold-deep); } .t-home h1,.t-home h2,.t-home h3{font-family:var(--serif);font-weight:500;color:var(--navy-deep);line-height:1.12;margin:0;} .t-home h2{font-size:clamp(28px,3.3vw,40px);letter-spacing:-.01em;} .t-home .section-head{max-width:680px;margin-bottom:44px;} .t-home .section-head .eyebrow{display:block;margin-bottom:16px;} .t-home .section-head p.lede{font-size:18px;color:#4a566a;margin:16px 0 0;} .t-home section{padding:92px 0;position:relative;} .t-home code.kc{font-family:var(--mono);font-size:.85em;color:var(--gold-deep);} /* framed screenshot */ .t-home .shot{max-width:1000px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--paper-edge);box-shadow:0 38px 90px -38px rgba(22,48,78,.5);} .t-home .shot .bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--paper-2);border-bottom:1px solid var(--paper-edge);} .t-home .shot .bar i{width:10px;height:10px;border-radius:50%;background:#c9b489;display:block;} .t-home .shot .bar i:nth-child(1){background:#d68b6a;} .t-home .shot .bar span{font-family:var(--mono);font-size:12px;color:#6a7384;margin-left:6px;} .t-home .shot img{width:100%;display:block;background:#0d1117;} .t-home .shot-cap{text-align:center;font-size:13.5px;color:#6a7384;margin:16px auto 0;} /* ════════ NAV ════════ */ .t-home nav{ position:sticky;top:0;z-index:50; background:rgba(244,234,210,.86); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--paper-edge); } .t-home nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;} .t-home .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:600;font-size:21px;color:var(--navy-deep);} .t-home .brand img{width:34px;height:34px;border-radius:8px;box-shadow:0 1px 0 rgba(255,255,255,.6),0 3px 10px rgba(30,58,95,.18);} .t-home .navlinks{display:flex;gap:12px;align-items:center;font-size:14.5px;font-weight:500;} .t-home .navlinks a{padding:7px 16px;border-radius:999px;transition:all .2s;color:#3d4a5e;} .t-home .navlinks a:hover{color:var(--gold-deep);} .t-home .navlinks a.ghbtn{border:1px solid var(--navy);color:var(--navy);} .t-home .navlinks a.ghbtn:hover{background:var(--navy);color:var(--paper-3);} .t-home .navlinks a.lang{border:1px solid var(--gold-soft);color:var(--gold-deep);font-size:13px;} .t-home .navlinks a.lang:hover{background:var(--gold-soft);color:var(--navy-deep);} /* ════════ HERO · 金色故事光路 ════════ */ @keyframes fluidflow{ 0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;} } .t-home .hero{position:relative;overflow:hidden;background:var(--paper-3);padding:78px 0 96px;} .t-home .hero__fluid{ position:absolute;inset:-14% -10% auto -10%;height:135%;z-index:0; background:linear-gradient(108deg, #F8F1E0 0%,#F3E7CA 16%,#E8D2A0 29%,#D9B978 40%,#CCA451 50%, #BE9540 59%,#8a99a2 72%,#4a6178 83%,#28405f 93%,#1c3454 100%); background-size:240% 240%; animation:fluidflow 30s ease-in-out infinite; clip-path:polygon(0 0, 100% 0, 100% 80%, 0 100%); opacity:.92; } .t-home .hero__rays{ position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen; background: radial-gradient(120% 70% at 72% 118%, rgba(255,244,214,.55), transparent 56%), radial-gradient(46% 64% at 60% 100%, rgba(233,196,120,.55), transparent 62%), radial-gradient(40% 60% at 84% 104%, rgba(244,228,180,.42), transparent 60%); clip-path:polygon(0 0, 100% 0, 100% 80%, 0 100%); } .t-home .hero__grain{ position:absolute;inset:0;z-index:1;pointer-events:none; background-image:radial-gradient(rgba(30,58,95,.045) 1px, transparent 1px); background-size:4px 4px;clip-path:polygon(0 0, 100% 0, 100% 80%, 0 100%); } .t-home .hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;} .t-home .hero-copy .eyebrow{margin-bottom:22px;display:block;color:var(--gold-deep);} .t-home .hero h1{font-size:clamp(42px,5vw,64px);font-weight:600;letter-spacing:-.01em;color:var(--navy-deep);} .t-home .hero .sub{font-size:18.5px;color:#3f4d63;max-width:494px;margin:24px 0 34px;} .t-home .hero .sub b{color:var(--navy-deep);font-weight:600;} .t-home .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .t-home .btn{ display:inline-flex;align-items:center;gap:9px; font-family:var(--sans);font-weight:600;font-size:15.5px; padding:13px 26px;border-radius:999px;cursor:pointer;border:1px solid transparent; transition:transform .18s ease, box-shadow .2s ease, background .2s; } .t-home .btn-primary{background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));color:#2c2008;box-shadow:0 12px 30px -8px rgba(184,137,59,.5);border:1px solid rgba(255,255,255,.28);} .t-home .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -8px rgba(184,137,59,.6);} .t-home .btn-primary .arr{color:var(--navy-deep);} .t-home .btn-ghost{background:rgba(247,240,222,.5);color:var(--navy-deep);border-color:rgba(30,58,95,.32);backdrop-filter:blur(3px);} .t-home .btn-ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep);background:rgba(247,240,222,.85);} .t-home .hero-art{position:relative;} .t-home .hero-art .frame{ position:relative;border-radius:14px;overflow:hidden; box-shadow:0 36px 80px -30px rgba(22,48,78,.6), 0 2px 0 rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.45); } .t-home .hero-art .frame img{width:100%;background:var(--paper-3);} .t-home .hero-art .tag{ position:absolute;left:-14px;bottom:24px; background:var(--paper-3);color:var(--navy-deep);border:1px solid var(--gold-soft); font-family:var(--mono);font-size:12px;letter-spacing:.04em; padding:8px 14px;border-radius:8px;box-shadow:0 14px 30px -10px rgba(30,58,95,.5); } .t-home .hero-art .tag b{color:var(--gold-deep);} /* ════════ 示例：雾港之夜 ════════ */ .t-home .demo{background:var(--fog-deep);color:#cdd9e4;padding:0;} .t-home .demo-band{ position:relative; background-image:linear-gradient(180deg, rgba(15,27,38,.66), rgba(15,27,38,.9)), url("../assets/harbor_fog.webp"); background-size:cover;background-position:center; } .t-home .demo-band::after{content:"";position:absolute;inset:0;box-shadow:inset 0 80px 80px -40px rgba(15,27,38,.9), inset 0 -80px 80px -40px rgba(15,27,38,.95);pointer-events:none;} .t-home .demo-inner{position:relative;z-index:2;padding:96px 0;} .t-home .demo .eyebrow{color:var(--lamp);} .t-home .demo-head{max-width:620px;margin-bottom:40px;} .t-home .demo-head h2{color:#f1ece1;} .t-home .demo-head p{color:#a9bccb;font-size:18px;margin-top:16px;} .t-home .story-card{ max-width:900px;margin:0 auto; background:rgba(244,237,225,.98);color:#26323f; border-radius:14px;overflow:hidden;border:1px solid rgba(201,162,75,.4); box-shadow:0 40px 90px -30px rgba(0,0,0,.7); display:grid;grid-template-columns:.9fr 1.1fr; } .t-home .story-card .cover{ position:relative;min-height:320px; background-image:linear-gradient(180deg, rgba(20,16,10,.18), rgba(20,16,10,.55)), url("../assets/tavern_interior.webp"); background-size:cover;background-position:center; } .t-home .story-card .cover .quote{ position:absolute;left:26px;right:26px;bottom:24px; font-family:var(--reader);font-style:italic;font-size:16px;line-height:1.7;color:#f4ecdd; text-shadow:0 2px 12px rgba(0,0,0,.7); } .t-home .story-card .body{padding:40px 42px;display:flex;flex-direction:column;} .t-home .story-card .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);} .t-home .story-card h3{font-size:28px;margin:12px 0 14px;} .t-home .story-card p{font-size:16px;color:#46525f;margin:0 0 14px;} .t-home .story-card .meta{font-size:14px;color:#6a7384;margin:0 0 26px;} .t-home .story-card .go{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .t-home .story-card .note{font-size:13px;color:#7a8493;} /* ════════ FEATURES ════════ */ .t-home .features{background:var(--paper-3);border-top:1px solid var(--paper-edge);border-bottom:1px solid var(--paper-edge);} .t-home .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--paper-edge);border-radius:14px;overflow:hidden;background:var(--paper);margin-top:56px;} .t-home .feat{padding:36px 40px;position:relative;border-right:1px solid var(--paper-edge);border-bottom:1px solid var(--paper-edge);} .t-home .feat:nth-child(2n){border-right:none;} .t-home .feat:nth-child(n+3){border-bottom:none;} .t-home .feat .idx{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gold-deep);} .t-home .feat h3{font-size:22px;margin:12px 0 10px;} .t-home .feat p{font-size:15.5px;color:#4f5a6c;margin:0;} /* ════════ CODE / .kin ════════ */ .t-home .kin .wrap{position:relative;z-index:1;} .t-home .kin-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch;} .t-home .codecard{background:var(--navy-deep);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(22,48,78,.6);border:1px solid #25405f;} .t-home .code-top{display:flex;align-items:center;gap:9px;padding:13px 18px;background:#15293f;border-bottom:1px solid #25405f;} .t-home .code-top .fname{font-family:var(--mono);font-size:13px;color:#a9c2dc;} .t-home .code-top .fname b{color:var(--gold-soft);} .t-home .code-top .dots{display:flex;gap:6px;margin-right:4px;} .t-home .code-top .dots i{width:10px;height:10px;border-radius:50%;background:#37557a;display:block;} .t-home pre{margin:0;padding:26px 24px;font-family:var(--mono);font-size:14px;line-height:1.95;color:#d6e2ee;overflow-x:auto;tab-size:2;} .t-home .k-knot{color:var(--gold-soft);font-weight:500;} .t-home .k-star{color:#e08f6a;} .t-home .k-cond{color:#7fb0c9;} .t-home .k-arrow{color:var(--gold);} .t-home .k-var{color:#9bcf8f;} .t-home .k-text{color:#aeb9c6;} .t-home .runcard{background:var(--paper-3);border-radius:14px;border:1px solid var(--paper-edge);box-shadow:0 18px 50px -30px rgba(30,58,95,.4);padding:30px 30px;display:flex;flex-direction:column;} .t-home .runcard .runlabel{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px;} .t-home .runcard .run-prose{font-family:var(--reader);font-size:17px;line-height:1.8;color:#37414f;margin:0 0 20px;} .t-home .runcard .run-choice{font-family:var(--reader);font-size:16.5px;color:var(--navy-deep);border:1px solid var(--paper-edge);border-left:3px solid var(--gold);background:var(--paper);padding:12px 16px;border-radius:8px;margin-bottom:10px;display:flex;align-items:center;gap:10px;} .t-home .runcard .run-choice .c{font-family:var(--mono);font-size:11px;color:var(--gold-deep);} .t-home .runcard .map{margin-top:auto;padding-top:20px;border-top:1px dashed var(--paper-edge);font-size:13.5px;color:#6a7384;} .t-home .runcard .map code{font-family:var(--mono);color:var(--navy-deep);background:var(--paper-2);padding:1px 6px;border-radius:4px;font-size:12.5px;} .t-home .legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:32px;font-family:var(--mono);font-size:12.5px;color:#5b6678;} .t-home .legend span{display:inline-flex;align-items:center;gap:7px;} .t-home .legend i{width:11px;height:11px;border-radius:3px;display:inline-block;} /* ════════ TOOLS ════════ */ .t-home .eco{background:var(--paper);} .t-home .eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;} .t-home .eco-card{background:var(--paper-3);border:1px solid var(--paper-edge);border-radius:13px;padding:26px 26px;transition:transform .2s, box-shadow .2s, border-color .2s;} .t-home .eco-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -26px rgba(30,58,95,.4);border-color:var(--gold-soft);} .t-home .eco-card .pin{font-family:var(--mono);font-size:11px;color:var(--gold-deep);letter-spacing:.1em;} .t-home .eco-card h3{font-size:20px;margin:11px 0 9px;display:flex;align-items:center;gap:9px;} .t-home .eco-card p{font-size:14.5px;color:#4f5a6c;margin:0;} .t-home .soon{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--gold-deep);border:1px solid var(--gold-soft);border-radius:999px;padding:1px 9px;} /* ════════ ROADMAP ════════ */ .t-home .road{background:var(--paper-3);border-top:1px solid var(--paper-edge);border-bottom:1px solid var(--paper-edge);} .t-home .road-tags{display:flex;flex-wrap:wrap;gap:14px;} .t-home .road-tag{display:flex;align-items:center;gap:11px;padding:15px 22px;border:1px solid var(--paper-edge);border-radius:12px;background:var(--paper);font-size:16px;color:var(--navy-deep);} .t-home .road-tag .m{font-family:var(--mono);font-size:12px;color:var(--gold-deep);} /* ════════ DOWNLOAD ════════ */ .t-home .download{background:var(--navy-deep);color:#d7e3ef;position:relative;overflow:hidden;text-align:center;} .t-home .download::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 50% -10%, rgba(201,162,75,.16), transparent 60%);} .t-home .download .wrap{position:relative;z-index:1;} .t-home .download .eyebrow{color:var(--gold-soft);} .t-home .download h2{color:#f3ede2;margin-top:14px;} .t-home .download p{max-width:580px;margin:18px auto 32px;color:#aec3d8;font-size:17px;} .t-home .dl-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .t-home .download .btn-line{display:inline-flex;align-items:center;gap:9px;color:#cfe0f0;border:1px solid #3a5a80;padding:13px 24px;border-radius:999px;font-weight:600;font-size:15.5px;transition:border-color .2s;} .t-home .download .btn-line:hover{border-color:var(--gold-soft);} /* ════════ FOOTER ════════ */ .t-home footer{background:var(--paper-2);border-top:1px solid var(--paper-edge);padding:40px 0;} .t-home footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;} .t-home .foot-brand{display:flex;align-items:center;gap:13px;} .t-home .foot-brand img{width:40px;height:40px;border-radius:9px;box-shadow:0 3px 10px rgba(30,58,95,.2);} .t-home .foot-brand .ft-name{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--navy-deep);} .t-home .foot-brand .ft-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;color:var(--gold-deep);text-transform:uppercase;margin-top:2px;} .t-home .foot-right{display:flex;align-items:center;gap:26px;font-size:14.5px;color:#46526a;} .t-home .foot-right a:hover{color:var(--gold-deep);} .t-home .foot-right .sep{color:#b9aa82;} .t-home .foot-copy{max-width:var(--maxw);margin:24px auto 0;padding:20px 40px 0;border-top:1px solid var(--paper-edge);font-size:13px;color:#7a8394;} /* reveal（入场动画，由页面内联的小段原生 JS 加 .js / .in，与 React 无关） */ .js .t-home .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;} .js .t-home .reveal.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.js .t-home .reveal{opacity:1;transform:none;transition:none;}} @media (max-width:900px){ .t-home .hero{padding:46px 0 80px;} .t-home .hero .wrap,.t-home .kin-grid{grid-template-columns:1fr;} .t-home .hero-art{order:-1;} .t-home .story-card{grid-template-columns:1fr;} .t-home .story-card .cover{min-height:200px;} .t-home .feat-grid{grid-template-columns:1fr;} .t-home .feat:nth-child(n){border-right:none;} .t-home .feat:nth-child(3){border-bottom:1px solid var(--paper-edge);} .t-home .eco-grid{grid-template-columns:1fr 1fr;} .t-home nav .wrap{padding:0 16px;} .t-home .navlinks{gap:6px;} .t-home .navlinks a{padding:6px 9px;font-size:13px;} .t-home .navlinks a.nav-download{display:none;} } /* ═══════════════ 内页 .t-page（关于 / 下载） ═══════════════ */ body.t-page{line-height:1.78;} .t-page nav{position:sticky;top:0;z-index:50;background:rgba(244,234,210,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--paper-edge);} .t-page nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;} .t-page .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:600;font-size:21px;color:var(--navy-deep);} .t-page .brand img{width:34px;height:34px;border-radius:8px;box-shadow:0 3px 10px rgba(30,58,95,.18);} .t-page .navlinks{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:500;} .t-page .navlinks a{padding:7px 15px;border-radius:999px;transition:all .2s;color:#3d4a5e;} .t-page .navlinks a:hover{color:var(--gold-deep);} .t-page .navlinks a.active{color:var(--gold-deep);} .t-page .navlinks a.ghbtn{border:1px solid var(--navy);color:var(--navy);} .t-page .navlinks a.ghbtn:hover{background:var(--navy);color:var(--paper-3);} .t-page .navlinks a.lang{border:1px solid var(--gold-soft);color:var(--gold-deep);font-size:13px;} .t-page .navlinks a.lang:hover{background:var(--gold-soft);color:var(--navy-deep);} .t-page .pagehead{background:var(--paper-3);border-bottom:1px solid var(--paper-edge);padding:58px 0 50px;} .t-page .pagehead .back{display:block;width:fit-content;margin-bottom:20px;font-size:14px;color:var(--gold-deep);} .t-page .pagehead .back:hover{color:var(--navy-deep);} .t-page .pagehead .eyebrow{font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);} .t-page .pagehead h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.4vw,52px);color:var(--navy-deep);margin:14px 0 0;letter-spacing:-.01em;} .t-page .pagehead p{color:#4a566a;font-size:19px;margin:16px 0 0;max-width:660px;} .t-page .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;padding:12px 24px;border-radius:999px;transition:all .18s ease;} .t-page .btn-primary{background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));color:#2c2008;box-shadow:0 12px 30px -8px rgba(184,137,59,.5);border:1px solid rgba(255,255,255,.28);} .t-page .btn-primary:hover{transform:translateY(-2px);} .t-page .btn-line{color:var(--navy-deep);border:1px solid rgba(30,58,95,.32);} .t-page .btn-line:hover{border-color:var(--gold-deep);color:var(--gold-deep);} .t-page footer{background:var(--paper-2);border-top:1px solid var(--paper-edge);padding:30px 0;} .t-page footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13.5px;color:#7a8394;} .t-page footer a{color:#46526a;} .t-page footer a:hover{color:var(--gold-deep);} /* ──────── 关于页 .t-about ──────── */ .t-about article{max-width:760px;margin:0 auto;padding:72px 40px 96px;} .t-about .sec{margin-bottom:64px;} .t-about .sec:last-child{margin-bottom:0;} .t-about .sec .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold-deep);text-transform:uppercase;} .t-about .sec h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,30px);color:var(--navy-deep);margin:12px 0 18px;letter-spacing:-.01em;} .t-about .sec p{margin:0 0 16px;color:#3c4858;text-wrap:pretty;} .t-about .sec p a{color:var(--gold-deep);border-bottom:1px solid rgba(184,137,59,.35);} .t-about .sec p a:hover{border-bottom-color:var(--gold-deep);} .t-about code{font-family:var(--mono);font-size:.85em;background:var(--paper-2);color:var(--navy-deep);padding:1.5px 6px;border-radius:5px;} .t-about .points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;} .t-about .points li{padding:20px 24px;background:var(--paper-3);border:1px solid var(--paper-edge);border-radius:12px;border-left:3px solid var(--gold);} .t-about .points li b{display:block;font-family:var(--serif);font-size:18px;color:var(--navy-deep);margin-bottom:5px;font-weight:600;} .t-about .points li span{color:#4a566a;font-size:15.5px;} .t-about .points li .soon{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--gold-deep);border:1px solid var(--gold-soft);border-radius:999px;padding:1px 9px;margin-left:8px;vertical-align:middle;} .t-about .pull{font-family:var(--reader);font-style:italic;font-size:22px;line-height:1.6;color:var(--navy-deep);border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:26px 0 0;} .t-about .cta{margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;} /* ──────── 下载页 .t-download ──────── */ .t-download article{max-width:900px;margin:0 auto;padding:64px 40px 96px;} /* 下载入口 */ .t-download .dl-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .t-download .dl-card{display:flex;flex-direction:column;background:var(--paper-3);border:1px solid var(--paper-edge);border-radius:14px;padding:30px 30px 28px;transition:border-color .2s, box-shadow .2s, transform .2s;} .t-download .dl-card:hover{border-color:var(--gold-soft);box-shadow:0 20px 44px -28px rgba(30,58,95,.4);transform:translateY(-3px);} .t-download .dl-card .pin{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);} .t-download .dl-card h2{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--navy-deep);margin:10px 0 10px;letter-spacing:-.01em;} .t-download .dl-card p{margin:0 0 18px;color:#4a566a;font-size:15.5px;line-height:1.7;} .t-download .dl-card .grow{flex:1;} .t-download .dl-card .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;padding:12px 22px;border-radius:999px;transition:all .18s ease;align-self:flex-start;} .t-download .dl-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .t-download .code-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:#4a566a;} .t-download .code-chip b{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.05em;color:var(--navy-deep);background:var(--paper-2);border:1px solid var(--paper-edge);padding:3px 12px;border-radius:6px;} .t-download .dl-note{margin:22px 0 0;font-size:14px;color:#6a7384;line-height:1.7;} .t-download .dl-note code{font-family:var(--mono);font-size:.85em;background:var(--paper-2);color:var(--navy-deep);padding:1.5px 6px;border-radius:5px;} /* 更新日志 */ .t-download .log-head{margin:76px 0 0;padding-top:40px;border-top:1px solid var(--paper-edge);} .t-download .log-head .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);} .t-download .log-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,30px);color:var(--navy-deep);margin:12px 0 8px;letter-spacing:-.01em;} .t-download .log-head p{margin:0;color:#6a7384;font-size:15px;} .t-download .rel{margin-top:40px;} .t-download .rel-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px;} .t-download .rel-ver{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--navy-deep);} .t-download .rel-date{font-family:var(--mono);font-size:12.5px;color:#8a94a3;letter-spacing:.03em;} .t-download .rel-group{margin:0 0 18px;} .t-download .rel-group:last-child{margin-bottom:0;} .t-download .rel-tag{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:999px;margin-bottom:10px;} .t-download .rel-tag.added{color:#3f7a42;background:rgba(88,150,72,.14);border:1px solid rgba(88,150,72,.32);} .t-download .rel-tag.changed{color:var(--gold-deep);background:rgba(201,162,75,.14);border:1px solid rgba(201,162,75,.34);} .t-download .rel-tag.fixed{color:#a15a45;background:rgba(214,139,106,.16);border:1px solid rgba(214,139,106,.34);} .t-download .rel-group ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;} .t-download .rel-group li{position:relative;padding:2px 0 2px 20px;color:#3c4858;font-size:15.5px;line-height:1.7;} .t-download .rel-group li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--gold-soft);} .t-download .rel-group li code{font-family:var(--mono);font-size:.84em;background:var(--paper-2);color:var(--navy-deep);padding:1.5px 6px;border-radius:5px;white-space:nowrap;} @media (max-width:860px){ .t-page nav .wrap{padding:0 16px;} .t-page .navlinks{gap:6px;} .t-page .navlinks a{padding:6px 9px;font-size:13px;} .t-about .navlinks a.nav-download{display:none;} .t-docs .navlinks a.nav-download{display:none;} .t-download .dl-cards{grid-template-columns:1fr;} .t-download article{padding:48px 24px 80px;} } /* ═══════════════ 文档 .t-docs（/docs/ 与各篇） ═══════════════ */ /* 文档站比落地页宽一档：1140 的栅格扣掉两栏与间距后正文只剩 528px，而阅读区本身默认列宽就是 680px，代码块与表格都嫌紧。**换的是 --maxw 而不是只换这一处 max-width**—— nav / pagehead / footer 的 .wrap 与 .foot-copy 都吃这个变量，只改栅格会让侧栏左缘比导航品牌字还靠左、右栏越过导航右缘，/docs/ 的标题与下方侧栏也不再对齐。 */ body.t-docs { --maxw: 1280px; } .t-docs .doc-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr) 208px; gap: 40px; max-width: var(--maxw); margin: 0 auto; padding: 0 40px; align-items: start; } /* ── 左侧栏 ── */ .t-docs .doc-side { position: sticky; top: 66px; padding: 36px 0 60px; max-height: calc(100vh - 66px); overflow-y: auto; } .t-docs .doc-side-group { margin-bottom: 26px; } .t-docs .doc-side-title { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; } .t-docs .doc-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .t-docs .doc-side a { display: block; padding: 6px 12px; margin-left: -12px; border-radius: 7px; font-size: 14.5px; color: #4a566a; line-height: 1.5; } .t-docs .doc-side a:hover { background: var(--paper-3); color: var(--navy-deep); } .t-docs .doc-side a.active { background: var(--paper-2); color: var(--navy-deep); font-weight: 600; box-shadow: inset 2px 0 0 var(--gold); } /* ── 正文 ── */ .t-docs .doc-main { min-width: 0; padding: 40px 0 88px; } .t-docs .doc-article h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.6vw, 40px); color: var(--navy-deep); margin: 0; letter-spacing: -.01em; line-height: 1.15; } .t-docs .doc-lede { margin: 14px 0 0; color: #6a7384; font-size: 17px; } .t-docs .doc-body { margin-top: 34px; } .t-docs .doc-body h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 27px); color: var(--navy-deep); margin: 48px 0 14px; letter-spacing: -.01em; scroll-margin-top: 84px; } .t-docs .doc-body h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--navy-deep); margin: 32px 0 10px; scroll-margin-top: 84px; } .t-docs .doc-body p { margin: 0 0 16px; color: #3c4858; text-wrap: pretty; } .t-docs .doc-body a { color: var(--gold-deep); border-bottom: 1px solid rgba(184,137,59,.35); } .t-docs .doc-body a:hover { border-bottom-color: var(--gold-deep); } .t-docs .doc-body ul, .t-docs .doc-body ol { margin: 0 0 18px; padding-left: 22px; color: #3c4858; } .t-docs .doc-body li { margin-bottom: 7px; } .t-docs .doc-body li > ul, .t-docs .doc-body li > ol { margin-top: 7px; } .t-docs .doc-body code { font-family: var(--mono); font-size: .85em; background: var(--paper-2); color: var(--navy-deep); padding: 1.5px 6px; border-radius: 5px; } .t-docs .doc-body blockquote { margin: 22px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--gold-soft); color: #4a566a; } .t-docs .doc-body blockquote p:last-child { margin-bottom: 0; } .t-docs .doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15.5px; } .t-docs .doc-body th, .t-docs .doc-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--paper-edge); vertical-align: top; } .t-docs .doc-body th { font-weight: 600; color: var(--navy-deep); background: var(--paper-3); } .t-docs .doc-body img { border-radius: 10px; border: 1px solid var(--paper-edge); margin: 6px 0 20px; } /* 表格与代码块在窄屏下各自横向滚动，页面本身绝不横向滚 */ .t-docs .doc-body table { display: block; overflow-x: auto; } /* ── 代码块与可运行示例 ── */ .t-docs .kin-code { margin: 0 0 20px; padding: 20px 22px; background: var(--navy-deep); border-radius: 11px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.85; color: #d6e2ee; tab-size: 2; } .t-docs .kin-code code { background: none; padding: 0; color: inherit; font-size: inherit; } .t-docs .kin-code .k-knot { color: var(--gold-soft); font-weight: 500; } .t-docs .kin-code .k-star { color: #e08f6a; } .t-docs .kin-code .k-cond { color: #7fb0c9; } .t-docs .kin-code .k-label { color: #9fd0c4; } .t-docs .kin-code .k-arrow { color: var(--gold); } .t-docs .kin-code .k-var { color: #9bcf8f; } .t-docs .kin-code .k-cmd { color: #c6a0e0; } .t-docs .kin-code .k-comment { color: #5f7284; } /* markdown-it 出的非 kin 代码块（bash 等） */ .t-docs .doc-body pre:not(.kin-code) { margin: 0 0 20px; padding: 18px 20px; background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: 10px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; } .t-docs .doc-body pre:not(.kin-code) code { background: none; padding: 0; } .t-docs .kin-demo { margin: 0 0 22px; } .t-docs .kin-demo .kin-code { margin-bottom: 0; border-radius: 11px 11px 0 0; } .t-docs .kin-demo-bar { display: flex; gap: 8px; padding: 9px 12px; background: #15293f; border-radius: 0 0 11px 11px; } .t-docs .kin-run { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--gold-soft); background: rgba(212,175,106,.12); border: 1px solid rgba(212,175,106,.4); border-radius: 999px; padding: 5px 15px; cursor: pointer; transition: background .16s, color .16s; } .t-docs .kin-run:hover { background: var(--gold-soft); color: var(--navy-deep); } .t-docs .kin-run-ghost { color: #8fa6bd; background: none; border-color: #37557a; } .t-docs .kin-run-ghost:hover { background: #37557a; color: #e6eef6; } .t-docs .kin-demo-error { margin-top: 10px; padding: 12px 16px; border-radius: 9px; background: rgba(214,139,106,.12); border: 1px solid rgba(214,139,106,.4); color: #a15a45; font-size: 14.5px; } /* 阅读区被框在正文里：player 基础样式是 height:100vh 的整屏阅读页，此处收成一个定高的盒子。同时把 player 里 position:fixed 的铺底层（底图 / 色罩 / 静音键）改成 absolute—— fixed 会相对视口、把底图铺满整个文档页（同 editor 预览区的那几条覆盖）。 */ .t-docs .kin-demo-stage { position: relative; margin-top: 12px; height: 420px; border-radius: 11px; overflow: hidden; border: 1px solid var(--paper-edge); } .t-docs .kin-demo-stage .player { position: absolute; inset: 0; height: auto; min-height: 0; overflow: hidden; } .t-docs .kin-demo-stage .bg-layer, .t-docs .kin-demo-stage .bg-overlay { position: absolute; inset: 0; } /* 固定区域（@panel）的侧栏在 player 基础样式里宽态是 position:fixed，而 .player 的 container-type 不为 fixed 后代建立 containing block——不覆盖的话侧栏会挣脱示例框、贴着视口全高铺开。 **必须写在同一个 @container 条件内**：折叠态的基础样式是 position:static，而容器查询不加特异性，无条件的 .t-docs .kin-demo-stage .panel-*（0,3,0）会压过它（0,1,0）、把折叠态一并改掉——而文档里的示例框恒窄于 720px，出现的**只有**折叠态。（同 editor 预览区的那条覆盖，见 editor/src/styles.css 的 .preview-stage .panel-*。） */ @container player (min-width: 720px) { .t-docs .kin-demo-stage .panel-left, .t-docs .kin-demo-stage .panel-right { position: absolute; } } .t-docs .kin-demo-stage .audio-toggle { position: absolute; top: 10px; right: 12px; } .t-docs .kin-demo-stage .player-content { padding: 30px 24px 80px; } /* ── 上下篇 ── */ .t-docs .doc-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--paper-edge); } .t-docs .doc-prevnext a { display: block; padding: 14px 18px; border: 1px solid var(--paper-edge); border-radius: 11px; background: var(--paper-3); transition: border-color .18s, transform .18s; } .t-docs .doc-prevnext a:hover { border-color: var(--gold-soft); transform: translateY(-2px); } .t-docs .doc-next { text-align: right; } .t-docs .doc-prevnext-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 5px; } .t-docs .doc-prevnext-title { color: var(--navy-deep); font-size: 15.5px; font-weight: 600; } /* ── 右栏页内锚点 ── */ .t-docs .doc-toc { position: sticky; top: 66px; padding: 44px 0 60px; max-height: calc(100vh - 66px); overflow-y: auto; } .t-docs .doc-toc-title { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; } .t-docs .doc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .t-docs .doc-toc a { font-size: 13.5px; color: #6a7384; line-height: 1.5; border-left: 2px solid var(--paper-edge); padding-left: 12px; display: block; } .t-docs .doc-toc a:hover { color: var(--gold-deep); border-left-color: var(--gold-soft); } .t-docs .doc-toc .lv-3 a { padding-left: 24px; font-size: 13px; } /* ── /docs/ 篇目总览 ── */ .t-docs .doc-index section { margin-bottom: 40px; } .t-docs .doc-index h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--navy-deep); margin: 0 0 16px; } .t-docs .doc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .t-docs .doc-cards a { display: block; padding: 18px 22px; border: 1px solid var(--paper-edge); border-radius: 12px; background: var(--paper-3); transition: border-color .18s, transform .18s, box-shadow .18s; } .t-docs .doc-cards a:hover { border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 16px 34px -26px rgba(30,58,95,.4); } .t-docs .doc-cards b { display: block; font-family: var(--serif); font-size: 18px; color: var(--navy-deep); margin-bottom: 5px; } .t-docs .doc-cards span { color: #4a566a; font-size: 14.5px; line-height: 1.65; } @media (max-width: 1080px) { .t-docs .doc-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; } .t-docs .doc-toc { display: none; } } @media (max-width: 780px) { .t-docs .doc-shell { grid-template-columns: 1fr; gap: 0; padding: 0 24px; } .t-docs .doc-side { position: static; max-height: none; padding: 24px 0 0; border-bottom: 1px solid var(--paper-edge); } .t-docs .doc-side-group { margin-bottom: 18px; } .t-docs .doc-main { padding: 28px 0 64px; } .t-docs .doc-prevnext { grid-template-columns: 1fr; } .t-docs .doc-next { text-align: left; } }