:root { --items-panel: color-mix(in srgb, var(--kwd-panel) 94%, #0b1018); --items-soft: color-mix(in srgb, var(--kwd-panel-soft) 94%, #111923); }
.items-hero, .item-hero { padding: 106px 0 64px; border-bottom: 1px solid var(--kwd-line); background: radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--kwd-accent) 13%, transparent), transparent 34%), var(--kwd-bg); }
.items-hero .container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); column-gap: 80px; }
.items-hero .reference-breadcrumb, .items-hero .items-kicker { grid-column: 1; }
.items-kicker { margin-top: 48px; color: var(--kwd-accent-strong); font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.items-hero h1 { grid-column: 1; margin: 10px 0 20px; color: var(--kwd-text); font: 760 clamp(3rem, 7vw, 6.8rem)/.9 "Segoe UI Variable Display", "Segoe UI", sans-serif; letter-spacing: -.055em; }
.items-hero h1 em { color: var(--kwd-accent-strong); font-style: normal; }
.items-hero > .container > p { grid-column: 1; max-width: 760px; margin: 0; color: var(--kwd-copy); font-size: 1.08rem; line-height: 1.75; }
.items-hero dl { grid-column: 2; grid-row: 1 / span 5; align-self: end; display: grid; margin: 0; border: 1px solid var(--kwd-line-strong); border-radius: var(--kwd-radius); overflow: hidden; background: var(--kwd-line); gap: 1px; }
.items-hero dl div { display: flex; align-items: center; justify-content: space-between; min-height: 104px; padding: 20px 24px; background: var(--items-panel); }
.items-hero dt { color: var(--kwd-muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.items-hero dd { margin: 0; color: var(--kwd-gold); font: 760 2.4rem ui-monospace, monospace; }
.items-catalog { padding: 76px 0 100px; }
.items-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.items-heading span { color: var(--kwd-accent-strong); font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.items-heading h2 { margin: 8px 0 0; color: var(--kwd-text); font: 740 clamp(2rem, 4vw, 3.4rem)/1.04 "Segoe UI Variable Display", "Segoe UI", sans-serif; }
.items-heading p { color: var(--kwd-copy); }.items-heading p strong { color: var(--kwd-gold); font-size: 1.35rem; }
.items-toolbar { position: sticky; z-index: 8; top: 68px; display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(160px, .55fr)) auto; gap: 10px; margin-bottom: 24px; padding: 13px; border: 1px solid var(--kwd-line-strong); border-radius: var(--kwd-radius); background: color-mix(in srgb, var(--kwd-bg) 92%, transparent); backdrop-filter: blur(16px); }
.items-toolbar label { display: grid; gap: 5px; }.items-toolbar label > span { color: var(--kwd-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.items-search { display: flex !important; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px solid var(--kwd-line); border-radius: 8px; background: var(--items-panel); }
.items-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--kwd-text); font: inherit; }
.items-toolbar select, .items-toolbar button { min-height: 34px; border: 1px solid var(--kwd-line); border-radius: 7px; background: var(--items-panel); color: var(--kwd-copy); font: inherit; }
.items-toolbar select { padding: 0 9px; }.items-toolbar button { align-self: end; min-height: 52px; padding: 0 15px; color: var(--kwd-accent-strong); font-weight: 750; cursor: pointer; }
.items-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.item-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; border: 1px solid var(--kwd-line); border-radius: var(--kwd-radius); overflow: hidden; background: var(--items-panel); color: inherit !important; transition: transform .18s ease, border-color .18s ease; }
.item-card:hover { transform: translateY(-3px); border-color: var(--kwd-accent); }.item-card[hidden] { display: none; }
.item-card-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-left: 14px; border: 1px solid var(--kwd-line); border-radius: 9px; background: var(--kwd-bg-soft); }
.item-card-icon img { max-width: 52px; max-height: 52px; object-fit: contain; image-rendering: pixelated; }
.item-card-copy { display: grid; min-width: 0; gap: 5px; padding: 17px 14px 17px 0; }
.item-card-copy small { overflow: hidden; color: var(--kwd-muted); font: .68rem ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.item-card-copy strong { overflow: hidden; color: var(--kwd-text); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.item-card-copy em { color: #8dc7a2; font-size: .72rem; font-style: normal; }.item-card-copy em.is-gap { color: #e8a078; }
.item-card-facts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--kwd-line); }
.item-card-facts > span { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; background: var(--items-soft); }.item-card-facts b { color: var(--kwd-gold); }.item-card-facts small { color: var(--kwd-muted); }
.item-card > i { grid-column: 1 / -1; padding: 12px 14px; border-top: 1px solid var(--kwd-line); color: var(--kwd-accent-strong); font-size: .78rem; font-style: normal; font-weight: 750; }
.items-empty { padding: 70px 20px; border: 1px dashed var(--kwd-line-strong); border-radius: var(--kwd-radius); text-align: center; }.items-empty strong { color: var(--kwd-text); font-size: 1.5rem; }.items-empty p { color: var(--kwd-copy); }.items-empty button { padding: 10px 14px; border: 1px solid var(--kwd-line); border-radius: 7px; background: var(--items-panel); color: var(--kwd-accent-strong); cursor: pointer; }

.item-hero .item-title { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 22px; margin-top: 48px; }
.item-title > span { display: grid; place-items: center; width: 106px; height: 106px; border: 1px solid var(--kwd-line-strong); border-radius: 13px; background: var(--items-panel); }.item-title img { max-width: 88px; max-height: 88px; object-fit: contain; image-rendering: pixelated; }
.item-title small { color: var(--kwd-muted); font: .78rem ui-monospace, monospace; }.item-title h1 { margin: 7px 0 0; color: var(--kwd-text); font: 760 clamp(2.5rem, 6vw, 5.5rem)/.96 "Segoe UI Variable Display", "Segoe UI", sans-serif; }
.item-source { max-width: 850px; margin: 28px 0 0 132px; padding: 18px 20px; border-left: 3px solid #67ae84; background: color-mix(in srgb, #67ae84 8%, var(--items-panel)); }.item-source.is-gap { border-color: #d77e55; background: color-mix(in srgb, #d77e55 9%, var(--items-panel)); }
.item-source small { display: block; color: var(--kwd-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }.item-source strong { display: block; margin-top: 5px; color: var(--kwd-text); font-size: 1.2rem; }.item-source p { margin: 7px 0 0; color: var(--kwd-copy); line-height: 1.6; }
.item-detail-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-top: 62px; padding-bottom: 100px; }.item-detail-layout > aside { position: sticky; top: 90px; align-self: start; display: grid; gap: 7px; }.item-detail-layout > aside > small { margin-bottom: 7px; color: var(--kwd-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }.item-detail-layout > aside a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 9px; border-left: 2px solid var(--kwd-line); color: var(--kwd-copy) !important; }.item-detail-layout > aside a:hover { border-color: var(--kwd-accent); color: var(--kwd-accent-strong) !important; }.item-detail-layout > aside b { color: var(--kwd-muted); font: .7rem ui-monospace, monospace; }.item-detail-layout .reference-back { grid-template-columns: 1fr; margin-top: 16px; }
.item-detail-layout > article { min-width: 0; }.item-section { scroll-margin-top: 100px; margin-bottom: 50px; border: 1px solid var(--kwd-line-strong); border-radius: var(--kwd-radius); overflow: hidden; background: var(--items-panel); }.item-section > header { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 22px; border-bottom: 1px solid var(--kwd-line); background: var(--items-soft); }.item-section > header > span { color: var(--kwd-accent-strong); font: 750 .75rem ui-monospace, monospace; }.item-section > header small { color: var(--kwd-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }.item-section h2 { margin: 5px 0 0; color: var(--kwd-text); font: 730 1.8rem "Segoe UI Variable Display", "Segoe UI", sans-serif; }
.item-recipe-list { display: grid; gap: 1px; background: var(--kwd-line); }.item-recipe-list > a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 78px; padding: 10px 16px; background: var(--items-panel); color: inherit !important; }.item-recipe-list > a:hover { background: color-mix(in srgb, var(--kwd-accent) 9%, var(--items-panel)); }.item-mini-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--kwd-line); border-radius: 8px; background: var(--kwd-bg-soft); }.item-mini-icon img { max-width: 42px; max-height: 42px; object-fit: contain; image-rendering: pixelated; }.item-recipe-list a > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }.item-recipe-list strong { color: var(--kwd-text); }.item-recipe-list small { color: var(--kwd-muted); line-height: 1.35; }.item-recipe-list em { color: var(--kwd-accent-strong); font-size: .78rem; font-style: normal; font-weight: 750; }
.item-source-panel { margin: 22px; padding: 20px; border: 1px solid color-mix(in srgb, #67ae84 55%, var(--kwd-line)); border-radius: 8px; background: color-mix(in srgb, #67ae84 7%, var(--items-soft)); }.item-source-panel.is-gap { border-color: color-mix(in srgb, #d77e55 60%, var(--kwd-line)); background: color-mix(in srgb, #d77e55 8%, var(--items-soft)); }.item-source-panel strong { color: var(--kwd-text); }.item-source-panel p { margin: 8px 0 0; color: var(--kwd-copy); line-height: 1.65; }
.item-chains { overflow: visible; border: 0; background: transparent; }.item-chains > header { border: 1px solid var(--kwd-line-strong); border-radius: var(--kwd-radius) var(--kwd-radius) 0 0; }.item-chain { margin-bottom: 16px; border: 1px solid var(--kwd-line-strong); border-radius: var(--kwd-radius); overflow: hidden; background: var(--items-panel); }.item-chain-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 20px; border-bottom: 1px solid var(--kwd-line); }.item-chain-head small { color: var(--kwd-muted); text-transform: uppercase; }.item-chain-head h3 { margin: 5px 0 0; color: var(--kwd-text); font-size: 1.25rem; }.item-chain-head a { color: var(--kwd-accent-strong) !important; font-weight: 750; }
.item-chain-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 34px; padding: 20px; overflow-x: auto; }.item-chain-stage { position: relative; display: grid; align-content: start; gap: 8px; }.item-chain-stage:not(:last-child)::after { position: absolute; top: 50%; right: -24px; content: "→"; color: var(--kwd-accent-strong); }.item-chain-stage > small { color: var(--kwd-accent-strong); font-size: .68rem; font-weight: 800; text-transform: uppercase; }.item-chain-stage > div { display: grid; gap: 7px; }.item-chain-stage a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--kwd-line); border-radius: 7px; background: var(--items-soft); color: inherit !important; }.item-chain-stage a:hover { border-color: var(--kwd-accent); }.item-chain-stage img { max-width: 34px; max-height: 34px; object-fit: contain; image-rendering: pixelated; }.item-chain-stage a > span { display: grid; min-width: 0; gap: 3px; }.item-chain-stage strong, .item-chain-stage small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.item-chain-stage strong { color: var(--kwd-text); font-size: .78rem; }.item-chain-stage small { color: var(--kwd-muted); font-size: .66rem; }.item-chain-stage i { color: var(--kwd-accent-strong); font-style: normal; }
.item-chain-result { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid color-mix(in srgb, var(--kwd-gold) 45%, var(--kwd-line)); background: color-mix(in srgb, var(--kwd-gold) 8%, var(--items-panel)); color: inherit !important; }.item-chain-result > span:nth-child(2) { display: grid; gap: 4px; }.item-chain-result small { color: var(--kwd-muted); }.item-chain-result strong { color: var(--kwd-text); }.item-chain-result i { color: var(--kwd-accent-strong); font-style: normal; }
@media (max-width: 1080px) { .items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.items-hero .container { grid-template-columns: 1fr; }.items-hero dl { grid-column: 1; grid-row: auto; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }.items-hero dl div { display: grid; }.item-detail-layout { grid-template-columns: 1fr; }.item-detail-layout > aside { position: static; grid-template-columns: repeat(3, 1fr); }.item-detail-layout > aside > small, .item-detail-layout .reference-back { grid-column: 1 / -1; } }
@media (max-width: 760px) { .items-toolbar { position: static; grid-template-columns: 1fr; }.items-grid { grid-template-columns: 1fr; }.items-heading { display: grid; }.items-hero dl { grid-template-columns: 1fr; }.item-source { margin-left: 0; }.item-detail-layout > aside { grid-template-columns: 1fr; }.item-detail-layout > aside > small, .item-detail-layout .reference-back { grid-column: auto; }.item-recipe-list > a { grid-template-columns: 50px minmax(0,1fr); }.item-recipe-list em { grid-column: 2; }.item-chain-head { display: grid; }.item-chain-track { grid-auto-columns: minmax(230px, 82vw); }.item-title h1 { font-size: clamp(2.2rem, 12vw, 4rem); } }