:root { --ink:#17212b; --muted:#687581; --paper:#f5f7f4; --panel:#fff; --line:#dfe5e1; --navy:#19364a; --teal:#087f78; --teal-soft:#dff2ed; --orange:#c7602d; --blue:#315d78; --gold:#9a741d; --green:#227654; --red:#9b4d48; --purple:#76538f; --shadow:0 18px 48px rgba(20,43,54,.08); font-family:"Aptos","Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:radial-gradient(circle at 88% -8%,#e4f0ec 0,transparent 31%),var(--paper); } button,input { font:inherit; } button { cursor:pointer; }
.shell { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:28px 17px; color:#edf5f3; background:var(--navy); }.brand { display:flex; gap:11px; align-items:center; padding:0 9px 38px; color:inherit; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--navy); background:#d6eee7; font:800 20px Georgia,serif; }.brand strong,.brand small { display:block; }.brand strong { font:700 18px Georgia,serif; }.brand small { margin-top:3px; color:#a9c2c5; font-size:11px; }.nav-item { display:flex; justify-content:space-between; width:100%; padding:11px 10px; border:0; border-radius:6px; color:#b5c9cc; background:transparent; text-align:left; font-size:12px; }.nav-item:hover,.nav-item.active { color:#fff; background:rgba(215,237,230,.14); }.nav-item.active { box-shadow:inset 3px 0 var(--teal-soft); }.nav-item span { opacity:.55; font:10px Consolas,monospace; }.sidebar-foot { display:flex; gap:7px; align-items:center; margin-top:auto; padding:10px; color:#a9c2c5; font-size:11px; }.sidebar-foot span:last-child { margin-left:auto; color:#779398; }.status-dot { width:7px; height:7px; border-radius:50%; background:#71d0a5; }
.main { width:100%; max-width:1320px; margin:auto; padding:35px 44px 30px; }.hero { display:flex; justify-content:space-between; gap:30px; align-items:center; padding:34px; color:#edf5f3; background:var(--navy); border-radius:10px; box-shadow:var(--shadow); }.eyebrow { margin:0 0 9px; color:var(--teal); text-transform:uppercase; letter-spacing:1.5px; font-size:10px; font-weight:800; }.hero .eyebrow { color:#9ed8cb; }.hero h1 { max-width:700px; margin:0; color:#fff; font:600 clamp(30px,4vw,52px)/1 Georgia,serif; }.lead { max-width:700px; margin:17px 0 0; color:#c4d7d8; font-size:14px; line-height:1.65; }.context-note { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; color:#c4d7d8; font-size:11px; }.context-note strong { width:100%; color:#fff; font-size:12px; }.context-note b { color:#a8e2d5; }.hero-mark { flex:0 0 125px; width:125px; height:125px; display:grid; place-content:center; border:1px solid rgba(214,238,231,.45); border-radius:50%; color:#a8e2d5; text-align:center; transform:rotate(7deg); }.hero-mark span { font:600 45px Georgia,serif; }.hero-mark small { color:#a9c2c5; text-transform:uppercase; letter-spacing:1px; font-size:10px; }
.toolbar { display:flex; gap:14px; align-items:end; margin:28px 0 10px; }.search { flex:1; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; font-size:10px; font-weight:800; }.search input { display:block; width:100%; margin-top:7px; padding:13px 14px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; outline:none; font-size:13px; }.search input:focus { border-color:var(--teal); box-shadow:0 0 0 3px #dff2ed; }.filters { display:flex; flex-wrap:wrap; gap:6px; }.filter { padding:9px 10px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:#fff; font-size:10px; }.filter:hover,.filter.active { color:var(--teal); border-color:#9acdc3; background:var(--teal-soft); }.result-line { display:flex; justify-content:space-between; min-height:25px; color:var(--muted); font-size:11px; }.result-line button { border:0; color:var(--teal); background:transparent; font-size:11px; text-decoration:underline; }.result-line button[hidden] { visibility:hidden; }
.story { display:grid; grid-template-columns:.75fr 1.25fr; gap:26px; align-items:center; margin-top:14px; padding:23px 25px; border:1px solid #cfe2dc; border-left:3px solid var(--teal); border-radius:8px; background:#e8f2f0; overflow:hidden; }.story-copy h2 { margin:0 0 7px; font:600 25px Georgia,serif; }.story-copy p:not(.eyebrow) { max-width:390px; margin:0; color:#47666b; font-size:12px; line-height:1.55; }.story-track { display:flex; align-items:center; justify-content:center; gap:13px; }.story-step { position:relative; display:grid; gap:4px; min-width:125px; padding:13px; border:1px solid #c8ddd7; border-radius:7px; background:#fff; box-shadow:0 8px 20px rgba(20,43,54,.06); animation:story-rise .7s ease both; }.story-step:nth-of-type(3) { animation-delay:.16s; }.story-step:nth-of-type(5) { animation-delay:.32s; }.story-icon { display:grid; place-items:center; width:27px; height:27px; margin-bottom:3px; border-radius:50%; color:#fff; background:var(--teal); font:700 17px Georgia,serif; }.step-find .story-icon { background:var(--orange); }.step-move .story-icon { background:var(--green); }.story-step strong { font-size:12px; }.story-step small { color:var(--muted); font-size:10px; line-height:1.35; }.story-arrow { color:var(--teal); font-size:21px; animation:story-pulse 1.8s ease-in-out infinite; }.story-arrow:nth-of-type(4) { animation-delay:.45s; } @keyframes story-rise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } } @keyframes story-pulse { 0%,100% { opacity:.35; transform:translateX(0); } 50% { opacity:1; transform:translateX(4px); } } @media (prefers-reduced-motion:reduce) { .story-step,.story-arrow { animation:none; } }
.popular { display:grid; grid-template-columns:.7fr 1.3fr; gap:10px 24px; align-items:center; margin-top:15px; padding:21px 25px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:var(--shadow); }.popular-heading h2 { margin:0 0 5px; font:600 22px Georgia,serif; }.popular-heading > p:last-child { margin:0; color:var(--muted); font-size:11px; }.popular-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.popular-card { display:grid; gap:7px; min-width:0; padding:13px; border:1px solid #cfe2dc; border-radius:6px; color:var(--ink); background:#f8fbf9; text-align:left; }.popular-card:hover,.popular-card:focus-visible { border-color:var(--teal); background:var(--teal-soft); outline:none; }.popular-number { color:var(--teal); font:700 10px Consolas,monospace; }.popular-card strong { font-size:12px; }.popular-card code { color:#47666b; font:10px Consolas,monospace; overflow-wrap:anywhere; }.copy-feedback { grid-column:2; min-height:13px; margin:0; color:var(--teal); font-size:10px; }.guide-note { margin:17px 0 5px; color:var(--muted); font-size:11px; }.guide-note span { display:inline-block; margin-right:5px; padding:3px 5px; border-radius:3px; font-size:8px; font-weight:800; letter-spacing:.6px; }.note-read { color:var(--green); background:#e1f1e8; }.note-action { margin-left:11px; color:var(--orange); background:#fae8dc; }
.command-grid { display:grid; gap:28px; }.category { scroll-margin-top:20px; }.category-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:12px; }.category-head h2 { margin:0 0 5px; font:600 23px Georgia,serif; }.category-head p { margin:0; color:var(--muted); font-size:12px; }.category-kicker { display:inline-block; margin-bottom:8px; padding:4px 7px; border-radius:4px; text-transform:uppercase; letter-spacing:1px; font-size:9px; font-weight:800; }.category-kicker.teal { color:var(--teal); background:var(--teal-soft); }.category-kicker.orange { color:var(--orange); background:#fae8dc; }.category-kicker.blue { color:var(--blue); background:#e4edf4; }.category-kicker.gold { color:var(--gold); background:#fff4cb; }.category-kicker.green { color:var(--green); background:#e1f1e8; }.category-kicker.red { color:var(--red); background:#f6e4e1; }.category-kicker.purple { color:var(--purple); background:#eee5f4; }.category-kicker.slate { color:#53636d; background:#e8eeed; }.category-count { color:var(--muted); font:11px Consolas,monospace; }.commands { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.command { padding:16px; border:1px solid var(--line); border-top:3px solid #a8c9c2; border-radius:7px; background:var(--panel); box-shadow:var(--shadow); }.command-top { display:flex; justify-content:space-between; gap:10px; align-items:start; }.command-top code { color:var(--teal); font:700 12px Consolas,monospace; overflow-wrap:anywhere; }.command-top span { flex:0 0 auto; color:var(--muted); font-size:10px; text-align:right; }.command p { min-height:34px; margin:10px 0 13px; color:#526a6d; font-size:12px; line-height:1.5; }.example { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:stretch; }.example code { display:block; min-width:0; padding:9px; border:1px solid #e1e7e3; border-radius:4px; color:#29464b; background:#f5f8f6; font:11px Consolas,monospace; overflow-wrap:anywhere; }.example button { padding:0 9px; border:1px solid #c8ddd7; border-radius:4px; color:var(--teal); background:#fff; font-size:10px; font-weight:800; }.example button:hover { color:#fff; background:var(--teal); }.empty { padding:50px 20px; border:1px dashed var(--line); color:var(--muted); text-align:center; }.empty strong,.empty span { display:block; }.empty strong { margin-bottom:6px; color:var(--ink); font:600 20px Georgia,serif; }.plain-language { display:grid; grid-template-columns:.7fr 1.3fr; gap:12px 25px; margin-top:35px; padding:24px; border-left:3px solid var(--teal); border-radius:7px; background:#e8f2f0; }.plain-language h2 { margin:0; font:600 24px Georgia,serif; }.plain-language > p { margin:0; color:#47666b; font-size:12px; line-height:1.6; }.examples { grid-column:2; display:flex; flex-wrap:wrap; gap:7px; }.examples code { padding:8px 9px; border:1px solid #cfe2dc; border-radius:4px; color:var(--teal); background:#fff; font-size:10px; }.main footer { display:flex; justify-content:space-between; gap:20px; margin-top:32px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }.main footer a { color:var(--teal); }
@media (max-width:1100px) { .toolbar { display:block; }.filters { margin-top:12px; } }
@media (max-width:950px) { .sidebar { position:static; height:auto; }.shell { display:block; }.sidebar { padding:17px; }.brand { padding:0 5px 16px; }.sidebar nav { display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; }.sidebar nav::-webkit-scrollbar { display:none; }.nav-item { flex:0 0 auto; width:auto; white-space:nowrap; }.sidebar-foot { display:none; }.main { padding:24px 22px; }.hero { padding:25px; }.commands { grid-template-columns:1fr; } }
@media (max-width:620px) { .main { padding:17px 14px; }.hero { display:block; padding:22px; }.hero h1 { font-size:35px; }.hero-mark { margin:23px 0 0; }.toolbar { display:block; }.filters { max-width:none; margin-top:12px; }.filter { flex:1 0 auto; }.category-head { align-items:start; }.plain-language { display:block; }.plain-language > p { margin-top:15px; }.examples { margin-top:14px; }.main footer { display:block; line-height:1.8; }.main footer a { display:block; } }
@media (max-width:620px) { .main { padding:17px 14px; }.hero { display:block; padding:22px; }.hero h1 { font-size:35px; }.hero-mark { margin:23px 0 0; }.story { display:block; padding:20px; }.story-track { justify-content:space-between; gap:5px; margin-top:19px; }.story-step { min-width:0; flex:1; padding:10px; }.story-step small { min-height:27px; }.story-arrow { font-size:17px; }.popular { display:block; padding:20px; }.popular-grid { grid-template-columns:1fr; margin-top:15px; }.copy-feedback { margin-top:7px; }.guide-note { line-height:2.2; }.note-action { margin-left:0; }.toolbar { display:block; }.filters { max-width:none; margin-top:12px; }.filter { flex:1 0 auto; }.category-head { align-items:start; }.plain-language { display:block; }.plain-language > p { margin-top:15px; }.examples { margin-top:14px; }.main footer { display:block; line-height:1.8; }.main footer a { display:block; } }