/* Design guide layout. Product buttons and live specimens keep canonical Source styles. */
:root{--g-bg:#06070b;--g-panel:#0b0f17;--g-panel-2:#0f141e;--g-line:rgba(255,255,255,.08);--g-line-2:rgba(255,255,255,.14);--g-text:#f3f5f8;--g-soft:#c3cbd7;--g-muted:#8e9aab;--g-blue:#a5dbff;--g-side:236px;--g-max:1040px}
html{scroll-padding-top:24px}
body.guide-page{margin:0;background:var(--g-bg);color:var(--g-text);font-family:var(--body);font-size:16px;line-height:1.7;letter-spacing:0;-webkit-font-smoothing:antialiased}
.guide-page *{box-sizing:border-box}.guide-page [hidden]{display:none!important}
.guide-page :where(h1,h2,h3,p,ol,ul,figure){margin:0}.guide-page :where(ol,ul){padding:0;list-style:none}
.guide-page :where(h1,h2,h3){font-family:var(--display);letter-spacing:0}
.guide-page a{color:inherit;text-decoration:none}
.guide-page :where(button:not(.btn),select){font:inherit}
.guide-page :where(a,button,select):focus-visible{outline:2px solid var(--g-blue);outline-offset:3px;border-radius:4px}
.guide-page code{font-family:"SF Pro Text","SF Pro",var(--body);font-size:13px;color:var(--g-soft);font-variant-numeric:tabular-nums}
.g-skip{position:fixed;left:16px;top:-80px;z-index:120;background:#fff;color:#06070b!important;padding:8px 16px;border-radius:6px}.g-skip:focus{top:12px}
.g-brand{display:inline-flex}.g-brand img{display:block;width:132px;height:auto}

/* Sidebar */
.g-sidebar{position:fixed;inset:0 auto 0 0;z-index:90;width:var(--g-side);padding:32px 24px;border-right:1px solid var(--g-line);background:#080a10;display:flex;flex-direction:column;overflow-y:auto}
.g-sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.g-sidebar-title{margin:32px 0 20px!important;font-size:13px;font-weight:600;color:var(--g-muted);letter-spacing:.04em}
.g-sidebar nav{display:grid;gap:2px}
.g-nav-group{margin:18px 0 6px!important;font-size:12px;color:#5f6b7c;letter-spacing:.06em}.g-nav-group:first-child{margin-top:0!important}
.g-sidebar nav a{display:flex;align-items:center;gap:12px;height:38px;padding:0 12px;margin-inline:-12px;border-radius:8px;font-size:15px;color:var(--g-soft);transition:background .15s,color .15s}
.g-sidebar nav a>b{width:18px;font-family:var(--display);font-size:12px;font-weight:500;color:#5f6b7c;font-variant-numeric:tabular-nums}
.g-sidebar nav a:hover{background:rgba(255,255,255,.04);color:#fff}
.g-sidebar nav a[aria-current]{background:rgba(165,219,255,.08);color:#fff;font-weight:600}.g-sidebar nav a[aria-current]>b{color:var(--g-blue)}
.g-sidebar-note{margin-top:auto!important;padding-top:32px;font-size:12px;line-height:1.7;color:#5f6b7c}
.g-header,.g-nav-close{display:none}
.g-nav-backdrop{position:fixed;inset:0;z-index:85;border:0;background:rgba(0,0,0,.6)}

/* Main */
#guide-main{margin-left:var(--g-side);padding:0 64px 32px}
.g-masthead{max-width:var(--g-max);margin:auto;height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--g-line);font-size:13px;color:var(--g-muted)}
.g-masthead>span:last-child{color:var(--g-soft)}
.g-chapter{max-width:var(--g-max);margin:auto;padding-top:56px}
.g-head{max-width:720px;margin-bottom:40px}
.g-kicker{font-size:13px;color:var(--g-blue);font-weight:600;margin-bottom:12px!important;font-variant-numeric:tabular-nums}
.g-head h1{font-size:36px;line-height:1.3;font-weight:900}.g-head h1:focus{outline:none}
.g-lead{margin-top:14px!important;font-size:18px;line-height:1.65;color:var(--g-soft)}
.g-sub{font-size:18px;line-height:1.4;font-weight:800;margin:48px 0 16px}
.g-subbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:48px 0 16px}.g-subbar .g-sub{margin:0}
.g-hint{font-size:14px;color:var(--g-muted);margin:-8px 0 16px!important}
.g-note{margin-top:24px!important;font-size:15px;color:var(--g-soft);padding-left:16px;border-left:2px solid rgba(165,219,255,.45)}
.g-note b{color:#fff}

/* Steps */
.g-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:step;padding:24px 0;border-block:1px solid var(--g-line)}
.g-steps li{counter-increment:step;display:grid;gap:6px;align-content:start}
.g-steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--display);font-size:12px;color:var(--g-blue);font-variant-numeric:tabular-nums}
.g-steps b{font-size:16px;font-weight:700}.g-steps span{font-size:14px;line-height:1.65;color:var(--g-muted)}
.g-steps-tight{margin-top:40px}
.g-flow{display:flex;flex-wrap:wrap;gap:8px 6px;margin:4px 0 14px;padding:0;list-style:none;counter-reset:flow}
.g-flow li{counter-increment:flow;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border:1px solid var(--g-line-2);border-radius:999px;font-size:14px;color:#fff;background:rgba(255,255,255,.02)}
.g-flow li::before{content:counter(flow,decimal-leading-zero);font-family:var(--display);font-size:11px;color:var(--g-blue);font-variant-numeric:tabular-nums}
.guide-page .g-link{color:#a5dbff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(165,219,255,.45);transition:color .15s,text-decoration-color .15s}
.guide-page .g-link:hover{color:#fff;text-decoration-color:#fff}
.guide-page .g-link:focus-visible{outline:2px solid #a5dbff;outline-offset:2px;border-radius:2px}
.guide-page .g-flow .g-link{color:#fff;text-decoration:none}
.g-flow li:has(.g-link:hover){border-color:rgba(165,219,255,.6)}
.g-spec-where .g-row{grid-template-columns:150px minmax(0,1.3fr) minmax(0,1fr)}
.g-steps:has(li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}

/* Spec tables */
.g-spec,.g-type,.g-btn-table{border-top:1px solid var(--g-line-2)}
.g-row{display:grid;grid-template-columns:180px 200px minmax(0,1fr);gap:24px;align-items:center;min-height:52px;padding:12px 0;border-bottom:1px solid var(--g-line);font-size:15px}
.g-row>span{color:var(--g-soft)}.g-row>b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.g-row small{display:block;font-size:12px;color:var(--g-muted);margin-top:2px}
.g-row-head{min-height:40px;padding:10px 0;font-size:12px}.g-row-head>span{color:var(--g-muted)!important}
.g-spec-2 .g-row{grid-template-columns:minmax(0,1fr) auto}
.g-type .g-row{grid-template-columns:150px 96px 96px minmax(0,1fr);min-height:84px}
.g-sample{min-width:0;font-family:var(--display);color:#fff;overflow-wrap:anywhere}
.g-sample.g-blue,.g-st-sub{color:var(--g-blue)}
.g-sample.g-dim,.g-st-body{font-family:var(--body);color:rgba(255,255,255,.7)}
.g-grad{background:linear-gradient(166deg,#fff 41%,rgba(255,255,255,.2) 104%);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-type-head{display:none}

/* Fonts */
.g-fonts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--g-line)}
.g-fonts>div{display:grid;gap:4px;padding:20px 24px 20px 0}.g-fonts>div+div{padding-left:24px;border-left:1px solid var(--g-line)}
.g-fonts span{font-size:12px;color:var(--g-muted)}.g-fonts b{font-size:22px;font-weight:800}.g-fonts small{font-size:13px;color:var(--g-muted)}
.g-latin{font-family:var(--display)}

/* Color */
.g-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--g-line);border:1px solid var(--g-line);border-radius:12px;overflow:hidden}
.g-swatches>div{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto auto;column-gap:16px;row-gap:2px;padding:20px;background:var(--g-bg)}
.g-swatches i{grid-row:1/4;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.g-swatches b{font-size:15px;font-weight:700}.g-swatches span{font-size:13px;color:var(--g-muted)}
.g-line-swatch{background:linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.35) 47% 53%,transparent 53%)}

/* Buttons */
.g-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--g-line)}
.g-roles>div{display:grid;justify-items:start;gap:6px;padding:28px 24px 24px 0}.g-roles>div+div{padding-left:24px;border-left:1px solid var(--g-line)}
.g-roles .btn{margin-bottom:12px}.g-roles b{font-size:15px}.g-roles span{font-size:13px;color:var(--g-muted)}
.g-btn-table .g-row{grid-template-columns:minmax(0,1fr) 88px 88px minmax(200px,1fr);min-height:76px}
.g-size small{display:inline;font-size:12px;color:var(--g-muted);margin-left:2px}
.g-btn-table .g-fixed-slot{width:76px;min-width:76px}
.g-select{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--g-muted);white-space:nowrap}
.g-select select{padding:7px 32px 7px 12px;background:var(--g-panel);border:1px solid var(--g-line-2);border-radius:8px;color:#fff;font-size:14px}
.g-anatomy{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;margin-top:32px;padding:28px 32px;background:var(--g-panel);border-radius:12px}
.g-anatomy-demo{display:flex;align-items:center;gap:12px}.g-anatomy-demo>span{font-size:12px;color:var(--g-blue);font-variant-numeric:tabular-nums}
.g-anatomy ul{display:grid;gap:6px;font-size:14px;color:var(--g-soft)}.g-anatomy li::before{content:"·";color:var(--g-blue);margin-right:8px}

/* Switch & tools */
.g-switch{display:inline-flex;gap:2px;padding:3px;border-radius:8px;background:rgba(255,255,255,.05);flex-shrink:0}
.g-switch button{min-height:30px;padding:4px 14px;border:0;border-radius:6px;background:none;color:var(--g-muted);font-size:13px!important;cursor:pointer}
.g-switch button[aria-pressed=true]{background:rgba(255,255,255,.1);color:#fff}
.g-tool{min-height:30px;padding:4px 12px;border:1px solid var(--g-line-2);border-radius:6px;background:none;color:var(--g-soft);font-size:13px!important;cursor:pointer;white-space:nowrap}
.g-tool[aria-pressed=true]{color:var(--g-blue);border-color:rgba(165,219,255,.4)}
.g-tools{display:flex;align-items:center;gap:8px}

/* Diagram */
.g-diagram{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:24px;margin-top:40px}.g-diagram>*{min-width:0}.g-content,.g-col{min-width:0}
.g-canvas,.g-phone{position:relative;border:1px dashed rgba(255,255,255,.18);border-radius:10px;background:linear-gradient(180deg,#0b1220,#06070b)}
.g-canvas{aspect-ratio:1920/700;padding:0 16.67%}
.g-content{position:relative;height:100%;border-inline:1px solid rgba(165,219,255,.55);background:rgba(165,219,255,.04);display:grid;grid-template-columns:44% 1fr;gap:6%;align-items:center;padding:0 1%}
.g-col{display:grid;gap:10px}.g-col i,.g-phone>i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.75)}.g-col i:first-child{height:14px;width:80%}.g-col i.short,.g-phone>i.short{width:60%;background:rgba(255,255,255,.35)}.g-col i.btns{width:46%;height:16px;border-radius:8px;background:#ff0033;margin-top:8px}
.g-media,.g-phone-art{display:grid;place-items:center;height:70%;border-radius:8px;background:radial-gradient(circle at 50% 50%,rgba(19,141,255,.35),transparent 65%);font-size:12px;color:var(--g-soft)}
.g-tag{position:absolute;left:8px;top:8px;font-size:11px;color:var(--g-blue);font-variant-numeric:tabular-nums}.g-tag-top{top:-22px;left:0;color:var(--g-muted)}
.g-side{position:absolute;bottom:8px;font-size:11px;color:var(--g-muted)}.g-side-l{left:8px}.g-side-r{right:8px}
.g-phone{aspect-ratio:390/700;padding:12px 10% 0;display:grid;align-content:start;gap:8px}.g-phone-art{height:auto;aspect-ratio:1;margin-bottom:8px}.g-phone>i{height:6px;justify-self:center;width:80%}.g-phone>i:first-of-type{height:10px;width:70%}

/* Banner */
.g-banner-spec{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.g-stack{position:relative;padding:40px 40px 40px 72px;border-radius:12px;background:radial-gradient(ellipse at 90% 50%,rgba(19,141,255,.18),transparent 60%),var(--g-panel);overflow:hidden}
.g-stack>p{margin:0!important;position:relative}
.g-stack>em{position:relative;display:block;height:var(--g);margin-left:-32px;background:rgba(165,219,255,.16);border-left:2px solid var(--g-blue);font-style:normal}
.g-stack>em>span{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);font-size:11px;line-height:1;color:var(--g-blue);font-variant-numeric:tabular-nums}
.g-st-eyebrow{font:860 24px/33.6px var(--display)}.g-st-title{font:900 40px/56px var(--display)}.g-st-sub{font:900 24px/33.6px var(--display)}
.g-st-body{font-size:18px;line-height:25.2px;max-width:542px}
.g-st-btns{position:relative;display:flex;gap:16px;flex-wrap:wrap}
.g-em-x{position:absolute;top:0;bottom:0;left:var(--btn-w,185px);width:16px;background:rgba(165,219,255,.16);font-style:normal}.g-em-x>span{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:11px;color:var(--g-blue)}
.g-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--g-line-2)}
.g-qa>div{padding:20px 0;border-bottom:1px solid var(--g-line)}.g-qa b{font-size:15px}.g-qa p{margin-top:6px!important;font-size:14px;line-height:1.7;color:var(--g-soft)}.g-qa strong{color:#fff}

/* Live demos */
.g-demo{margin-top:40px;border:1px solid var(--g-line-2);border-radius:12px;overflow:hidden;background:var(--g-bg)}
.g-demo-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--g-line);font-size:14px}.g-demo-bar>b{font-weight:600}
.g-demo-foot{padding:10px 16px;border-top:1px solid var(--g-line);font-size:13px;color:var(--g-muted)}
.g-live-stage{display:flex;justify-content:center;background:#0a0d14}
.g-live-stage iframe{display:block;width:100%;height:760px;min-width:0;max-width:100%;border:0;background:var(--g-bg);flex-shrink:1}
.g-demo.is-phone .g-live-stage{padding-block:24px}.g-demo.is-phone iframe{width:390px;border-inline:1px solid var(--g-line-2)}

/* Components */
.g-component-picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.g-component-picker button{min-height:36px;padding:6px 16px;border:1px solid var(--g-line-2);border-radius:999px;background:none;color:var(--g-soft);font-size:14px!important;cursor:pointer}
.g-component-picker button[aria-pressed=true]{background:#fff;border-color:#fff;color:#06070b;font-weight:600}
.g-component-instruction h2{font-size:18px;font-weight:800}.g-component-instruction p{margin-top:4px!important;font-size:15px;color:var(--g-muted)}
.g-component-instruction+.g-demo{margin-top:20px}
.g-reuse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;border-block:1px solid var(--g-line)}
.g-reuse>div{display:grid;gap:4px;padding:20px 24px 20px 0}.g-reuse>div+div{padding-left:24px;border-left:1px solid var(--g-line)}.g-reuse b{font-size:15px}.g-reuse span{font-size:14px;color:var(--g-muted)}

/* Imagery */
.g-art{position:relative;margin-bottom:40px!important;border-radius:12px;overflow:hidden;background:var(--g-bg)}
.g-art-frame{position:relative}.g-art-frame>img{display:block;width:100%;height:auto}
.g-art-zone,.g-art-fade{position:absolute;pointer-events:none;transition:opacity .2s}
.g-art-zone{border:1px dashed rgba(165,219,255,.75);border-radius:8px;display:flex;align-items:flex-start;padding:8px}
.g-art-zone span,.g-art-fade span{font-size:12px;color:#fff;background:rgba(6,7,11,.75);padding:2px 8px;border-radius:4px}
.g-art-text{left:17%;top:18%;width:28%;height:52%}.g-art-subject{left:50%;top:6%;width:34%;height:82%;border-color:rgba(255,255,255,.6)}
.g-art-fade{inset:0;box-shadow:inset 0 0 0 2px rgba(255,204,214,.0);display:flex;align-items:flex-end;justify-content:center;padding:12px;background:linear-gradient(90deg,rgba(165,219,255,.14),transparent 7%,transparent 93%,rgba(165,219,255,.14)),linear-gradient(0deg,rgba(165,219,255,.14),transparent 12%)}
.g-art.is-plain .g-art-zone,.g-art.is-plain .g-art-fade{opacity:0}
.g-art figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-top:1px solid var(--g-line);font-size:13px;color:var(--g-muted)}
.g-pair{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:40px}
.g-pair figure{display:grid;gap:12px;align-content:start}.g-pair img{display:block;width:100%;height:auto;border-radius:12px;background:var(--g-bg);border:1px solid var(--g-line)}.g-pair figcaption{font-size:13px;color:var(--g-muted)}
.g-dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.g-dodont>div{padding:20px 24px;border-radius:12px;background:var(--g-panel)}.g-dodont b{font-size:15px}
.g-dodont>div:first-child b{color:var(--g-blue)}.g-dodont>div:last-child b{color:#ff8fa3}
.g-dodont ul{display:grid;gap:6px;margin-top:10px;font-size:14px;color:var(--g-soft)}.g-dodont li::before{content:"·";margin-right:8px;color:var(--g-muted)}
.g-icons{margin-top:40px;display:grid;gap:12px}.g-icons img{display:block;width:100%;height:auto;border-radius:12px;background:var(--g-panel);border:1px solid var(--g-line)}.g-icons figcaption{font-size:13px;color:var(--g-muted)}

/* Pager, footer */
.g-pager{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--g-line);font-size:15px}
.g-pager a{color:var(--g-soft)}.g-pager a:hover{color:#fff}
.g-footer{margin-left:var(--g-side);padding:24px 64px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#5f6b7c;border-top:1px solid var(--g-line)}
.g-toast{position:fixed;z-index:100;bottom:24px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;max-width:calc(100% - 32px);padding:10px 18px;border-radius:8px;background:#151c28;border:1px solid var(--g-line-2);font-size:14px;transition:opacity .15s,transform .15s}.g-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.g-noscript{margin:24px 24px 24px calc(var(--g-side) + 24px)}

/* Responsive */
@media(max-width:1200px){#guide-main{padding-inline:40px}.g-footer{padding-inline:40px}.g-banner-spec{grid-template-columns:1fr}.g-row{grid-template-columns:150px 170px minmax(0,1fr)}.g-type .g-row{grid-template-columns:120px 84px 84px minmax(0,1fr)}}
@media(max-width:960px){
 .g-steps,.g-steps:has(li:nth-child(4)),.g-fonts,.g-roles,.g-reuse{grid-template-columns:1fr;gap:20px}
 .g-fonts>div+div,.g-roles>div+div,.g-reuse>div+div{padding-left:0;border-left:0;border-top:1px solid var(--g-line)}
 .g-fonts>div,.g-roles>div,.g-reuse>div{padding:16px 0}.g-fonts,.g-roles,.g-reuse{gap:0}
 .g-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
 .g-type .g-row{grid-template-columns:minmax(0,1fr) 84px 84px}.g-type .g-row>.g-sample,.g-type .g-row>.g-sample-btn{grid-column:1/-1}.g-type .g-row-head>span:last-child{display:none}
 .g-btn-table .g-row{grid-template-columns:minmax(0,1fr) 64px 64px}.g-btn-table .g-row>div{grid-column:1/-1}.g-btn-table .g-row-head>span:last-child{display:none}
 .g-qa{grid-template-columns:1fr}.g-anatomy{grid-template-columns:1fr;gap:20px}.g-diagram{grid-template-columns:minmax(0,1fr) 110px}
}
@media(max-width:800px){
 .g-header{display:flex;position:sticky;top:0;z-index:80;height:60px;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(6,7,11,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--g-line)}
 .g-header .g-brand img{width:120px}
 .g-sidebar{width:280px;max-width:86vw;visibility:hidden;transform:translateX(-100%);transition:transform .18s;box-shadow:24px 0 60px rgba(0,0,0,.5)}
 .g-sidebar.is-open{visibility:visible;transform:none}
 .g-nav-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--g-line-2);border-radius:50%;background:none;color:#fff;font-size:22px!important;line-height:1;cursor:pointer}
 body.g-nav-open{overflow:hidden}
 #guide-main{margin-left:0;padding:0 20px 24px}.g-footer{margin-left:0;padding:20px;flex-direction:column}
 .g-masthead{height:48px}.g-chapter{padding-top:32px}.g-head{margin-bottom:28px}.g-head h1{font-size:28px}.g-lead{font-size:16px}
 .g-sub,.g-subbar{margin-top:40px}.g-subbar{flex-wrap:wrap}
 .g-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;font-size:14px}.g-row>span:nth-child(3){grid-column:1/-1;font-size:13px;color:var(--g-muted)}.g-row-head>span:nth-child(3){display:none}
 .g-spec-stack .g-row{grid-template-columns:1fr}.g-spec-stack .g-row-head{display:none}.g-spec-stack .g-row>span:first-child{font-size:12px;color:var(--g-muted)}
 .g-spec-where .g-row{grid-template-columns:1fr}.g-spec-where .g-row-head{display:none}.g-spec-where .g-row>span:first-child{font-size:12px;color:var(--g-muted)}
 .g-spec-dual .g-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px}.g-spec-dual .g-row-head{display:none}.g-spec-dual .g-row>span:first-child{grid-column:1/-1}
 .g-spec-dual .g-row>b{grid-column:auto!important}.g-spec-dual .g-row>b::before{display:block;font-size:11px;font-weight:400;color:var(--g-muted);margin-bottom:2px}.g-spec-dual .g-row>b:nth-child(2)::before{content:'电脑'}.g-spec-dual .g-row>b:nth-child(3)::before{content:'手机'}
 .g-type .g-row{grid-template-columns:minmax(0,1fr) 64px 64px}.g-type .g-row>span:nth-child(3){grid-column:auto}.g-type .g-row-head>span:nth-child(3){display:block}
 .g-spec:not(.g-spec-2) .g-row>b:nth-child(3){grid-column:auto}
 .g-swatches{grid-template-columns:1fr}.g-diagram{grid-template-columns:1fr}.g-phone{display:none}
 .g-stack{padding:28px 20px 28px 56px}.g-stack>em{margin-left:-24px}.g-st-title{font-size:30px;line-height:42px}.g-st-eyebrow,.g-st-sub{font-size:20px;line-height:28px}.g-st-body{font-size:16px;line-height:24px}
 .g-em-x{display:none}.g-st-btns{gap:12px}
 .g-pair,.g-dodont{grid-template-columns:1fr}.g-anatomy{padding:24px 20px}
 .g-demo-bar{flex-wrap:wrap}.g-demo.is-phone .g-live-stage{padding:0}
 .g-art-zone span,.g-art-fade span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.g-sidebar,.g-toast,.g-art-zone,.g-art-fade{transition:none}}
@media print{.g-sidebar,.g-header,.g-pager,.g-tools,.g-switch,.g-toast{display:none!important}#guide-main,.g-footer{margin-left:0}.guide-page [data-chapter][hidden]{display:block!important}}