/* midicn core v0.9.0 */
:root{ color-scheme:light dark; --ink:#0B0B0C; --ink:light-dark(#F7F4EE,#0B0B0C); --ink-2:#111113; --ink-2:light-dark(#FFFFFF,#111113); --ink-3:#17171A; --ink-3:light-dark(#F1EDE5,#17171A); --ink-4:#0E0E10; --ink-4:light-dark(#FAF8F4,#0E0E10); --rule:#242427; --rule:light-dark(#D9D3C7,#242427); --rule-2:#343439; --rule-2:light-dark(#BDB5A5,#343439); --paper:#F2EEE6; --paper:light-dark(#16161A,#F2EEE6); --paper-2:#A9A49B; --paper-2:light-dark(#5A564E,#A9A49B); --paper-3:#6E6A64; --paper-3:light-dark(#6E6A64,#807B72); --vermilion:#CE4A32; --vermilion:light-dark(#A93A24,#CE4A32); --gold:#C9A227; --gold:light-dark(#8A6F10,#C9A227); --jade:#5E9E7E; --jade:light-dark(#2F6B50,#5E9E7E); --slate:#7A8AA3; --slate:light-dark(#4C5A70,#7A8AA3); --ok:light-dark(#1B7A4C,#58D48A); --study:light-dark(#1F5FA8,#5A9BD8); --doubt:light-dark(#9A6213,#E8A33D); --warn:light-dark(#C0452A,#FF7A5C); --stop:light-dark(#B32E2E,#E45A5A); --vermilion-soft:rgba(206,74,50,.14); --vermilion-soft:light-dark(rgba(169,58,36,.10),rgba(206,74,50,.14)); --vermilion-line:rgba(206,74,50,.45); --vermilion-line:light-dark(rgba(169,58,36,.40),rgba(206,74,50,.45)); --gold-soft:rgba(201,162,39,.14); --gold-soft:light-dark(rgba(138,111,16,.10),rgba(201,162,39,.14)); --jade-soft:rgba(94,158,126,.14); --jade-soft:light-dark(rgba(47,107,80,.10),rgba(94,158,126,.14)); --accent-h:18; --accent-c:.16; --accent:oklch(.58 var(--accent-c) var(--accent-h)); --accent:light-dark(oklch(.58 var(--accent-c,.16) var(--accent-h)),oklch(.80 var(--accent-c,.15) var(--accent-h))); --accent-soft:oklch(.58 var(--accent-c,.16) var(--accent-h) / .14); --accent-soft:light-dark(oklch(.58 var(--accent-c,.16) var(--accent-h) / .12),oklch(.80 var(--accent-c,.15) var(--accent-h) / .16)); --on-accent:light-dark(#FFF8F4,#1A0A06); --n0:light-dark(#FBF8F1,#08080B); --n1:light-dark(#FFFFFF,#12121A); --n2:light-dark(#F4F0E6,#1A1A25); --n3:light-dark(#E4DECF,#242432); --n4:light-dark(#CFC7B2,#32323F); --n5:light-dark(#B3AA93,#4A4A5A); --n6:light-dark(#8F8875,#6C6C80); --n7:light-dark(#6E6857,#8E8EA3); --n8:light-dark(#524D3F,#B4B4C6); --n9:light-dark(#38342A,#D6D6E2); --n10:light-dark(#211E17,#EFEFE8); --n11:light-dark(#12100B,#F7F6F1); --serif:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,"Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --fs-10:clamp(10px,.62rem,11px); --fs-11:clamp(10.5px,.66rem,11.5px); --fs-12:clamp(11.5px,.72rem,12.5px); --fs-13:clamp(12.5px,.79rem,13.5px); --fs-14:clamp(13.5px,.85rem,14.5px); --fs-16:clamp(15px,.95rem,16.5px); --fs-20:clamp(17px,1.1rem,20px); --fs-26:clamp(20px,1.6vw,26px); --fs-34:clamp(24px,2.6vw,34px); --fs-38:clamp(28px,3.2vw,38px); --fs-46:clamp(28px,4vw,46px); --lh-tight:1.2; --lh-body:1.68; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --r-1:8px; --r-2:16px; --r-3:26px; --r-full:999px; --r:var(--r-1); --r-lg:var(--r-2); --shadow-1:0 1px 0 light-dark(rgba(90,70,30,.10),rgba(0,0,0,.35)),0 10px 24px -16px oklch(.60 .10 var(--accent-h) / .45); --shadow-2:0 2px 0 light-dark(rgba(90,70,30,.08),rgba(0,0,0,.30)),0 20px 44px -22px oklch(.60 .12 var(--accent-h) / .55); --wrap:min(92vw,1560px); --wrap-wide:var(--wrap); --wrap-read:var(--wrap); --gutter:clamp(var(--s4),2.5vw,var(--s6)); --z-hdr:20; --z-play:30; --z-pop:40; --hdr:56px; --play:68px; --tap:44px; --sa-t:env(safe-area-inset-top,0px); --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px); --t:.15s linear; } :root[data-theme=light]{color-scheme:light} :root[data-theme=dark]{color-scheme:dark} @media(prefers-reduced-motion:reduce){ :root{--t:.01s} } .jf-t1{stroke:var(--jf-1)} .jf-t2{stroke:var(--jf-2)} .jf-t3{stroke:var(--jf-3)} .jf-t4{stroke:var(--jf-4)} .jf-w1{stroke:var(--jf-1)} .jf-w4{stroke:var(--jf-4)} .jf-dome{fill:var(--jf-dome)} .jf-dome-n{fill:color-mix(in oklab,var(--jf-dome) 22%,var(--n6))} .jf-dome-d{fill:color-mix(in oklab,var(--jf-dome) 12%,var(--n4))} .jf-mute{stroke:color-mix(in oklab,var(--jf-dome) 45%,var(--n6))} .jf-n{stroke:var(--n6)} .jf-n4{stroke:var(--n4)} .jf-doubt{stroke:var(--doubt)} .jf-dim{stroke:var(--jf-dome);stroke-opacity:.55} .jf-stack{display:inline-flex;position:relative;line-height:0;flex:none} .jf-stack .jf{display:none} .jf-stack .jf-idle{display:block} .jf-stack .jf-playing,.jf-stack .jf-loading,.jf-stack .jf-done,.jf-stack .jf-hint {position:absolute;top:0;left:0} :root[data-jf=playing] .jf-stack .jf-idle{visibility:hidden} :root[data-jf=playing] .jf-stack .jf-playing{display:block} :root[data-jf=loading] .jf-stack .jf-idle{visibility:hidden} :root[data-jf=loading] .jf-stack .jf-loading{display:block} :root[data-jf=hint] .jf-stack .jf-idle{visibility:hidden} :root[data-jf=hint] .jf-stack .jf-hint{display:block} :root[data-jf=done] .jf-stack .jf-idle{visibility:hidden} :root[data-jf=done] .jf-stack .jf-done{display:block} @media (prefers-reduced-motion:no-preference){ :root[data-jf=playing] .jf-stack .jf-playing path:nth-of-type(odd) {animation:jf-swim 1.6s ease-in-out infinite alternate} @keyframes jf-swim{from{transform:translateY(-.6px)}to{transform:translateY(.6px)}} } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{background:var(--ink);color:var(--paper);font-family:var(--sans); font-size:var(--fs-14);line-height:var(--lh-body);-webkit-font-smoothing:antialiased; overflow-x:hidden} a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2); transition:border-color var(--t),color var(--t)} a:hover{border-bottom-color:var(--vermilion);color:var(--vermilion)} button,input,select{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--vermilion);outline-offset:2px} img,svg{display:block;max-width:100%} ::selection{background:var(--vermilion);color:#fff} code,kbd{font-family:var(--mono);font-size:.9em;background:var(--ink-4);border:1px solid var(--rule);padding:.05em .3em} pre{background:var(--ink-4);border:1px solid var(--rule);padding:var(--s4);overflow-x:auto; font-family:var(--mono);font-size:var(--fs-12);line-height:1.8;margin:var(--s3) 0 var(--s5)} pre code{background:none;border:0;padding:0} h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:var(--lh-tight)} h1{font-size:var(--fs-34)} h2{font-size:var(--fs-26)} h3{font-size:var(--fs-16);font-family:var(--sans);font-weight:650;letter-spacing:0} p{color:var(--paper-2);margin-bottom:var(--s3)} strong,b{color:var(--paper);font-weight:650} .lede{font-family:var(--serif);font-size:var(--fs-16);line-height:1.78;color:var(--paper); max-width:100%} .lede em{font-style:normal;color:var(--vermilion)} .meta{font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3);letter-spacing:.04em} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} .stitle{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap; padding-top:var(--s2);border-top:2px solid var(--vermilion);margin:var(--s5) 0 var(--s3)} .stitle h2{margin:0} .stitle .spacer{margin-left:auto} h1,h2,h3{text-wrap:balance} p,.lede{text-wrap:pretty} .lede{max-width:100%} .nav a,.btn,.axis,.langbtn,.dlchip,.dlmore,.fgrid a,.fgrid h4,.stitle h2,.stitle .meta, .tag,.lic,.pkg .pn,.pkg .pm,.sideitem .si-n,.hero-meta,.hero .kick,.crumbs span,.crumbs a{ white-space:nowrap} .nav{flex-wrap:wrap;row-gap:var(--s2)} @media(max-width:1023px){ .hbar{flex-wrap:wrap;height:auto;min-height:52px;padding-top:var(--s2);padding-bottom:var(--s2);row-gap:var(--s2)} .nav{margin-left:0;width:100%;order:9;gap:var(--s4)} } .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} .wrap-read{max-width:var(--wrap-read)} body > header{position:sticky;top:0;z-index:var(--z-hdr);background:var(--ink); border-bottom:1px solid var(--rule)} .hbar{max-width:var(--wrap);margin:0 auto;height:var(--hdr); padding:0 var(--gutter);display:flex;align-items:center;gap:var(--s5)} .brand{display:flex;align-items:center;gap:var(--s2);border:0;flex:none} .brand svg{width:22px;height:22px;flex:none} .brand .jf-404 svg{width:32px;height:32px} .brand b{font-family:var(--serif);font-size:var(--fs-16);font-weight:600} .brand i{font-family:var(--mono);font-size:var(--fs-11);font-style:normal;color:var(--paper-3);margin-left:2px} .nav{display:flex;gap:var(--s5);font-size:var(--fs-13);margin-left:auto;flex-wrap:wrap} .nav a{border-bottom:1px solid transparent;padding-bottom:2px;color:var(--paper-2)} .nav a:hover{color:var(--paper);border-bottom-color:var(--rule-2)} .nav a.on{color:var(--paper);border-bottom-color:var(--vermilion)} .iconbtn{width:34px;height:34px;border:1px solid var(--rule);color:var(--paper-2); display:grid;place-items:center;transition:var(--t);flex:none} .iconbtn:hover{border-color:var(--vermilion);color:var(--vermilion)} .iconbtn svg{width:15px;height:15px;fill:currentColor} .langbtn{width:auto;padding:0 var(--s3);font-family:var(--mono);font-size:var(--fs-11)} #theme svg{fill:none;stroke:currentColor} #theme .i-sun{display:none} #theme .i-moon{display:block} @media (prefers-color-scheme:dark){ :root:not([data-theme=light]) #theme .i-sun{display:block} :root:not([data-theme=light]) #theme .i-moon{display:none} } :root[data-theme=dark] #theme .i-sun{display:block} :root[data-theme=dark] #theme .i-moon{display:none} :root[data-theme=light] #theme .i-sun{display:none} :root[data-theme=light] #theme .i-moon{display:block} .kb-tabicons{position:absolute;width:0;height:0;overflow:hidden} .panel{border:1px solid var(--rule);background:var(--ink-2)} .panel-hd{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4); border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:var(--fs-14)} .panel-bd{padding:var(--s3) var(--s4)} .tile{border:1px solid var(--rule);background:var(--ink-2);padding:var(--s3); transition:border-color var(--t),background var(--t);display:block} .tile:hover{border-color:var(--rule-2);background:var(--ink-3);border-bottom-color:var(--rule-2)} .tile.is-on{border-color:var(--vermilion);background:var(--vermilion-soft)} .dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);font-size:var(--fs-13)} .dl dt{color:var(--paper-3);white-space:nowrap;font-family:var(--mono);font-size:var(--fs-11);padding-top:2px} .dl dd{margin:0;color:var(--paper);word-break:break-word} table{width:100%;border-collapse:collapse;font-size:var(--fs-13)} th,td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--rule);vertical-align:top} th{font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3); letter-spacing:.06em;font-weight:500;border-bottom-color:var(--rule-2);white-space:nowrap} td b{font-weight:600} .tw{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .lic{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--mono); font-size:var(--fs-11);white-space:nowrap;border:1px solid currentColor; padding:1px var(--s2);color:var(--paper-3)} .lic::before{content:'';width:6px;height:6px;background:currentColor;flex:none} .lic.c1{color:var(--jade)} .lic.c2{color:var(--gold)} .lic.c3{color:var(--slate)} .lic.no{color:var(--vermilion)} .lic.plain{border-color:var(--rule);color:var(--paper-3)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:44px;padding:0 var(--s4);border:1px solid var(--rule-2);background:none; color:var(--paper);font-size:var(--fs-13);transition:var(--t)} .btn:hover{border-color:var(--vermilion);color:var(--vermilion)} .btn.primary{background:var(--vermilion);border-color:var(--vermilion);color:#fff} .btn.primary:hover{filter:brightness(1.08);color:#fff} .btn.ghost{border-color:transparent;color:var(--paper-2);padding:0 var(--s3)} .btn.ghost:hover{border-color:var(--rule);color:var(--paper)} .btn svg{width:14px;height:14px;fill:currentColor} .sig{display:flex;align-items:flex-end;gap:1px;height:24px} .sig i{flex:1;background:var(--rule-2);transition:background var(--t)} .tile:hover .sig i{background:var(--vermilion)} footer{margin-top:var(--s6);border-top:1px solid var(--rule); padding:var(--s4) 0 calc(var(--s4) + var(--sa-b))} .fnote{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule); font-size:var(--fs-11);color:var(--paper-3);line-height:1.9} .fbar{display:flex;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap; font-size:var(--fs-12);color:var(--paper-3)} .fbar b{font-family:var(--serif);font-size:var(--fs-13);color:var(--paper);font-weight:600} .fnav{display:flex;gap:var(--s3) var(--s4);flex-wrap:wrap} .fnav a{font-size:var(--fs-12);color:var(--paper-2);border-bottom:0} .fnav a:hover{color:var(--vermilion)} .flic{margin-left:auto;font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3)} .fnote{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule); display:flex;gap:var(--s2) var(--s5);flex-wrap:wrap;justify-content:space-between; font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3)} .fnote a{color:var(--paper-3);border-bottom:0} .fnote a:hover{color:var(--vermilion)} .pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s3)} .pkg{border:1px solid var(--rule);background:var(--ink-2);padding:var(--s4); display:flex;flex-direction:column;gap:var(--s2)} .pkg:hover{border-color:var(--rule-2)} .pkg .pn{font-family:var(--serif);font-size:var(--fs-16)} .pkg .pm{font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3)} .pkg .pd{font-size:var(--fs-12);color:var(--paper-2);line-height:1.7;flex:1} .pkg .dlbtn{align-self:flex-start;min-height:34px;padding:0 var(--s3);background:var(--vermilion); color:#fff;display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-12);border:0} .pkg .dlbtn:hover{filter:brightness(1.08);color:#fff} .pkg .dlbtn svg{width:13px;height:13px;fill:currentColor} .steps{counter-reset:s;list-style:none} .steps li{counter-increment:s;position:relative;padding-left:var(--s6);margin-bottom:var(--s3); font-size:var(--fs-13);color:var(--paper-2)} .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.1em; font-family:var(--mono);font-size:var(--fs-11);color:var(--vermilion)} .note{font-size:var(--fs-12);color:var(--paper-3);border-left:2px solid var(--vermilion); padding-left:var(--s3);margin:var(--s3) 0} main.doc.wide{max-width:var(--wrap)} main.doc{width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--gutter) var(--s6)} main.doc h2{margin-top:var(--s4)} main.doc h3{margin-top:var(--s3)} main.doc ul,main.doc ol{margin:var(--s2) 0 var(--s3) var(--s5);color:var(--paper-2)} main.doc li{margin-bottom:var(--s2)} @media(max-width:640px){ .hbar{height:52px;gap:var(--s3)} .nav{gap:var(--s3);font-size:var(--fs-12)} .hbar > .brand{min-height:44px} .hbar .kb-lang,.hbar .iconbtn{min-width:44px;min-height:44px} .hbar .kb-lang{display:inline-flex;align-items:center;justify-content:center} h1{font-size:var(--fs-26)} .pkgs{grid-template-columns:1fr} table{font-size:var(--fs-12)} th,td{padding:var(--s2)} } .morebtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:44px;padding:var(--s2) var(--s5);border:1px solid var(--rule-2); background:none;color:var(--paper);font-size:var(--fs-13);transition:var(--t); max-width:100%;white-space:normal;text-align:center;line-height:1.4} .morebtn:hover{border-color:var(--vermilion);color:var(--vermilion)} @media(max-width:640px){.morebtn{width:100%}} .morewrap{display:flex;justify-content:center;margin:var(--s5) 0}
.kb-switch{ display:flex; flex-wrap:wrap; gap:2px 4px; align-items:center; margin:0; padding:0; list-style:none; min-width:0; } .kb-switch a{ display:inline-block; padding:.28em .52em; font-size:var(--fs-12); line-height:1.35; border-radius:2px; text-decoration:none; white-space:nowrap; opacity:.62; transition:opacity .15s, background-color .15s; } .kb-switch a:hover{ opacity:1; background:color-mix(in srgb, currentColor 12%, transparent) } .kb-switch a[aria-current="page"]{ opacity:1; font-weight:500; box-shadow:inset 0 -2px 0 var(--accent, currentColor); } .kb-switch .kb-switch-sep{ opacity:.22; padding:0 .15em; user-select:none } @media (max-width:1023px){ .kb-switch{ flex:1 1 100%; order:9; padding-top:var(--s1) } .kb-lang{ margin-left:auto } } @media (max-width:640px){ .kb-switch{ gap:1px 2px } .kb-switch a{ font-size:var(--fs-11); padding:.24em .38em; letter-spacing:0 } .kb-switch .kb-switch-sep{ padding:0 .05em } } .kb-suffix{ opacity:.6; font-weight:400 } .kb-suffix::before{ content:"·"; margin:0 .38em; opacity:.5 } :root{ --jf-1:#FF7C9E; --jf-2:#FF8B6E; --jf-3:#FFAE55; --jf-4:#FFD24E; --jf-dome:#FF8B6E } :root[data-site="home"]{ --jf-1:light-dark(#F34875,#FF7C9E); --jf-2:light-dark(#F1522B,#FF8B6E); --jf-3:light-dark(#CD710D,#FFAE55); --jf-4:light-dark(#AB830B,#FFD24E); --jf-dome:light-dark(#F1522B,#FF8B6E) } :root[data-site="hist"]{ --jf-1:light-dark(#B87D0C,#FFC24E); --jf-2:light-dark(#A2861C,#EBCB4E); --jf-3:light-dark(#7C912B,#BBD754); --jf-4:light-dark(#58982D,#8FD95E); --jf-dome:light-dark(#A2861C,#EBCB4E) } :root[data-site="theo"]{ --jf-1:light-dark(#494AF3,#8B8CFF); --jf-2:light-dark(#2B8CE3,#6FB6F5); --jf-3:light-dark(#2B8CE3,#6FB6F5); --jf-4:light-dark(#494AF3,#8B8CFF); --jf-dome:light-dark(#496FF3,#7E9BFF) } :root[data-site="inst"]{ --jf-1:light-dark(#69962B,#A6DB5E); --jf-2:light-dark(#319C4F,#6BD98A); --jf-3:light-dark(#29997D,#46D9B4); --jf-4:light-dark(#2996A0,#4CD0DC); --jf-dome:light-dark(#319C4F,#6BD98A) } :root[data-site="prod"]{ --jf-1:light-dark(#2A9A73,#4ED9A8); --jf-2:light-dark(#2796A6,#4CCDE0); --jf-3:light-dark(#338CE0,#5AA8F0); --jf-4:light-dark(#4960F3,#7A8CFF); --jf-dome:light-dark(#2796A6,#4CCDE0) } :root[data-site="gloss"]{ --jf-1:light-dark(#7E55E7,#9D7BF5); --jf-2:light-dark(#A05CE0,#B579EE); --jf-3:light-dark(#B762DB,#C778E8); --jf-4:light-dark(#D05AC8,#E074D8); --jf-dome:light-dark(#B762DB,#C778E8) } :root[data-site="ai"]{ --jf-1:light-dark(#DF51B5,#EE6FC8); --jf-2:light-dark(#F34489,#FF6FA8); --jf-3:light-dark(#F34949,#FF7C7C); --jf-4:light-dark(#DB680E,#FFA45C); --jf-dome:light-dark(#F34489,#FF6FA8) } :root[data-site="lib"], :root[data-site="mid"], :root[data-site="zip"], :root[data-site="sf"]{ --jf-1:light-dark(#748AAE,#7C93B8); --jf-2:light-dark(#748AAE,#7C93B8); --jf-3:light-dark(#748AAE,#7C93B8); --jf-4:light-dark(#748AAE,#7C93B8); --jf-dome:light-dark(#748AAE,#7C93B8) } :root[data-site]{ --accent:var(--jf-dome) } .kb-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.3em; font-size:var(--fs-12); opacity:.7; margin:0 0 1.1rem; } .kb-crumbs a{ text-decoration:none; opacity:.85 } .kb-crumbs a:hover{ opacity:1; text-decoration:underline } .kb-crumbs .sep{ opacity:.35 } @media (min-width:1920px){ :root{ --wrap:min(92vw,1840px) } } @media (min-width:2560px){ :root{ --wrap:min(88vw,2120px) } } @supports (padding: max(0px)){ .hbar{ padding-top:var(--sa-t); padding-left:max(var(--gutter), var(--sa-l)); padding-right:max(var(--gutter), var(--sa-r)); } main.doc{ padding-left:max(var(--gutter), var(--sa-l)); padding-right:max(var(--gutter), var(--sa-r)); } .footwrap{ padding-left:max(var(--gutter), var(--sa-l)); padding-right:max(var(--gutter), var(--sa-r)); padding-bottom:calc(var(--s4) + var(--sa-b) + env(safe-area-inset-bottom, 0px)); } } header{ transition:transform .22s ease } header.is-hidden{ transform:translateY(-100%) } @media (min-width:1024px){ header.is-hidden{ transform:none } } @media (prefers-reduced-motion:reduce){ header{ transition:none } } a,button,summary,[role="button"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .kb-switch a:active{ opacity:1; background:color-mix(in srgb, currentColor 18%, transparent) } .kb-lang:active{ border-color:var(--accent); opacity:1 } summary:active{ opacity:.75 } footer.foot{ padding:0 } .footwrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:var(--s4) var(--gutter) calc(var(--s4) + var(--sa-b)); } .footline{ display:flex; flex-wrap:wrap; align-items:center; padding-bottom:var(--s3); margin-bottom:var(--s3); border-bottom:1px solid var(--rule); } .footnote{ margin:0; font-size:var(--fs-12); line-height:1.9; color:var(--paper-3); max-width:96ch; } .footnote a{ color:var(--paper-2); border-bottom:1px solid var(--rule-2) } .footnote a:hover{ color:var(--accent) } .footmeta{ margin:var(--s3) 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em var(--s3); font-size:var(--fs-11); color:var(--paper-3); } .footlinks{ display:inline-flex; flex-wrap:wrap; gap:.2em var(--s3) } .footlinks a{ color:var(--paper-3); border-bottom:0 } .footlinks a:hover{ color:var(--accent) } .footcore{ font-family:var(--mono); opacity:.72; } .footcore::before{ content:"·"; margin-right:.45em; opacity:.6 } .kb-toc{ font-size:var(--fs-13); border-left:1px solid var(--rule); padding-left:.85rem; } .kb-toc a{ display:block; padding:.18em 0; text-decoration:none; opacity:.7 } .kb-toc a:hover{ opacity:1 } :root[data-theme=light] .kb-toc{ border-left-color:var(--rule) } .kb-tabs{ display:none } @media (max-width:640px){ :root{ --tabs-h:calc(56px + var(--sa-b)) } .kb-switch{ display:none } .kb-tabs{ display:grid; grid-template-columns:repeat(8,1fr); gap:1px; position:fixed; left:0; right:0; bottom:0; z-index:var(--z-hdr); padding:6px 2px calc(6px + var(--sa-b)); background:var(--ink-2); border-top:1px solid var(--rule); } .kb-tabs > a, .kb-tabs summary{ display:grid; place-items:center; gap:1px; min-height:var(--tap); border-radius:var(--r-1); font-size:9.5px; line-height:1.1; text-decoration:none; color:var(--paper-2); background:none; border:0; cursor:pointer; font-family:inherit; letter-spacing:0; padding:3px 0; } .kb-tabs > a svg{width:16px;height:16px;display:block;flex:none} .kb-tabs > a:hover, .kb-tabs summary:hover{ color:var(--paper) } .kb-tabs > a[aria-current="page"]{ color:var(--accent); font-weight:650 } .kb-tabs-more{ position:relative } .kb-tabs-more[open] > summary{ background:color-mix(in srgb,currentColor 12%,transparent); color:var(--paper) } .kb-tabs-sheet{ position:absolute; bottom:calc(100% + var(--s2)); left:0; right:0; background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r-2); padding:var(--s2); display:grid; grid-template-columns:1fr 1fr; gap:2px; max-height:min(56vh,420px); overflow:auto; box-shadow:0 -12px 32px -18px rgba(0,0,0,.6); } .kb-tabs-sheet a{ display:grid; place-items:center; min-height:var(--tap); border-radius:var(--r-1); font-size:var(--fs-12); color:var(--paper-2); text-decoration:none; } .kb-tabs-sheet a:hover{ background:color-mix(in srgb,currentColor 12%,transparent); color:var(--paper) } .kb-tabs-sheet a[aria-current="page"]{ color:var(--accent); font-weight:650 } main{ padding-bottom:calc(var(--s6) + var(--tabs-h)) } } @media (prefers-reduced-motion:reduce){ .kb-tabs, .kb-tabs-sheet{ transition:none } }
--s*/--r/--wrap-read 命名：全部 kb- 前缀，与在役三站零冲突 ═══════════════════════════════════════════════════════════════════════ */ .kb-lang{ flex:0 0 auto; margin-left:var(--s3); padding:.26em .62em; font-size:var(--fs-12); line-height:1.4; border:1px solid var(--rule-2); border-radius:var(--r); text-decoration:none; opacity:.8; white-space:nowrap; transition:border-color var(--t), opacity var(--t); } .kb-lang:hover{ border-color:var(--accent); opacity:1; text-decoration:none } .doc{ padding:var(--s6) 0 var(--s8) } .kb-read{ max-width:none } .doc p,.doc li,.doc h1,.doc h2,.doc h3,.doc h4,.doc blockquote,.kb-title,.kb-why{ overflow-wrap:break-word; } .doc h1{ font-family:var(--serif); font-size:var(--fs-46); font-weight:400; line-height:1.18; letter-spacing:.01em; margin:0 0 var(--s4); text-wrap:balance; } .doc h2{ font-family:var(--serif); font-size:var(--fs-26); font-weight:400; line-height:1.3; margin:var(--s7) 0 var(--s3); padding-bottom:var(--s2); border-bottom:1px solid var(--rule); } .doc h3{ font-size:var(--fs-20); font-weight:500; margin:var(--s5) 0 var(--s2); } .doc h4{ font-size:var(--fs-16); font-weight:500; margin:var(--s4) 0 var(--s2); opacity:.9; } .doc h2,.doc h3,.doc h4{ scroll-margin-top:calc(var(--hdr) + var(--s3)) } .doc p{ font-size:var(--fs-16); line-height:var(--lh-body); margin:0 0 var(--s3); text-wrap:pretty; } .doc .kb-lead{ font-size:var(--fs-20); line-height:1.62; color:var(--paper-2); margin:0 0 var(--s5); } .doc ul{ margin:0 0 var(--s3); padding-left:1.25em } .doc li{ font-size:var(--fs-16); line-height:var(--lh-body); margin:.2em 0 } .doc a{ color:inherit; text-underline-offset:.22em; text-decoration-color:var(--rule-2) } .doc a:hover{ text-decoration-color:var(--accent) } .doc code{ font-family:var(--mono); font-size:.9em; background:var(--ink-3); padding:.12em .38em; border-radius:var(--r); } .doc blockquote{ margin:var(--s4) 0; padding:var(--s2) 0 var(--s2) var(--s4); border-left:2px solid var(--rule-2); color:var(--paper-2); } .kb-note{ font-size:var(--fs-13); color:var(--paper-3); line-height:1.6; margin:var(--s3) 0 0; } .kb-broken{ color:var(--vermilion); border-bottom:1px dashed var(--vermilion-line); font-family:var(--mono); font-size:.9em; } .kb-instances{ margin:var(--s7) 0; padding:var(--s4) var(--s5); background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r-lg); } .kb-instances h2{ margin-top:0; border-bottom-color:var(--rule) } .kb-items{ display:flex; flex-direction:column; gap:2px; margin:var(--s3) 0 } .kb-item{ display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--r); transition:background-color var(--t); } .kb-item:hover{ background:var(--ink-3) } .kb-item-inline{ display:inline-flex; vertical-align:baseline; padding:.05em .4em; gap:.4em } .kb-play{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--rule-2); background:transparent; color:var(--paper); font-size:0; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:border-color var(--t), background-color var(--t), transform var(--t); } .kb-play::before{ content:""; display:block; width:0; height:0; margin-left:2px; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor; } .kb-play[aria-pressed="true"]::before{ width:8px; height:10px; margin-left:0; border:0; background:linear-gradient(to right, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px); } .kb-play:hover{ border-color:var(--accent); background:var(--ink-3) } .kb-play[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .kb-title{ flex:1 1 auto; font-size:var(--fs-14); min-width:0 } .kb-why{ flex:1 1 100%; font-size:var(--fs-13); color:var(--paper-3); padding-left:calc(26px + var(--s3)); } .kb-item{ flex-wrap:wrap } .kb-play-meta{ display:inline-flex; align-items:center; gap:var(--s2); flex:0 0 auto } .kb-dur{ font-family:var(--mono); font-size:var(--fs-12); color:var(--paper-3) } .kb-detail{ flex:0 0 auto; font-size:var(--fs-12); opacity:.5; text-decoration:none; white-space:nowrap; } .kb-detail:hover{ opacity:1; text-decoration:underline } .kb-lic{ font-family:var(--mono); font-size:var(--fs-10); letter-spacing:.04em; padding:.1em .38em; border-radius:var(--r); border:1px solid currentColor; opacity:.85; } .kb-lic-c1{ color:var(--ok) } .kb-lic-c2{ color:var(--study) } .kb-lic-c3{ color:var(--doubt) } .kb-lic .kb-lic-jf{ width:24px; height:24px; margin-right:.34em; vertical-align:-7px } .kb-fig{ margin:var(--s5) 0; padding:var(--s4); background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r-lg); overflow-x:auto; } .kb-fig svg{ display:block; width:100%; height:auto; min-width:min(100%,420px) } .kb-fig figcaption{ margin-top:var(--s3); font-size:var(--fs-12); color:var(--paper-3); text-align:center; } .kb-range-note{ margin:var(--s2) 0 0; font-size:var(--fs-12); color:var(--paper-3); line-height:1.6; } .kb-range{ padding-bottom:var(--s3) } .kb-lab{ margin:var(--s5) 0; padding:var(--s4) var(--s5); background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r-lg); } .kb-lab-head{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3); } .kb-lab-label{ font-size:var(--fs-14); font-weight:500 } .kb-lab-hint{ font-size:var(--fs-12); color:var(--paper-3) } .kb-lab-row{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin:var(--s2) 0 } .kb-lab-btn{ min-width:74px; padding:.42em .9em; font-size:var(--fs-13); background:transparent; color:var(--paper); border:1px solid var(--rule-2); border-radius:var(--r); cursor:pointer; transition:border-color var(--t), background-color var(--t); } .kb-lab-btn:hover{ border-color:var(--accent) } .kb-lab-btn[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent) } .kb-lab-btn.kb-lab-on{ border-color:var(--accent); color:var(--accent) } .kb-lab select, .kb-lab input[type=range]{ background:var(--ink-3); color:var(--paper); border:1px solid var(--rule-2); border-radius:var(--r); font-size:var(--fs-13); padding:.3em .5em; } .kb-lab input[type=range]{ padding:0; accent-color:var(--accent) } .kb-lab canvas{ display:block; width:100%; height:76px; margin-top:var(--s3); background:var(--ink-4); border:1px solid var(--rule); border-radius:var(--r); } .kb-dot{ display:inline-block; min-width:32px; text-align:center; padding:.3em .5em; font-family:var(--mono); font-size:var(--fs-12); border:1px solid var(--rule); border-radius:var(--r); opacity:.6; transition:border-color .1s linear, opacity .1s linear; } .kb-dot-on{ border-color:var(--accent); color:var(--accent); opacity:1 } .kb-lab-state{ font-family:var(--mono); font-size:var(--fs-11); opacity:.85; padding:.2em .5em; border:1px dashed var(--rule-2); border-radius:var(--r); } .kb-lab[data-lab="instrument"] .kb-lab-btn[data-k="gm"]{ border-color:var(--rule-2) } .kb-lab[data-lab="instrument"] [data-keys]{ font-family:var(--mono); letter-spacing:.02em; } @media (max-width:640px){ .kb-lab-state{ display:block; flex:1 1 100%; } .kb-lab[data-lab="instrument"] .kb-lab-btn{ flex:1 1 100%; } } .kb-rel{ margin:var(--s6) 0 0 } .kb-chips{ display:flex; flex-wrap:wrap; gap:var(--s2) } .kb-chip{ display:inline-block; padding:.28em .7em; font-size:var(--fs-13); border:1px solid var(--rule-2); border-radius:var(--r); text-decoration:none; opacity:.85; transition:border-color var(--t), opacity var(--t); } .kb-chip:hover{ border-color:var(--accent); opacity:1; text-decoration:none } .kb-sources{ margin:var(--s6) 0 0; padding-top:var(--s4); border-top:1px solid var(--rule) } .kb-sources h2{ font-size:var(--fs-16); border:0; margin:0 0 var(--s2); opacity:.7 } .kb-sources ul{ margin:0; padding-left:1.2em } .kb-sources li{ font-size:var(--fs-13); color:var(--paper-2); line-height:1.6 } .kb-cat{ margin:var(--s6) 0 0 } .kb-cat h2{ font-size:var(--fs-20); border-bottom:1px solid var(--rule) } .kb-list{ list-style:none; margin:var(--s3) 0 0; padding:0 } .kb-list li{ margin:0; border-bottom:1px solid var(--rule) } .kb-list a{ display:block; padding:var(--s3) var(--s2); text-decoration:none; transition:background-color var(--t); } .kb-list a:hover{ background:var(--ink-2); text-decoration:none } .kb-t{ display:block; font-size:var(--fs-16); margin-bottom:.15em } .kb-d{ display:block; font-size:var(--fs-13); color:var(--paper-3); line-height:1.55 } .kb-soon{ margin:var(--s6) 0 0; padding:var(--s5) var(--s5) var(--s4); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:var(--r); background:var(--ink-2); } .kb-soon h2{ font-size:var(--fs-20); border:0; margin:0 0 var(--s2) } .kb-soon p{ font-size:var(--fs-16); color:var(--paper-2); margin:0 0 var(--s3) } .kb-soon ul{ margin:0; padding-left:1.2em; columns:2; column-gap:var(--s6) } @media (max-width:640px){ .kb-soon ul{ columns:1 } } .kb-empty-mark{ display:flex; justify-content:center; margin:0 0 var(--s4); opacity:.9 } .kb-soon-more{ margin:var(--s3) 0 0; font-size:var(--fs-13) } .kb-soon-more a{ color:var(--paper-2) } .kb-soon-more a:hover{ color:var(--accent) } .kb-soon-hint{ font-size:var(--fs-13); color:var(--paper-3); line-height:1.6; margin:0 0 var(--s3); padding-left:.75em; border-left:2px solid var(--accent); } .kb-ph{ font-size:var(--fs-20); border:0; margin:var(--s6) 0 0 } .kb-pcard{ display:flex; flex-direction:column; gap:.45em; padding:var(--s4); border:1px solid var(--rule); border-radius:var(--r); background:var(--ink-2); text-decoration:none; transition:border-color var(--t), background-color var(--t); } .kb-pcard:hover{ border-color:var(--pc,var(--accent)); background:var(--ink-3); text-decoration:none } .kb-pname{ display:flex; align-items:center; gap:.5em; font-size:var(--fs-16) } .kb-pname i{ display:inline-block; flex:0 0 auto; width:.45em; height:1em; border-radius:2px; background:var(--pc,var(--accent)); } .kb-pdesc{ font-size:var(--fs-13); color:var(--paper-3); line-height:1.55 } .kb-soon-tag{ font-size:var(--fs-12); font-style:normal; color:var(--paper-3); border:1px solid var(--rule-2); border-radius:999px; padding:.05em .55em; margin-left:.5em; vertical-align:.05em; white-space:nowrap; } .pbar{ position:sticky; bottom:0; z-index:var(--z-play); background:var(--ink-2); border-top:1px solid var(--rule); padding:var(--s2) 0 calc(var(--s2) + var(--sa-b)); } .pbar[hidden]{ display:none } .pbar-inner{ display:flex; align-items:center; gap:var(--s3); max-width:var(--wrap); margin:0 auto; width:var(--wrap); padding:0 var(--gutter); } .pbar-title{ flex:0 1 auto; max-width:32%; font-size:var(--fs-13); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .pbar-time{ font-family:var(--mono); font-size:var(--fs-12); color:var(--paper-3); flex:0 0 auto; white-space:nowrap } .pbar-seek{ flex:1 1 auto; min-width:80px; height:24px; margin:0; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; touch-action:pan-y; } .pbar-seek::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:var(--ink-4); border:1px solid var(--rule); } .pbar-seek::-moz-range-track{ height:4px; border-radius:2px; background:var(--ink-4); border:1px solid var(--rule); } .pbar-seek::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-6px; border-radius:50%; background:var(--accent); border:0; } .pbar-seek::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%; background:var(--accent); } .pbar-seek:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } @media (max-width:640px){ .pbar-title{ max-width:40% } .pbar-seek{ height:28px } .pbar-seek::-webkit-slider-thumb{ width:18px; height:18px; margin-top:-8px } .pbar-seek::-moz-range-thumb{ width:18px; height:18px } .pbar{ bottom:var(--tabs-h) } } :root{ --read:1440px } .kb-tablewrap{ margin:var(--s4) 0; max-width:100%; border:1px solid var(--rule); border-radius:var(--r); background:var(--ink-2); } .kb-tablewrap:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } .kb-tablewrap table{ width:100%; min-width:0; border-collapse:collapse; margin:0 } .kb-tablewrap th,.kb-tablewrap td{ padding:var(--s3); border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; font-size:var(--fs-13); line-height:1.65; overflow-wrap:anywhere; } .kb-tablewrap thead th{ color:var(--paper-2); font-weight:500; background:var(--ink-3); border-bottom-color:var(--rule-2); } .kb-tablewrap tbody tr:last-child td{ border-bottom:0 } .kb-tablewrap tbody tr:hover{ background:var(--ink-3) } @media (min-width:641px) and (max-width:900px){ .kb-tablewrap{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch } .kb-tablewrap table{ min-width:440px } } @media (max-width:640px){ .kb-tablewrap{ padding:var(--s2) 0 } .kb-tablewrap thead{ display:none } .kb-tablewrap tbody tr{ display:block; padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule); } .kb-tablewrap tbody tr:last-child{ border-bottom:0 } .kb-tablewrap tbody tr:hover{ background:transparent } .kb-tablewrap td{ display:grid; grid-template-columns:38% minmax(0,1fr); column-gap:var(--s3); align-items:baseline; border:0; padding:.18em 0; font-size:var(--fs-13); } .kb-tablewrap td::before{ content:attr(data-label); grid-column:1; color:var(--paper-3); font-size:var(--fs-12); line-height:1.7; } } .doc-article{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:var(--s5); } .doc-article .kb-crumbs{ flex:1 1 100% } .kb-body{ width:100%; max-width:min(100%, var(--read, 1440px)); min-width:0 } .kb-aside{ flex:1 1 100%; order:-1; margin:0 0 var(--s3); width:100%; } .kb-tocbox{ border:1px solid var(--rule); border-radius:var(--r); background:var(--ink-2); } .kb-tocbox > summary{ cursor:pointer; list-style:none; padding:var(--s3) var(--s4); font-size:var(--fs-13); color:var(--paper-2); display:flex; align-items:center; gap:var(--s2); } .kb-tocbox > summary::-webkit-details-marker{ display:none } .kb-tocbox > summary::after{ content:"▾"; margin-left:auto; font-size:11px; opacity:.45; transition:transform var(--t); } .kb-tocbox[open] > summary::after{ transform:rotate(180deg) } .kb-tocbox > .kb-toc{ padding:0 var(--s4) var(--s3) } .kb-toc h2{ display:none } .kb-toc a{ display:block; padding:.34em 0; font-size:var(--fs-13); text-decoration:none; opacity:.75; border-bottom:1px solid transparent; } .kb-toc a:hover{ opacity:1; color:var(--accent) } .kb-toc a:active{ opacity:.6 } @media (min-width:1400px){ .kb-aside{ order:0; flex:0 0 208px; width:208px; margin:0 } .kb-tocbox{ border:0; background:transparent } .kb-tocbox > summary{ display:none } .kb-tocbox > .kb-toc{ display:block; padding:0; position:sticky; top:calc(var(--hdr) + var(--s4)) } .kb-toc h2{ display:block; font-size:var(--fs-12); font-weight:600; opacity:.6; letter-spacing:.04em } } @media (min-width:1920px){ .kb-aside{ flex:0 0 224px; width:224px } } @media (min-width:2560px){ .kb-aside{ flex:0 0 256px; width:256px } } .kb-cats{ display:grid; gap:var(--s5) var(--s6); grid-template-columns:1fr } @media (max-width:640px){ .doc h1{ font-size:var(--fs-34) } .doc h2{ font-size:var(--fs-20) } .kb-instances{ padding:var(--s3) var(--s4) } .kb-why{ padding-left:0 } .kb-item{ flex-wrap:wrap; row-gap:var(--s2) } .kb-lab-row{ flex-wrap:wrap; row-gap:var(--s2) } .kb-lab-btn{ flex:1 1 auto } .pbar-inner{ width:auto; padding:0 var(--s3) } .pbar-title{ font-size:var(--fs-12) } .doc pre{ white-space:pre-wrap; overflow-wrap:anywhere } .kb-play{ width:44px; height:44px } .kb-play::before{ border-width:7px 0 7px 12px; margin-left:4px } .kb-play[aria-pressed="true"]::before{ width:10px; height:12px; margin-left:0; background:linear-gradient(to right, currentColor 0 4px, transparent 4px 6px, currentColor 6px 10px); } .kb-play:active{ transform:scale(.93) } .kb-detail{ padding:.42em .7em; margin:-.42em -.3em } .kb-item{ padding:var(--s3) var(--s2) } .kb-lab-btn{ padding:.62em .9em; font-size:var(--fs-13) } .doc p, .doc li{ line-height:1.78 } } @media (min-width:641px) and (max-width:1023px){ .doc h1{ font-size:var(--fs-38) } .kb-instances{ padding:var(--s3) var(--s4) } .kb-item{ flex-wrap:wrap; row-gap:var(--s2) } } @media (min-width:1024px) and (max-width:1399px){ .kb-body{ max-width:100% } } @media (min-width:1400px){ .kb-body{ flex:0 1 auto; max-width:min(100%, var(--read, 1440px)) } .kb-cats{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)) } } @media (min-width:1920px){ .doc-article{ gap:var(--s6) } .kb-cats{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 460px), 1fr)) } } @media (min-width:2560px){ .doc-article{ gap:var(--s7) } .kb-cats{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 520px), 1fr)) } } .kb-circle-row{ align-items:flex-start } .kb-circle{ width:100%; max-width:300px; height:auto; flex:0 0 auto; color:var(--paper-2); } .kb-cseg{ cursor:pointer } .kb-cseg path{ transition:fill var(--t), stroke var(--t) } .kb-cseg:hover path{ stroke:var(--accent) } .kb-cseg text{ pointer-events:none } .kb-circle-now{ fill:var(--paper); font-family:var(--serif) } @media (max-width:640px){ .kb-circle{ max-width:230px; margin:0 auto } } .v3-needs,.v3-ladder,.v3-scenes,.v3-quiz-cta{ margin:var(--s7) 0 0 } .v3-needs h2,.v3-ladder h2,.v3-scenes h2{ font-size:var(--fs-26); margin:0 0 var(--s4) } .v3-needs .v3-sub,.v3-ladder .v3-sub,.v3-scenes .v3-sub{ margin:-.4rem 0 var(--s5); color:var(--paper-2); font-size:.9rem } .v3-cards{ display:grid; gap:var(--s4); grid-template-columns:1fr } .v3-card{ display:flex; flex-direction:column; gap:.35rem; padding:var(--s5); border:1px solid var(--rule); border-radius:var(--r-3); background:var(--ink-2); text-decoration:none; color:inherit; position:relative; transition:border-color var(--t), background var(--t), transform var(--t) } .v3-card:hover{ border-color:var(--accent); background:var(--ink-3); transform:translateY(-2px) } .v3-card:focus-visible{ outline:3px solid var(--accent); outline-offset:2px } .v3-card .v3-ico{ width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); font-family:var(--serif); font-size:1.05rem } .v3-card b{ font-size:var(--fs-16); font-weight:700 } .v3-card em{ font-style:normal; color:var(--paper-2); font-size:.9rem; line-height:1.6 } .v3-card .v3-go{ margin-top:auto; padding-top:.6rem; color:var(--accent); font-size:var(--fs-11) } .v3-steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s4) } .v3-step{ display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; padding:var(--s4) var(--s5); border:1px solid var(--rule); border-radius:var(--r-3); background:var(--ink-2) } .v3-step .v3-num{ font-family:var(--serif); font-size:1.4rem; color:var(--accent); min-width:1.6rem } .v3-step b{ display:block; font-size:var(--fs-16) } .v3-step span{ color:var(--paper-2); font-size:.92rem; line-height:1.6 } .v3-chips{ display:flex; flex-wrap:wrap; gap:.6rem } .v3-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border:1px solid var(--rule); border-radius:999px; background:var(--ink-2); color:inherit; text-decoration:none; font-size:var(--fs-13) } .v3-chip:hover,.v3-chip:focus-visible{ border-color:var(--accent); color:var(--accent) } .v3-quiz-cta a{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4); padding:var(--s5) var(--s6); border-radius:var(--r-3); border:1px dashed color-mix(in srgb, var(--accent) 50%, var(--rule)); background:color-mix(in srgb, var(--accent) 8%, var(--ink-2)); color:inherit; text-decoration:none } .v3-quiz-cta a:hover{ border-style:solid } .v3-quiz-cta b{ font-size:var(--fs-16) } .v3-quiz fieldset{ border:0; padding:0; margin:0 0 var(--s6) } .v3-quiz legend{ font-size:var(--fs-16); font-weight:700; margin-bottom:var(--s4) } .v3-quiz .v3-opt{ display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .8rem; border:1px solid var(--rule); border-radius:var(--r-2); margin-bottom:.5rem; cursor:pointer; background:var(--ink-2) } .v3-quiz .v3-opt:hover{ border-color:var(--accent) } .v3-quiz .v3-opt input{ margin-top:.25rem } .v3-quiz .v3-result{ padding:var(--s5); border-radius:var(--r-3); background:var(--ink-3); border:1px solid var(--rule); display:none } .v3-quiz .v3-result.on{ display:block } .v3-quiz .v3-result a{ font-weight:700 } .kb-dossier{ margin:var(--s5) 0 var(--s6); padding:var(--s4) var(--s5); border:1px solid var(--rule); border-radius:var(--r-3); background:var(--ink-2) } .kb-dossier h2{ font-size:var(--fs-11); letter-spacing:.08em; text-transform:uppercase; color:var(--paper-2); margin:0 0 var(--s3) } .kb-dossier dl{ display:grid; gap:.45rem .9rem; margin:0; grid-template-columns:1fr } .kb-dossier dl>div{ display:contents } .kb-dossier dt{ color:var(--paper-2); font-size:var(--fs-11) } .kb-dossier dd{ margin:0; font-size:var(--fs-13); font-weight:600 } @media (min-width:720px){ .kb-dossier dl{ grid-template-columns:repeat(2, max-content 1fr) } .v3-cards{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1080px){ .kb-dossier dl{ grid-template-columns:repeat(3, max-content 1fr) } .v3-cards{ grid-template-columns:repeat(3,1fr) } .v3-steps{ grid-template-columns:repeat(2,1fr) } } @media (prefers-reduced-motion:reduce){ .v3-card,.v3-card:hover{ transform:none } } .v3-hero{ padding:var(--s7) 0 0 } .v3-eyebrow{ font-family:var(--mono); font-size:var(--fs-11); letter-spacing:.16em; text-transform:uppercase; color:var(--paper-2); margin:0 } .v3-hero h1{ font-family:var(--serif); font-size:clamp(26px, 3.4vw, 36px); line-height:1.16; margin:.5rem 0 .7rem; color:var(--paper); max-width:22ch } html[data-design=v6] .v3-hero h1{ font-size:clamp(26px, 3.4vw, 36px); line-height:1.16 } .v3-hero .v3-lead{ font-size:1.02rem; line-height:1.7; color:var(--paper-2); max-width:46rem } .v3-hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin:var(--s5) 0 0 } .v3-hero-actions .v6-btn{ display:inline-flex; align-items:center; min-height:44px } .v3-lib{ margin:var(--s7) 0 0 } .v3-lib h2{ font-size:var(--fs-26); margin:0 0 var(--s4) } .v3-lib .v3-sub{ margin:-.4rem 0 var(--s5); color:var(--paper-2); font-size:var(--fs-13) } .v3-libgrid{ display:grid; gap:var(--s4); grid-template-columns:1fr } .v3-libcard{ display:block; padding:var(--s5); border:1px solid var(--rule); border-radius:var(--r-3); background:var(--ink-2); color:inherit; text-decoration:none } .v3-libcard:hover,.v3-libcard:focus-visible{ border-color:var(--accent) } .v3-libcard .v3-num{ display:block; font-family:var(--serif); font-size:1.6rem; color:var(--paper); line-height:1.1; margin-bottom:.35rem } .v3-libcard b{ display:block; font-size:var(--fs-13); color:var(--paper) } .v3-libcard span{ color:var(--paper-2); font-size:var(--fs-11) } .v3-libnote{ margin:var(--s4) 0 0; color:var(--paper-2); font-size:var(--fs-11) } @media (min-width:720px){ .v3-libgrid{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1080px){ .v3-libgrid{ grid-template-columns:repeat(4,1fr) } }
:root{ --sv6e6a64: light-dark(#93908A, #6E6A64); --sva9a49b: light-dark(#635F57, #A9A49B); --sve8c547: light-dark(#AA8D25, #E8C547); --sv5b7fa8: light-dark(#5E7B9D, #5B7FA8); --sve07a3f: light-dark(#B25E2D, #E07A3F); --sv9c7a3c: light-dark(#AC8B50, #9C7A3C); --sv343439: light-dark(#E5E5E6, #343439); --sv17171a: light-dark(#E6E6E7, #17171A); --sv97c459: light-dark(#779B44, #97C459); --sv26241f: light-dark(#E6E6E5, #26241F); --svc0504a: light-dark(#AA4F4A, #C0504A); --sv1e6b52: light-dark(#3BA180, #1E6B52); --sv0e0e10: light-dark(#F0F0F0, #0E0E10); --svf2eee6: light-dark(#201C13, #F2EEE6); --svf0997b: light-dark(#79321A, #F0997B); --sv2a2724: light-dark(#E6E6E5, #2A2724); --sv6b4fa8: light-dark(#765FA8, #6B4FA8); --svb5761e: light-dark(#C08432, #B5761E); --svffffff: light-dark(#1A1A1A, #FFFFFF); --sv5a554e: light-dark(#958F88, #5A554E); --sv1a0e06: light-dark(#F2EEEC, #1A0E06); --sve4dcd0: light-dark(#2D271D, #E4DCD0); --sv8a8478: light-dark(#858077, #8A8478); --sv070706: light-dark(#F8F8F7, #070706); --sva8452c: light-dark(#C87762, #A8452C); --sv3a3630: light-dark(#E6E6E5, #3A3630); --sv3a3733: light-dark(#E6E6E5, #3A3733); --svf0f7f3: light-dark(#132019, #F0F7F3); --svc0392b: light-dark(#C7584C, #C0392B); --svf4f0fa: light-dark(#170F24, #F4F0FA); --svc9a227: light-dark(#AB8D31, #C9A227); --svfbf3e4: light-dark(#291E0A, #FBF3E4); --svfaf7f2: light-dark(#231C10, #FAF7F2); --sv3b5ba5: light-dark(#647EBA, #3B5BA5); --svb5651d: light-dark(#CC7D37, #B5651D); --sv111113: light-dark(#EDEDED, #111113); --sv8c6d1f: light-dark(#AD8C36, #8C6D1F); --svf7ece8: light-dark(#24150F, #F7ECE8); --sv0d0c0a: light-dark(#F4F4F3, #0D0C0A); --sv3a362c: light-dark(#E7E6E4, #3A362C); --sve8dcc8: light-dark(#342A1A, #E8DCC8); --sv0b0b0c: light-dark(#F3F3F4, #0B0B0C); --sv242427: light-dark(#E5E5E6, #242427); --sv8a6b34: light-dark(#AD8B4F, #8A6B34); --svfbf3ee: light-dark(#26170D, #FBF3EE); --svf5ebdd: light-dark(#251B0E, #F5EBDD); --sv2a1408: light-dark(#EBE4E1, #2A1408); --sv4e6e8c: light-dark(#7993AB, #4E6E8C); --svd8cfc0: light-dark(#3D3529, #D8CFC0); --sve9dcc6: light-dark(#362B19, #E9DCC6); --sv0b0b0d: light-dark(#F3F3F3, #0B0B0D); --sv5e8b6e: light-dark(#739980, #5E8B6E); --svc9a876: light-dark(#82663D, #C9A876); --svce4a32: light-dark(#BF533F, #CE4A32); --sve4efe9: light-dark(#141F19, #E4EFE9); --sv3a2f10: light-dark(#EAE8E1, #3A2F10); --sv8c4a12: light-dark(#D17B33, #8C4A12); --svd8c7a4: light-dark(#56482C, #D8C7A4); --svf0e4ce: light-dark(#2E2412, #F0E4CE); --svfffdf6: light-dark(#2E2505, #FFFDF6); --sv1a1508: light-dark(#F1EFEB, #1A1508); --sv1b1b1e: light-dark(#E5E5E6, #1B1B1E); --sv1d1b18: light-dark(#E6E6E5, #1D1B18); --sv1e2a1e: light-dark(#E4E7E4, #1E2A1E); --sv5a2d08: light-dark(#ECE5DF, #5A2D08); --sv6e5a16: light-dark(#A98D31, #6E5A16); --sv6e6a63: light-dark(#93908A, #6E6A63); --svdfcdaf: light-dark(#4C3D24, #DFCDAF); } .sf6e6a64{fill:var(--sv6e6a64)} .ss6e6a64{stroke:var(--sv6e6a64)} .sfa9a49b{fill:var(--sva9a49b)} .ssa9a49b{stroke:var(--sva9a49b)} .sfe8c547{fill:var(--sve8c547)} .sse8c547{stroke:var(--sve8c547)} .sf5b7fa8{fill:var(--sv5b7fa8)} .ss5b7fa8{stroke:var(--sv5b7fa8)} .sfe07a3f{fill:var(--sve07a3f)} .sse07a3f{stroke:var(--sve07a3f)} .sf9c7a3c{fill:var(--sv9c7a3c)} .ss9c7a3c{stroke:var(--sv9c7a3c)} .sf343439{fill:var(--sv343439)} .ss343439{stroke:var(--sv343439)} .sf17171a{fill:var(--sv17171a)} .ss17171a{stroke:var(--sv17171a)} .sf97c459{fill:var(--sv97c459)} .ss97c459{stroke:var(--sv97c459)} .sf26241f{fill:var(--sv26241f)} .ss26241f{stroke:var(--sv26241f)} .sfc0504a{fill:var(--svc0504a)} .ssc0504a{stroke:var(--svc0504a)} .sf1e6b52{fill:var(--sv1e6b52)} .ss1e6b52{stroke:var(--sv1e6b52)} .sf0e0e10{fill:var(--sv0e0e10)} .ss0e0e10{stroke:var(--sv0e0e10)} .sff2eee6{fill:var(--svf2eee6)} .ssf2eee6{stroke:var(--svf2eee6)} .sff0997b{fill:var(--svf0997b)} .ssf0997b{stroke:var(--svf0997b)} .sf2a2724{fill:var(--sv2a2724)} .ss2a2724{stroke:var(--sv2a2724)} .sf6b4fa8{fill:var(--sv6b4fa8)} .ss6b4fa8{stroke:var(--sv6b4fa8)} .sfb5761e{fill:var(--svb5761e)} .ssb5761e{stroke:var(--svb5761e)} .sfffffff{fill:var(--svffffff)} .ssffffff{stroke:var(--svffffff)} .sf5a554e{fill:var(--sv5a554e)} .ss5a554e{stroke:var(--sv5a554e)} .sf1a0e06{fill:var(--sv1a0e06)} .ss1a0e06{stroke:var(--sv1a0e06)} .sfe4dcd0{fill:var(--sve4dcd0)} .sse4dcd0{stroke:var(--sve4dcd0)} .sf8a8478{fill:var(--sv8a8478)} .ss8a8478{stroke:var(--sv8a8478)} .sf070706{fill:var(--sv070706)} .ss070706{stroke:var(--sv070706)} .sfa8452c{fill:var(--sva8452c)} .ssa8452c{stroke:var(--sva8452c)} .sf3a3630{fill:var(--sv3a3630)} .ss3a3630{stroke:var(--sv3a3630)} .sf3a3733{fill:var(--sv3a3733)} .ss3a3733{stroke:var(--sv3a3733)} .sff0f7f3{fill:var(--svf0f7f3)} .ssf0f7f3{stroke:var(--svf0f7f3)} .sfc0392b{fill:var(--svc0392b)} .ssc0392b{stroke:var(--svc0392b)} .sff4f0fa{fill:var(--svf4f0fa)} .ssf4f0fa{stroke:var(--svf4f0fa)} .sfc9a227{fill:var(--svc9a227)} .ssc9a227{stroke:var(--svc9a227)} .sffbf3e4{fill:var(--svfbf3e4)} .ssfbf3e4{stroke:var(--svfbf3e4)} .sffaf7f2{fill:var(--svfaf7f2)} .ssfaf7f2{stroke:var(--svfaf7f2)} .sf3b5ba5{fill:var(--sv3b5ba5)} .ss3b5ba5{stroke:var(--sv3b5ba5)} .sfb5651d{fill:var(--svb5651d)} .ssb5651d{stroke:var(--svb5651d)} .sf111113{fill:var(--sv111113)} .ss111113{stroke:var(--sv111113)} .sf8c6d1f{fill:var(--sv8c6d1f)} .ss8c6d1f{stroke:var(--sv8c6d1f)} .sff7ece8{fill:var(--svf7ece8)} .ssf7ece8{stroke:var(--svf7ece8)} .sf0d0c0a{fill:var(--sv0d0c0a)} .ss0d0c0a{stroke:var(--sv0d0c0a)} .sf3a362c{fill:var(--sv3a362c)} .ss3a362c{stroke:var(--sv3a362c)} .sfe8dcc8{fill:var(--sve8dcc8)} .sse8dcc8{stroke:var(--sve8dcc8)} .sf0b0b0c{fill:var(--sv0b0b0c)} .ss0b0b0c{stroke:var(--sv0b0b0c)} .sf242427{fill:var(--sv242427)} .ss242427{stroke:var(--sv242427)} .sf8a6b34{fill:var(--sv8a6b34)} .ss8a6b34{stroke:var(--sv8a6b34)} .sffbf3ee{fill:var(--svfbf3ee)} .ssfbf3ee{stroke:var(--svfbf3ee)} .sff5ebdd{fill:var(--svf5ebdd)} .ssf5ebdd{stroke:var(--svf5ebdd)} .sf2a1408{fill:var(--sv2a1408)} .ss2a1408{stroke:var(--sv2a1408)} .sf4e6e8c{fill:var(--sv4e6e8c)} .ss4e6e8c{stroke:var(--sv4e6e8c)} .sfd8cfc0{fill:var(--svd8cfc0)} .ssd8cfc0{stroke:var(--svd8cfc0)} .sfe9dcc6{fill:var(--sve9dcc6)} .sse9dcc6{stroke:var(--sve9dcc6)} .sf0b0b0d{fill:var(--sv0b0b0d)} .ss0b0b0d{stroke:var(--sv0b0b0d)} .sf5e8b6e{fill:var(--sv5e8b6e)} .ss5e8b6e{stroke:var(--sv5e8b6e)} .sfc9a876{fill:var(--svc9a876)} .ssc9a876{stroke:var(--svc9a876)} .sfce4a32{fill:var(--svce4a32)} .ssce4a32{stroke:var(--svce4a32)} .sfe4efe9{fill:var(--sve4efe9)} .sse4efe9{stroke:var(--sve4efe9)} .sf3a2f10{fill:var(--sv3a2f10)} .ss3a2f10{stroke:var(--sv3a2f10)} .sf8c4a12{fill:var(--sv8c4a12)} .ss8c4a12{stroke:var(--sv8c4a12)} .sfd8c7a4{fill:var(--svd8c7a4)} .ssd8c7a4{stroke:var(--svd8c7a4)} .sff0e4ce{fill:var(--svf0e4ce)} .ssf0e4ce{stroke:var(--svf0e4ce)} .sffffdf6{fill:var(--svfffdf6)} .ssfffdf6{stroke:var(--svfffdf6)} .sf1a1508{fill:var(--sv1a1508)} .ss1a1508{stroke:var(--sv1a1508)} .sf1b1b1e{fill:var(--sv1b1b1e)} .ss1b1b1e{stroke:var(--sv1b1b1e)} .sf1d1b18{fill:var(--sv1d1b18)} .ss1d1b18{stroke:var(--sv1d1b18)} .sf1e2a1e{fill:var(--sv1e2a1e)} .ss1e2a1e{stroke:var(--sv1e2a1e)} .sf5a2d08{fill:var(--sv5a2d08)} .ss5a2d08{stroke:var(--sv5a2d08)} .sf6e5a16{fill:var(--sv6e5a16)} .ss6e5a16{stroke:var(--sv6e5a16)} .sf6e6a63{fill:var(--sv6e6a63)} .ss6e6a63{stroke:var(--sv6e6a63)} .sfdfcdaf{fill:var(--svdfcdaf)} .ssdfcdaf{stroke:var(--svdfcdaf)}
html[data-design=v6]{ --ink:light-dark(#FFF5E4,#1B1317); --ink-2:light-dark(#FFFCF4,#261A1F); --ink-3:light-dark(#FFE9C9,#33222A); --ink-4:light-dark(#FFF9EE,#2B1D23); --paper:light-dark(#241B17,#FFF3E6); --paper-2:light-dark(#5C4B3F,#C6B3A6); --paper-3:light-dark(#6F5B4A,#A9958A); --rule:light-dark(#D8C7AE,#4A383F); --rule-2:light-dark(#C3AE90,#5C454D); --v6-line:light-dark(#241B17,#FFF3E6); --v6-accent:var(--jf-1,var(--vermilion)); --v6-accent-2:var(--jf-3,var(--gold)); --v6-display:"Smiley Sans","Songti SC",serif; --v6-r:20px; --v6-shadow:0 5px 0 light-dark(rgba(36,27,23,.88),rgba(0,0,0,.62)); --v6-shadow-sm:0 3px 0 light-dark(rgba(36,27,23,.88),rgba(0,0,0,.62)); color-scheme:light dark; } html[data-design=v6] body{ background-color:var(--ink); background-image: radial-gradient(color-mix(in srgb,var(--v6-line) 7%,transparent) 1px,transparent 1.2px), radial-gradient(50% 36% at 86% 4%,color-mix(in srgb,var(--v6-accent) 10%,transparent),transparent 70%), radial-gradient(42% 34% at 4% 96%,color-mix(in srgb,var(--v6-accent-2) 9%,transparent),transparent 70%); background-size:24px 24px,auto,auto; } html[data-design=v6] body > header{border-bottom:2px solid var(--v6-line);background:color-mix(in srgb,var(--ink) 92%,transparent)} html[data-design=v6] .brand b{font-family:var(--v6-display);font-size:22px;letter-spacing:.01em} html[data-design=v6] .brand i{font-size:10.5px} html[data-design=v6] .kb-switch a{border-radius:999px;padding:.32em .55em;opacity:.72} html[data-design=v6] .kb-switch a:hover{background:color-mix(in srgb,var(--v6-line) 10%,transparent);opacity:1} html[data-design=v6] .kb-switch a[aria-current=page]{opacity:1;box-shadow:inset 0 -3px 0 var(--v6-accent)} html[data-design=v6] .kb-lang{border:2px solid var(--v6-line);border-radius:999px;padding:5px 10px;font-weight:700;line-height:1.2} html[data-design=v6] .kb-lang:hover{border-bottom-color:var(--v6-line);background:var(--ink-3);color:var(--paper)} html[data-design=v6] .doc-index{padding-top:clamp(28px,4vw,56px)} html[data-design=v6] .v6-hero{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,48px); align-items:center;position:relative;margin-bottom:clamp(28px,4vw,52px); } html[data-design=v6] .v6-eyebrow{ display:inline-flex;align-items:center;gap:6px;background:var(--ink-3);color:var(--paper); border:2px solid var(--v6-line);border-radius:999px;padding:4px 10px; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; } html[data-design=v6] .doc-index h1{ font-family:var(--v6-display);font-size:clamp(48px,7vw,82px);line-height:.98; letter-spacing:-.03em;margin:14px 0 14px;font-weight:400; } html[data-design=v6] .v6-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} html[data-design=v6] .v6-btn{ display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:999px; border:2px solid var(--v6-line);background:var(--ink-2);color:var(--paper); font-size:13px;font-weight:700;box-shadow:var(--v6-shadow-sm); transition:transform .14s,box-shadow .14s,background .14s; } html[data-design=v6] .v6-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 light-dark(rgba(36,27,23,.88),rgba(0,0,0,.62));color:var(--paper)} html[data-design=v6] .v6-btn.primary{background:var(--v6-accent);color:#1B1317;border-color:var(--v6-line)} html[data-design=v6] .v6-hero-art{position:relative;display:grid;place-items:center;min-height:250px} html[data-design=v6] .v6-jf{ width:clamp(160px,17vw,230px);height:auto; filter:drop-shadow(0 18px 24px color-mix(in srgb,var(--v6-accent) 30%,transparent)); } html[data-design=v6] .v6-bubble{ position:absolute;right:0;top:4%;background:var(--ink-2);border:2px solid var(--v6-line); border-radius:18px;border-bottom-left-radius:5px;padding:8px 12px;font-size:12px; font-weight:700;box-shadow:var(--v6-shadow-sm);transform:rotate(2deg); } html[data-design=v6] .v6-hero-art::before, html[data-design=v6] .v6-hero-art::after{ content:"";position:absolute;border-radius:50%;pointer-events:none; background:color-mix(in srgb,var(--v6-accent) 18%,transparent);filter:blur(1px); } html[data-design=v6] .v6-hero-art::before{width:90px;height:90px;left:4%;top:10%} html[data-design=v6] .v6-hero-art::after{width:54px;height:54px;right:10%;bottom:8%;background:color-mix(in srgb,var(--v6-accent-2) 22%,transparent)} @media (prefers-reduced-motion:no-preference){ html[data-design=v6] .v6-jf{animation:v6-float 6s ease-in-out infinite} @keyframes v6-float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}} } html[data-design=v6] .kb-ph{font-family:var(--v6-display);font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;margin-top:var(--s5)} html[data-design=v6] .kb-ph::after{content:"";display:block;width:84px;height:7px;margin-top:6px;border-radius:99px;background:var(--v6-accent-2)} html[data-design=v6] .kb-cats{grid-template-columns:repeat(4,1fr);gap:12px} html[data-design=v6] .kb-pcard{ position:relative;display:block;overflow:hidden;background:var(--ink-2); border:2px solid var(--v6-line);border-radius:var(--v6-r);padding:13px 13px 11px; box-shadow:var(--v6-shadow);transition:transform .15s,box-shadow .15s; } html[data-design=v6] .kb-pcard::after{ content:"";position:absolute;right:-20px;bottom:-26px;width:70px;height:70px;border-radius:50%; background:color-mix(in srgb,var(--pc,var(--v6-accent)) 20%,transparent);pointer-events:none; } html[data-design=v6] .kb-pcard:hover{transform:translateY(-3px);box-shadow:0 8px 0 light-dark(rgba(36,27,23,.88),rgba(0,0,0,.62))} html[data-design=v6] .kb-pico{ display:grid;place-items:center;width:30px;height:30px;border-radius:50%; background:var(--pc,var(--v6-accent));color:#1B1317;border:2px solid var(--v6-line); font-weight:800;font-size:13px;margin-bottom:8px;line-height:1; } html[data-design=v6] .kb-pname{font-family:var(--v6-display);font-size:16px;display:flex;align-items:center;gap:8px} html[data-design=v6] .kb-pname i{display:none} html[data-design=v6] .kb-pdesc{display:block;margin-top:6px;font-size:12px;line-height:1.65;color:var(--paper-2)} html[data-design=v6] .kb-cat{ margin-top:var(--s6);background:var(--ink-2);border:2px solid var(--v6-line); border-radius:var(--v6-r);padding:var(--s4);box-shadow:var(--v6-shadow); } html[data-design=v6] .kb-cat h2{font-family:var(--v6-display);font-size:22px} html[data-design=v6] .kb-list li{border-bottom:1px dashed var(--rule)} html[data-design=v6] .kb-t{font-weight:700} html[data-design=v6] .doc-article h1{ font-family:var(--v6-display);font-size:clamp(38px,5vw,58px);line-height:1.02; letter-spacing:-.02em;font-weight:400; } html[data-design=v6] .kb-lead{font-size:15px} html[data-design=v6] .kb-chip{ border:2px solid var(--v6-line);border-radius:999px;background:var(--ink-2); padding:4px 10px;box-shadow:var(--v6-shadow-sm);font-size:12px; } html[data-design=v6] .kb-tablewrap{ border:2px solid var(--v6-line);border-radius:var(--v6-r);overflow:hidden; background:var(--ink-2);box-shadow:var(--v6-shadow); } html[data-design=v6] .kb-tablewrap thead th{background:var(--ink-3);font-family:var(--mono);font-size:11px;letter-spacing:.04em} html[data-design=v6] .kb-tablewrap td{border-bottom:1px dashed var(--rule)} html[data-design=v6] .kb-tablewrap tbody tr:hover{background:var(--ink-3)} html[data-design=v6] .kb-item{ border:2px solid var(--v6-line);border-radius:14px;background:var(--ink-2); box-shadow:var(--v6-shadow-sm);padding:10px 12px; } html[data-design=v6] .kb-play{ background:var(--v6-accent);color:#1B1317;border:2px solid var(--v6-line); box-shadow:var(--v6-shadow-sm); } html[data-design=v6] .kb-play:hover{filter:brightness(1.04)} html[data-design=v6] .kb-why{ border-left:5px solid var(--v6-accent);background:var(--ink-3); border-radius:0 12px 12px 0;padding:10px 12px; } html[data-design=v6] .kb-note{border-left-color:var(--v6-accent)} html[data-design=v6] .kb-title{font-weight:700} html[data-design=v6] .pbar{ border-top:2px solid var(--v6-line);background:var(--ink-2); box-shadow:0 -14px 34px -26px color-mix(in srgb,var(--v6-accent) 55%,transparent); } html[data-design=v6] .kb-tabs{background:var(--ink-2);border-top:2px solid var(--v6-line)} html[data-design=v6] .kb-tabs > a[aria-current=page]{color:var(--paper);font-weight:700;box-shadow:inset 0 3px 0 var(--v6-accent)} html[data-design=v6] .kb-tabs-sheet{background:var(--ink-2);border:2px solid var(--v6-line);border-radius:16px} @media (max-width:900px){ html[data-design=v6] .kb-cats{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ html[data-design=v6] .v6-hero{grid-template-columns:1fr;gap:10px} html[data-design=v6] .v6-hero-art{min-height:180px;order:-1} html[data-design=v6] .v6-jf{width:150px} html[data-design=v6] .v6-bubble{right:6%;top:0} html[data-design=v6] .doc-index h1{font-size:clamp(42px,13vw,58px)} html[data-design=v6] .kb-cats{grid-template-columns:1fr} html[data-design=v6] .kb-cat{padding:var(--s3)} html[data-design=v6] .doc-article h1{font-size:clamp(36px,10vw,46px)} html[data-design=v6] .kb-chip{font-size:11.5px} } html[data-design=v6] .doc-index .v3-hero h1{ font-family:var(--serif); font-size:clamp(26px, 3.4vw, 36px); line-height:1.18; letter-spacing:0; margin:.5rem 0 .7rem } html[data-design=v6]{ --ink:light-dark(#FCFBF7,#111319); --ink-2:light-dark(#FFFFFF,#171A22); --ink-3:light-dark(#F1F3F8,#1D212B); --ink-4:light-dark(#E7EAF2,#242935); --paper:light-dark(#12141A,#F2F3F7); --paper-2:light-dark(#4A505F,#B9BECE); --paper-3:light-dark(#6B7286,#8A90A0); --rule:light-dark(#E4E6EC,#262B37); --rule-2:light-dark(#EFF1F6,#1B1F29); --accent:light-dark(#1F4BFF,#6E8BFF); --accent-h:light-dark(#173BD6,#8AA1FF); --accent-soft:light-dark(#EAF0FF,#1C2540); --jade:light-dark(#0E8C7E,#6FF2D6); --gold:light-dark(#97C93D,#C8F169); --r-1:10px; --r-2:14px; --r-3:18px; } html[data-design=v6] body > header{ background:color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--rule) } html[data-design=v6] .hbar{ height:60px } html[data-design=v6] .brand b{ font-family:var(--v6-display); font-size:21px; font-weight:400; letter-spacing:-.01em } html[data-design=v6] .brand i{ color:var(--paper-3); font-size:10.5px; letter-spacing:.08em } html[data-design=v6] .brand svg{ width:24px; height:24px } html[data-design=v6] .kb-switch{ display:flex; align-items:center; gap:2px; margin-left:auto; padding:4px; border-radius:999px; background:var(--ink-3) } html[data-design=v6] .kb-switch a{ padding:6px 10px; border-radius:999px; font-size:12.5px; line-height:1; color:var(--paper-2); font-weight:500 } html[data-design=v6] .kb-switch a:hover{ background:var(--ink-2); color:var(--paper) } html[data-design=v6] .kb-switch a[aria-current="page"]{ background:var(--accent); color:#fff; font-weight:650 } html[data-design=v6] .kb-switch-sep{ display:none } html[data-design=v6] .iconbtn{ width:36px; height:36px; border-radius:10px; border:1px solid var(--rule); background:var(--ink-2); color:var(--paper-2) } html[data-design=v6] .iconbtn:hover{ border-color:var(--accent); color:var(--accent) } html[data-design=v6] .v6-btn{ min-height:42px; padding:0 18px; border-radius:12px; font-size:14px; font-weight:550; border:1px solid var(--rule); background:var(--ink-2); color:var(--paper); box-shadow:none; transform:none } html[data-design=v6] .v6-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--ink-2) } html[data-design=v6] .v6-btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:650 } html[data-design=v6] .v6-btn.primary:hover{ background:var(--accent-h); border-color:var(--accent-h); color:#fff } html[data-design=v6] .v3-hero h1, html[data-design=v6] .doc-index .v3-hero h1{ font-family:var(--v6-display); font-weight:400; letter-spacing:-.012em; font-size:clamp(34px, 4.4vw, 48px); line-height:1.08; max-width:20ch } html[data-design=v6] .v3-eyebrow{ color:var(--accent); letter-spacing:.14em } html[data-design=v6] .v3-hero .v3-lead{ color:var(--paper-2); font-size:16px } html[data-design=v6] .v3-card, html[data-design=v6] .v3-libcard{ background:var(--ink-2); border:1px solid var(--rule); border-radius:14px; box-shadow:none; transform:none } html[data-design=v6] .v3-card:hover, html[data-design=v6] .v3-libcard:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 28px color-mix(in srgb, var(--accent) 10%, transparent) } html[data-design=v6] .v3-card .v3-ico{ width:36px; height:36px; border:0; border-radius:10px; background:var(--accent-soft); color:var(--accent); font-family:var(--sans); font-weight:700 } html[data-design=v6] .v3-card:nth-child(3n+2) .v3-ico{ background:color-mix(in srgb, var(--gold) 22%, var(--ink-2)); color:var(--jade) } html[data-design=v6] .v3-card:nth-child(3n) .v3-ico{ background:color-mix(in srgb, #E4572E 12%, var(--ink-2)); color:#C4432B } html[data-design=v6] .v3-card em, html[data-design=v6] .v3-step span, html[data-design=v6] .v3-libcard span{ color:var(--paper-2) } html[data-design=v6] .v3-card .v3-go{ color:var(--accent); font-weight:600 } html[data-design=v6] .v3-step{ background:var(--ink-2); border:1px solid var(--rule); border-radius:12px; box-shadow:none } html[data-design=v6] .v3-step .v3-num{ color:var(--accent); font-family:var(--v6-display) } html[data-design=v6] .v3-chip{ border:1px solid var(--rule); border-radius:999px; background:var(--ink-3); color:var(--paper-2); padding:.55rem .9rem } html[data-design=v6] .v3-chip:hover{ border-color:var(--accent); color:var(--accent); background:var(--ink-2) } html[data-design=v6] .v3-quiz-cta a{ border:1px solid var(--rule); border-radius:14px; background:var(--accent-soft) } html[data-design=v6] .v3-quiz-cta a:hover{ border-color:var(--accent) } html[data-design=v6] .v3-libcard .v3-num{ font-family:var(--v6-display); color:var(--paper) } html[data-design=v6] .kb-head h1, html[data-design=v6] .doc-article h1{ font-family:var(--v6-display); font-weight:400; letter-spacing:-.01em; line-height:1.1 } html[data-design=v6] .kb-lead{ color:var(--paper-2) } html[data-design=v6] .kb-dossier{ background:var(--ink-3); border:1px solid var(--rule); border-radius:12px; padding:14px 16px } html[data-design=v6] .kb-dossier h2{ color:var(--paper-3); letter-spacing:.12em } html[data-design=v6] .kb-dossier dt{ color:var(--paper-3) } html[data-design=v6] .kb-dossier dd{ color:var(--paper) } html[data-design=v6] .kb-chip{ border:1px solid var(--rule); border-radius:999px; background:var(--ink-3); color:var(--paper-2) } html[data-design=v6] .kb-chip:hover{ border-color:var(--accent); color:var(--accent) } html[data-design=v6] .kb-play, html[data-design=v6] .player .play{ background:var(--paper); color:var(--ink) } html[data-design=v6] .kb-sources{ border-top:1px solid var(--rule) } html[data-design=v6] .kb-pcard{ background:var(--ink-2); border:1px solid var(--rule); border-radius:14px; box-shadow:none } html[data-design=v6] .kb-pcard:hover{ border-color:var(--accent); background:var(--ink-2) } html[data-design=v6] .kb-pico{ background:var(--accent-soft); color:var(--accent) } html[data-design=v6] body > footer.foot{ margin-top:var(--s7); background:var(--ink-3); border-top:1px solid var(--rule); padding:22px 0 calc(22px + var(--sa-b)); color:var(--paper-2) } html[data-design=v6] .foot .footline a{ color:var(--paper-2); font-size:12.5px } html[data-design=v6] .foot .footline a:hover{ color:var(--accent) } html[data-design=v6] .foot .fnote, html[data-design=v6] .fnote{ color:var(--paper-3); font-size:11.5px; line-height:1.85 } html[data-design=v6] .fbar b{ font-family:var(--v6-display); font-weight:400 } @media (prefers-reduced-motion:reduce){ html[data-design=v6] .v3-card:hover, html[data-design=v6] .v3-libcard:hover{ transform:none } } html[data-design=v6] .kb-lang{ height:36px; padding:0 10px; border:1px solid var(--rule); border-radius:10px; background:var(--ink-2); color:var(--paper-2); display:inline-flex; align-items:center } @media (max-width:1040px){ html[data-design=v6] .hbar .kb-switch{ display:none } }