:root { color-scheme:light; --ink:#213150; --muted:#53657c; --accent:#147587; --line:#dce4ee; --canvas:#f5f7fb; }
* { box-sizing:border-box; } body { margin:0; font:15px/1.8 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink); background:white; } a { color:var(--accent); text-underline-offset:4px; } a:hover { text-decoration:underline; } :focus-visible { outline:2px solid var(--accent); outline-offset:4px; } .skip { position:fixed; top:-100px; padding:12px 20px; z-index:100; background:white; } .skip:focus { top:10px; }
.guide-header { position:sticky; top:var(--ilygo-env-offset,0px); z-index:10; min-height:80px; display:flex; gap:32px; align-items:center; padding:16px 36px; border-bottom:1px solid var(--line); background:rgb(255 255 255 / .96); } .guide-header > a { text-decoration:none; font-size:13px; } .brand { display:flex; gap:10px; align-items:center; font-size:18px !important; font-weight:650; color:var(--ink); margin-right:auto; } .brand span { color:var(--muted); font-weight:400; } .button { display:inline-block; background:var(--ink); color:white; padding:10px 18px; border-radius:8px; text-decoration:none; }
.guide-shell { display:grid; grid-template-columns:250px minmax(0,1fr); max-width:1320px; margin:auto; } .guide-shell > aside { position:sticky; top:calc(80px + var(--ilygo-env-offset,0px)); height:calc(100dvh - 80px - var(--ilygo-env-offset,0px)); padding:36px 24px; border-right:1px solid var(--line); overflow:auto; } summary { font-size:11px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; margin-bottom:18px; color:var(--muted); cursor:pointer; } #guide-nav { display:flex; flex-direction:column; gap:5px; } #guide-nav a { display:block; text-decoration:none; font-size:13px; color:var(--muted); padding:9px 12px; border-radius:8px; } #guide-nav a[aria-current=page] { background:#e4f4f7; color:var(--accent); font-weight:600; } #guide-nav a:hover { background:var(--canvas); } .aside-note { font-size:12px; color:var(--muted); padding:24px 12px 0; border-top:1px solid var(--line); margin-top:28px; }
main { max-width:980px; padding:36px 52px 80px; min-width:0; } .breadcrumb { font-size:12px; color:var(--muted); margin-bottom:36px; display:flex; gap:10px; } h1 { font-size:40px; line-height:1.15; letter-spacing:-.045em; font-weight:650; margin:12px 0 20px; } h2 { font-size:24px; letter-spacing:-.03em; line-height:1.3; margin:44px 0 16px; } h3 { font-size:17px; } .lead { font-size:18px; color:var(--muted); line-height:1.7; margin:0 0 24px; } .role,.kicker { font-size:11px; font-weight:650; color:var(--accent); } .role { display:inline-block; padding:4px 12px; border-radius:99px; background:#e4f4f7; } .kicker { text-transform:uppercase; letter-spacing:.12em; } .note { background:var(--canvas); border:1px solid var(--line); border-radius:10px; padding:16px 20px; font-size:13px; margin:24px 0; } .warning { border-left:3px solid #bd773c; background:#fff9f1; } .steps { list-style:none; padding:0; counter-reset:step; } .steps li { position:relative; padding:0 0 22px 44px; counter-increment:step; } .steps li::before { content:counter(step); position:absolute; left:0; top:1px; background:#e4f4f7; color:var(--accent); width:28px; height:28px; border-radius:50%; text-align:center; font-size:12px; font-weight:650; } .steps strong { display:block; } .steps span { color:var(--muted); } .cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:28px 0; } .cards a { border:1px solid var(--line); border-radius:12px; padding:24px; text-decoration:none; color:var(--ink); } .cards a:hover { border-color:var(--accent); } .cards h2 { font-size:20px; margin:8px 0; } .cards p { font-size:13px; color:var(--muted); } figure { margin:28px 0; } .screenshot { display:block; padding:0; background:transparent; border:0; width:100%; cursor:zoom-in; } .screenshot img { width:100%; height:auto; border:1px solid var(--line); border-radius:12px; display:block; } figcaption { font-size:12px; color:var(--muted); margin-top:10px; } .next { border-top:1px solid var(--line); padding-top:24px; margin-top:48px; display:flex; justify-content:space-between; } footer { padding:24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; } dialog { border:0; padding:24px; width:min(1500px,96vw); max-height:96vh; background:white; border-radius:12px; } dialog::backdrop { background:rgb(15 24 41 / .8); } dialog img { display:block; width:100%; } #zoom-close { display:block; margin:0 0 16px auto; min-height:40px; padding:8px 16px; background:var(--ink); color:white; border:0; border-radius:8px; cursor:pointer; }
@media(max-width:800px) { .guide-header { padding:14px 20px; gap:16px; flex-wrap:wrap; } .guide-header > a:not(.brand):not(.button) { display:none; } .brand { font-size:15px !important; } .guide-shell { display:block; } .guide-shell > aside { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:20px; } .guide-shell > aside details:not([open]) summary { margin:0; } .aside-note { display:none; } main { padding:28px 22px 60px; } h1 { font-size:32px; } .cards { grid-template-columns:1fr; } .breadcrumb { margin-bottom:24px; } }