@layer base, layout, components, responsive;
@layer base {
  :root { color-scheme: light; --paper:#f7f7f2; --ink:#242823; --muted:#646961; --line:#daddd3; --orange:#ed5729; --orange-dark:#b53712; --mono:ui-monospace,SFMono-Regular,Consolas,monospace; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:28px; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }
  button { font:inherit; color:inherit; cursor:pointer; }
  button,a { -webkit-tap-highlight-color:transparent; }
  :focus-visible { outline:3px solid var(--orange-dark); outline-offset:5px; }
  h1,h2,h3,p { margin:0; }
  h1,h2,h3 { line-height:1.12; }
  ::selection { background:#ffcebb; color:var(--ink); }
}
@layer layout {
  .site-shell { max-width:1280px; margin:auto; padding:0 56px; }
  .site-header { display:flex; align-items:center; gap:32px; padding:28px 0; border-bottom:1px solid var(--line); }
  .site-header nav { display:flex; gap:30px; margin-left:auto; font-size:.9rem; }
  .hero { display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:center; padding:70px 0 76px; }
  .section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:26px; }
  .tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .toolbox { padding-bottom:45px; }
  .future { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; padding:38px 0 42px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about { padding:55px 0 60px; display:grid; grid-template-columns:1fr 2fr; gap:55px; }
  footer { display:flex; align-items:center; gap:25px; border-top:1px solid var(--line); padding:26px 0; font-size:.875rem; color:var(--muted); }
}
@layer components {
  .skip-link { position:fixed; top:12px; left:12px; padding:12px 20px; background:var(--ink); color:white; z-index:10; transform:translateY(-160%); }
  .skip-link:focus { transform:translateY(0); }
  .brand { display:flex; gap:10px; align-items:center; font-size:1.65rem; font-weight:800; letter-spacing:-1px; }
  .brand svg { width:34px; height:34px; fill:none; stroke:var(--orange); stroke-width:2.1; stroke-linejoin:round; }
  .brand-period,.footer-brand span { color:var(--orange); }
  .edition { border:1px solid var(--line); border-radius:4px; padding:6px 10px; font: .75rem var(--mono); color:var(--muted); }
  nav a:hover { color:var(--orange-dark); }
  .eyebrow { font: .75rem/1.5 var(--mono); letter-spacing:1.25px; font-weight:500; }
  .hero .eyebrow { margin-bottom:23px; }
  .tiny-cross { color:var(--orange-dark); font-size:1rem; margin-right:8px; }
  h1 { font-size:clamp(3.3rem,5.7vw,4.8rem); letter-spacing:-3.7px; line-height:1.02; font-weight:800; }
  h1 span { color:var(--orange-dark); }
  .tagline { font-size:1.2rem; color:var(--muted); line-height:1.5; margin-top:23px; }
  .primary-link { display:inline-flex; justify-content:space-between; align-items:center; gap:36px; margin-top:27px; background:var(--ink); color:white; padding:13px 20px; border:1px solid var(--ink); border-radius:5px; font-size:.9rem; font-weight:600; }
  .primary-link:hover { background:#3b4338; }
  .primary-link span { font-size:1.2rem; line-height:1; }
  .crate-label { color:#20261f; background:#f16a3c; padding:25px 30px 22px; border:1px solid #d75428; border-radius:4px; transform:rotate(-3deg); box-shadow:7px 8px 0 #e9e9df; }
  .label-top,.label-bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; font:.75rem var(--mono); letter-spacing:.8px; }
  .label-top { padding-bottom:20px; border-bottom:1px solid #a73c1d; }
  .label-title { font-size:clamp(2rem,3.5vw,3rem); font-weight:800; line-height:1.04; letter-spacing:-1.8px; padding-top:27px; }
  .crate-label p { font-size:.9rem; line-height:1.55; padding:20px 0 28px; }
  .label-bottom { border-top:1px solid #a73c1d; padding-top:20px; }
  .barcode { width:79px; height:25px; background:repeating-linear-gradient(90deg,#242823 0 2px,transparent 2px 5px,#242823 5px 6px,transparent 6px 9px,#242823 9px 13px,transparent 13px 16px); }
  .section-heading .eyebrow { color:var(--muted); margin-bottom:9px; }
  h2 { font-size:1.9rem; font-weight:700; letter-spacing:-1px; }
  .tool-count { vertical-align:middle; font: .8rem var(--mono); letter-spacing:0; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:4px 6px; margin-left:13px; }
  .section-note { color:var(--muted); font-size:.875rem; }
  .tool-card { background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden; padding:26px 28px 0; transition:border-color .15s,box-shadow .15s; }
  .tool-card:hover { border-color:#939c8e; box-shadow:0 4px 14px #24282308; }
  .card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; gap:10px; }
  .tool-icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
  .tool-icon svg { width:30px; height:30px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .status-badge { display:flex; align-items:center; gap:7px; font-size:.875rem; padding:3px 9px; border-radius:4px; background:#f3eef9; color:#654388; }
  .status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .stable { background:#347e55; }.beta { background:#af6a12; }.experimental { background:#8861af; }
  .status-badge[data-status="stable"] { background:#eaf4ed; color:#27633f; }
  .status-badge[data-status="beta"] { background:#fff2d9; color:#86530a; }
  .tool-category { font:.75rem var(--mono); text-transform:uppercase; color:var(--muted); letter-spacing:.9px; margin-bottom:10px; }
  .tool-card h3 { font-size:1.65rem; letter-spacing:-.7px; margin-bottom:13px; }
  .tool-description { color:var(--muted); max-width:440px; line-height:1.65; }
  .tool-format { margin:26px 0; font:.75rem/1.5 var(--mono); color:var(--muted); letter-spacing:.4px; }
  .card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #e8eae4; padding:15px 0; }
  .availability { font-size:.875rem; color:var(--muted); }
  .tool-action { border:0; background:none; padding:8px 0 8px 10px; font-size:.875rem; font-weight:600; }
  .tool-action:hover { color:var(--orange-dark); }
  .status-key { display:flex; gap:21px; flex-wrap:wrap; align-items:center; padding-top:22px; color:var(--muted); font-size:.75rem; }
  .key-label { font:.75rem var(--mono); margin-right:auto; }
  .status-key>span:not(.key-label) { display:inline-flex; gap:6px; align-items:center; }
  .status-key strong { color:#444b40; font-weight:500; }
  .future .eyebrow { color:var(--muted); margin-bottom:12px; }
  .future h2 { font-size:1.35rem; letter-spacing:-.5px; margin-bottom:12px; }
  .future p:not(.eyebrow) { color:var(--muted); font-size:.9rem; }
  .categories { display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
  .categories li { padding:6px 13px; border:1px solid var(--line); border-radius:4px; font-size:.875rem; color:#555e4e; background:#f0f1eb; }
  .about-index { font:.75rem/1.5 var(--mono); letter-spacing:1px; color:var(--muted); }
  .about h2 { font-size:1.55rem; margin-bottom:17px; letter-spacing:-.6px; }
  .about p { color:var(--muted); max-width:650px; }
  .about .about-signoff { font-size:.875rem; color:var(--ink); margin-top:18px; }
  .footer-brand { font-weight:800; font-size:1.15rem; letter-spacing:-.7px; color:var(--ink); }
  .footer-domain { margin-left:auto; font:.75rem var(--mono); }
  .footer-domain span { margin:0 12px; color:#a6aca0; }
  dialog { color:var(--ink); background:var(--paper); padding:30px; width:min(540px,calc(100% - 32px)); max-height:calc(100dvh - 40px); border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 80px #0003; }
  dialog::backdrop { background:#18201699; backdrop-filter:blur(3px); }
  .dialog-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
  .close-button { border:1px solid var(--line); border-radius:4px; background:transparent; width:44px; height:44px; font-size:1.6rem; }
  #dialog-category { color:var(--muted); margin-bottom:10px; }
  dialog h2 { margin-bottom:18px; }
  #dialog-description { color:var(--muted); }
  dialog h3 { font-size:1rem; margin-top:25px; }
  dialog ul { padding-left:20px; color:var(--muted); }
  .connection-note { padding:16px; background:#ebede4; border-radius:5px; font-size:.875rem; }
  .connection-note p { margin-top:6px; color:#555d4d; }
  .dialog-open { overflow:hidden; }
  .notice { padding:20px; }
}
@layer responsive {
  @media(min-width:900px) { .tool-description { min-height:80px; } }
  @media(max-width:1000px) { .site-shell { padding:0 32px; }.hero { gap:38px; }.crate-label { padding:22px; }.status-key { gap:13px 20px; }.key-label { width:100%; }.future { gap:25px; } }
  @media(max-width:700px) { .site-shell { padding:0 22px; }.site-header { gap:15px; padding:21px 0; }.brand { font-size:1.45rem; }.brand svg { width:30px; }.site-header nav { gap:20px; font-size:.875rem; }.edition { display:none; }.hero { grid-template-columns:1fr; padding:45px 0 47px; gap:38px; }h1 { font-size:3.7rem; letter-spacing:-2.8px; }.hero .eyebrow { font-size:.7rem; margin-bottom:18px; }.tagline { font-size:1.1rem; }.crate-label { transform:rotate(-2deg); margin:0 5px; }.label-title { font-size:2.5rem; }.crate-label p { padding:16px 0 20px; }.label-top { padding-bottom:15px; }.label-bottom { padding-top:15px; }.section-heading { align-items:start; }.section-note { display:none; }h2 { font-size:1.65rem; }.tool-grid { grid-template-columns:1fr; gap:18px; }.tool-card { padding:23px 23px 0; }.toolbox { padding-bottom:30px; }.status-key { align-items:start; flex-direction:column; gap:10px; }.future { grid-template-columns:1fr; gap:23px; padding:30px 0; }.about { grid-template-columns:1fr; gap:18px; padding:33px 0; }footer { gap:10px; flex-wrap:wrap; }.footer-domain { width:100%; margin:4px 0 0; }dialog { padding:23px; } }
  @media(max-width:360px) { .site-shell { padding:0 16px; }.site-header nav { gap:12px; }h1 { font-size:3.2rem; }.card-bottom { align-items:start; flex-direction:column; gap:0; }.tool-action { padding-left:0; }.desktop-break { display:none; } }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.tool-card { transition:none; } }
}