.system-example{--ex-bg:var(--hh-bg-raised);--ex-ink:var(--hh-ink);--ex-muted:var(--hh-ink-muted);--ex-line:var(--hh-line);--ex-soft:var(--hh-bg-sunken);--ex-radius:var(--hh-radius-md);background:var(--ex-bg);color:var(--ex-ink);border:1px solid var(--ex-line);border-radius:var(--hh-radius-xl);padding:var(--hh-space-6);min-width:0}.example-happyhands{--ex-bg:var(--hh-bg-raised);--ex-ink:var(--hh-ink);--ex-muted:var(--hh-ink-muted);--ex-line:var(--hh-line);--ex-soft:var(--hh-bg-sunken)}.example-quartz[data-appearance=light]{--ex-bg:oklch(99.7% .001 250);--ex-ink:oklch(20% .024 262);--ex-soft:oklch(95.6% .004 255);--ex-muted:color-mix(in srgb, var(--ex-ink) 75%, var(--ex-bg));--ex-line:color-mix(in srgb, var(--ex-ink) 25%, var(--ex-bg));--ex-radius:6px}.example-quartz[data-appearance=dark]{--ex-bg:oklch(18.5% .016 262);--ex-ink:oklch(96.5% .006 250);--ex-soft:oklch(23.5% .018 262);--ex-muted:color-mix(in srgb, var(--ex-ink) 75%, var(--ex-bg));--ex-line:color-mix(in srgb, var(--ex-ink) 25%, var(--ex-bg));--ex-radius:6px}.system-example .example-top,.system-example .example-bottom{justify-content:space-between;align-items:center;gap:var(--hh-space-3);flex-wrap:wrap;display:flex}.system-example .example-top{padding-bottom:var(--hh-space-4);border-bottom:1px solid var(--ex-line);font-size:12px}.system-landing .system-example h2{margin:var(--hh-space-6) 0 var(--hh-space-2);font-size:22px}.system-example p{color:var(--ex-muted);font-size:14px}.system-example fieldset{margin:var(--hh-space-6) 0;border:0;min-width:0;padding:0}.system-example legend{margin-bottom:var(--hh-space-2);color:var(--ex-muted);font-size:12px}.system-example .example-row{align-items:center;gap:var(--hh-space-3);padding:var(--hh-space-3) 0;border-top:1px solid var(--ex-line);cursor:pointer;display:flex}.system-example .example-row span{overflow-wrap:anywhere;min-width:0;font-size:14px}.system-example .example-row small{white-space:nowrap;color:var(--ex-muted);margin-left:auto;font-size:12px}.system-landing .system-example input[type=checkbox]{width:16px;height:16px;min-height:16px;accent-color:var(--ex-ink);flex-shrink:0;margin:0;padding:0}.system-landing .system-example button{padding:var(--hh-space-2) var(--hh-space-3);border:1px solid var(--ex-line);border-radius:var(--ex-radius);background:var(--ex-bg);min-height:44px;color:var(--ex-ink);cursor:pointer;font-size:13px}.system-landing .system-example button.example-primary,.system-landing .system-example button[data-variant=primary]{background:var(--ex-ink);color:var(--ex-bg);border-color:var(--ex-ink)}.system-example button:disabled{opacity:.5;cursor:not-allowed}.system-example :is(button,input):focus-visible{outline:2px solid var(--ex-ink);outline-offset:3px}.system-example .example-caption{border-top:1px solid var(--ex-line);padding-top:var(--hh-space-4);margin:var(--hh-space-4) 0 0;font-size:12px}@media (width<=600px){.system-example{padding:var(--hh-space-4)}.system-example .example-row{flex-wrap:wrap}.system-example .example-row small{margin-left:28px}}.lime-preview{background:var(--lm-page);color:var(--lm-fg);padding:var(--hh-space-6);border:.5px solid var(--lm-line-strong);border-radius:var(--lm-radius-panel);min-width:0;font-family:var(--hh-font-sans)}.lime-preview .lime-preview-header{justify-content:space-between;align-items:center;gap:var(--hh-space-3);margin-bottom:var(--hh-space-6);display:flex}.system-landing .lime-preview h2{margin:0 0 var(--hh-space-3);font-size:20px;line-height:1.4}.lime-preview p{color:var(--lm-fg-2);font-size:14px}.lime-preview fieldset{min-width:0;margin:var(--hh-space-6) 0;border:0;padding:0}.lime-preview legend{margin-bottom:var(--hh-space-3);font-size:14px;font-weight:600}.system-landing .lime-preview .lime-preview-row{align-items:center;gap:var(--hh-space-3);padding:var(--hh-space-4) 0;border-top:.5px solid var(--lm-line);max-width:none;margin:0;display:flex}.system-landing .lime-preview input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--lm-accent-line);flex-shrink:0;margin:0;padding:0}.lime-preview .lime-preview-field{font-size:12px}.system-landing .lime-preview select{color:var(--lm-fg);background:var(--lm-surface);border-color:var(--lm-line-strong);border-radius:var(--lm-radius-field)}.system-landing .lime-preview button{min-height:44px;padding:var(--hh-space-2) var(--hh-space-4);border:.5px solid var(--lm-line-strong);border-radius:var(--lm-radius-control);background:var(--lm-surface);color:var(--lm-fg);cursor:pointer}.system-landing .lime-preview button[data-demo-primary]{border-color:var(--lm-accent-line);background:linear-gradient(var(--lm-glow-accent-from), var(--lm-glow-accent-to));color:var(--lm-on-accent);width:100%;font-weight:600}.system-landing .lime-preview button:disabled{background:var(--lm-surface-2);border-color:var(--lm-line);color:var(--lm-fg-3);cursor:not-allowed}.system-landing .lime-preview :is(button,input,select,[tabindex]):focus-visible{outline-color:var(--lm-accent-line)}.lime-preview-result{padding-block:var(--hh-space-4);border-top:.5px solid var(--lm-line);margin-bottom:var(--hh-space-4)}.lime-palette{gap:var(--hh-space-4);margin-top:var(--hh-space-6);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.lime-palette article{padding:var(--hh-space-4);border:.5px solid var(--hh-line);border-radius:var(--hh-radius-lg);min-width:0}.lime-palette i{border:.5px solid var(--hh-line-strong);border-radius:var(--hh-radius-sm);height:56px;margin-bottom:var(--hh-space-3);display:block}.lime-palette code{color:var(--hh-ink-muted);overflow-wrap:anywhere;font-size:12px;display:block}@media (width<=600px){.lime-preview{padding:var(--hh-space-5)}.lime-palette{grid-template-columns:repeat(2,minmax(0,1fr))}}.scene-section-head{justify-content:space-between;align-items:end;gap:24px;display:flex}.scene-section-head p{color:var(--hh-ink-muted)}.scene-appearance{flex-shrink:0;gap:4px;display:flex}.system-scenes button{cursor:pointer;border:.5px solid var(--hh-line-strong);border-radius:var(--hh-radius-md);background:var(--hh-bg-raised);min-height:44px;color:var(--hh-ink);padding:10px 16px}.system-scenes button[aria-pressed=true]{background:var(--hh-primary);color:var(--hh-on-primary);border-color:var(--hh-primary)}.scene-selector{gap:12px;margin:24px 0;display:flex}.scene-selector button{text-align:left;flex:1;align-items:center;gap:16px;display:flex}.scene-selector span{opacity:.6;font-size:12px}.scene-selector strong{font-size:14px;font-weight:500}.scene-frame{background:var(--scene-bg);color:var(--scene-ink);border:.5px solid var(--scene-line);border-radius:var(--scene-radius);overflow:hidden}.scene-window-bar{border-bottom:.5px solid var(--scene-line);background:var(--scene-panel);justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;font-size:14px;display:flex}.scene-window-bar>span{color:var(--scene-muted);font-size:12px}.scene-stage{grid-template-columns:.85fr 1fr;align-items:center;gap:5%;padding:48px;display:grid}.scene-index{letter-spacing:-.08em;opacity:.4;font-size:80px;font-weight:300;line-height:1.1;display:block}.scene-intro h3{font-size:20px}.scene-intro p,.scene-intro li{color:var(--scene-muted)}.scene-intro ul{padding:0;list-style:none}.scene-intro li{border-top:.5px solid var(--scene-line);padding:12px 0;font-size:14px}.scene-workspace{grid-template-columns:180px minmax(0,1fr);min-height:460px;display:grid}.scene-workspace-nav{border-right:.5px solid var(--scene-line);flex-direction:column;gap:24px;padding:28px 20px;font-size:14px;display:flex}.scene-workspace-nav>span{border-bottom:2px solid var(--scene-ink);padding:12px 0}.scene-workspace-nav small{color:var(--scene-muted)}.scene-workspace-main{min-width:0;padding:28px}.scene-workspace-main h3{margin-top:0;font-size:20px}.scene-search{gap:8px;max-width:360px;margin-bottom:24px;font-size:14px;display:grid}.scene-frame input:not([type=checkbox]){background:var(--scene-panel);width:100%;color:var(--scene-ink);border:.5px solid var(--scene-line);border-radius:var(--scene-radius);min-height:44px;padding:12px}.scene-master-detail{grid-template-columns:1fr 1fr;gap:24px;display:grid}.scene-list{align-content:start;gap:8px;display:grid}.scene-frame .scene-list button{text-align:left;border-color:var(--scene-line);background:var(--scene-panel);color:var(--scene-ink);align-items:center;gap:12px;display:flex}.scene-list strong{flex:1;font-size:14px;font-weight:500}.scene-list span{font-size:12px}.scene-frame .scene-list button[aria-pressed=true]{border-color:var(--scene-ink);box-shadow:none}.scene-detail{background:var(--scene-panel);border:.5px solid var(--scene-line);border-radius:var(--scene-radius);padding:24px}.scene-detail h4{margin:16px 0;font-size:20px}.scene-detail p{color:var(--scene-muted);font-size:14px}.scene-badge{border:.5px solid var(--scene-line);border-radius:20px;padding:4px 10px;font-size:12px}.scene-detail dl>div{border-top:.5px solid var(--scene-line);justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;display:flex}.scene-detail dd{margin:0}.scene-frame .scene-primary{background:var(--scene-action);color:var(--scene-on);border-color:var(--scene-action);border-radius:var(--scene-radius)}.scene-settings{grid-template-columns:1fr 1fr;gap:8%;padding:48px;display:grid}.scene-settings h3{font-size:20px}.scene-settings p{color:var(--scene-muted)}.scene-settings form{background:var(--scene-panel);border-radius:var(--scene-radius);border:.5px solid var(--scene-line);padding:28px}.scene-settings label{gap:8px;margin-bottom:24px;font-size:14px;display:grid}.scene-settings label.scene-checkbox{align-items:center;gap:12px;display:flex}.scene-checkbox input{width:18px;height:18px;accent-color:var(--scene-ink)}.scene-form-actions{gap:12px;display:flex}.scene-settings button:not(.scene-primary){background:var(--scene-panel);color:var(--scene-ink);border-color:var(--scene-line)}.scene-frame :focus-visible{outline-color:var(--scene-ink)}@media (width<=900px){.scene-stage{grid-template-columns:1fr;padding:24px}.scene-intro{display:none}.scene-workspace{grid-template-columns:1fr}.scene-workspace-nav{display:none}.scene-settings{grid-template-columns:1fr;gap:24px;padding:24px}.scene-settings .scene-index{display:none}.scene-section-head{flex-direction:column;align-items:start}.scene-master-detail{grid-template-columns:1fr}}@media (width<=560px){.scene-selector{gap:6px}.scene-selector button{flex-direction:column;align-items:start;gap:6px;padding:12px 8px}.scene-selector strong{font-size:12px}.scene-window-bar{flex-wrap:wrap;padding:16px}.scene-stage,.scene-workspace-main,.scene-settings,.scene-settings form,.scene-detail{padding:16px}.scene-settings h3{margin-top:0}.scene-form-actions{flex-wrap:wrap}}.reference-heading{justify-content:space-between;align-items:start;gap:var(--hh-space-6);margin:var(--hh-space-8) 0 var(--hh-space-5);display:flex}.reference-heading p,.reference-note,.reference-count{color:var(--hh-ink-muted);font-size:12px}.reference-heading p{max-width:640px;margin-bottom:0}.reference-actions,.reference-switcher{gap:var(--hh-space-2);flex-wrap:wrap;display:flex}.reference-actions{flex-shrink:0}.reference-toolbar{gap:var(--hh-space-5);grid-template-columns:minmax(0,1fr) minmax(160px,240px);align-items:end;display:grid}.system-landing .reference-toolbar label{max-width:none;margin:0;font-size:12px}.token-grid{gap:var(--hh-space-4);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.token-entry{border:.5px solid var(--hh-line);border-radius:var(--hh-radius-lg);background:var(--hh-bg-raised);min-width:0;padding:var(--hh-space-5)}.token-entry h4{margin:var(--hh-space-4) 0 var(--hh-space-1)}.token-entry>code{font:12px/1.6 var(--hh-font-mono);color:var(--hh-ink-muted);overflow-wrap:anywhere}.token-specimen{align-items:center;gap:var(--hh-space-3);background:var(--hh-bg-sunken);border-radius:var(--hh-radius-sm);height:64px;padding:var(--hh-space-3);display:flex}.token-specimen i{border:.5px solid var(--hh-line-strong);border-radius:var(--hh-radius-sm);flex:1;height:100%;display:block}.space-specimen{background:var(--hh-ink);max-width:100%;height:16px}.shape-specimen{background:var(--hh-bg-raised);border:.5px solid var(--hh-line-strong);width:44px;height:36px}.token-entry dl{margin:var(--hh-space-4) 0;font-size:12px}.token-entry dl>div{gap:var(--hh-space-2);margin:var(--hh-space-2) 0;grid-template-columns:42px minmax(0,1fr);display:grid}.token-entry dt{color:var(--hh-ink-muted)}.token-entry dd{overflow-wrap:anywhere;font-family:var(--hh-font-mono);margin:0}.system-landing .token-entry .hh-button{min-height:36px;padding:var(--hh-space-1) 0;font-size:12px}.reference-empty{padding:var(--hh-space-8);background:var(--hh-bg-sunken);border-radius:var(--hh-radius-lg)}.reference-notice{min-height:24px;margin-top:var(--hh-space-3);color:var(--hh-ink-muted);overflow-wrap:anywhere;font-size:12px;display:block}.reference-notice:empty{min-height:0;margin:0}.showcase-grid{gap:var(--hh-space-5);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.system-landing .showcase-grid .demo{min-width:0;margin:0}.reference-kicker{color:var(--hh-ink-muted);margin:0 0 var(--hh-space-3);font-size:12px}.system-landing .reference-checkbox{align-items:center;gap:var(--hh-space-3);min-height:44px;display:flex}.system-landing input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--hh-primary);flex-shrink:0}.reference-list{margin:var(--hh-space-4) 0;padding:0;list-style:none}.reference-list li{justify-content:space-between;align-items:center;gap:var(--hh-space-4);padding:var(--hh-space-4) 0;border-bottom:.5px solid var(--hh-line);display:flex}.reference-list[data-density=compact] li{padding-block:var(--hh-space-2)}.reference-list p{margin:var(--hh-space-1) 0 0;color:var(--hh-ink-muted);font-size:12px}.reference-tag{white-space:nowrap;color:var(--hh-ink-muted);background:var(--hh-bg-sunken);border-radius:var(--hh-radius-sm);padding:var(--hh-space-1) var(--hh-space-2);font-size:12px}.reference-tag[data-state=ready]{color:var(--hh-success);background:var(--hh-success-soft)}.pattern-window{border:.5px solid var(--hh-line);border-radius:var(--hh-radius-lg);background:var(--hh-bg-raised);overflow:hidden}.pattern-window>header{justify-content:space-between;gap:var(--hh-space-3);padding:var(--hh-space-5) var(--hh-space-6);border-bottom:.5px solid var(--hh-line);flex-wrap:wrap;font-size:12px;display:flex}.pattern-window>header span{color:var(--hh-ink-muted)}.pattern-body{max-width:760px;padding:var(--hh-space-8);min-height:340px}.reference-feedback{padding:var(--hh-space-5);border:.5px solid var(--hh-line);border-radius:var(--hh-radius-md);margin:var(--hh-space-5) 0}.reference-feedback p{color:var(--hh-ink-muted);margin-bottom:0;font-size:12px}.registry-grid{gap:var(--hh-space-4);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.registry-entry{min-width:0;padding:var(--hh-space-5);background:var(--hh-bg-raised);border:.5px solid var(--hh-line);border-radius:var(--hh-radius-lg)}.registry-entry h3{margin:var(--hh-space-3) 0}.registry-entry p{color:var(--hh-ink-muted);font-size:12px}.registry-entry details{border-top:.5px solid var(--hh-line);margin-top:var(--hh-space-5);padding-top:var(--hh-space-2)}.registry-entry summary{cursor:pointer;justify-content:space-between;align-items:center;min-height:44px;display:flex}.registry-entry pre,.registry-entry .reference-actions{margin:var(--hh-space-3) 0}@media (width<=1000px){.token-grid,.registry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-heading{flex-direction:column}}@media (width<=600px){.token-grid,.registry-grid,.showcase-grid,.reference-toolbar{grid-template-columns:minmax(0,1fr)}.reference-toolbar{gap:var(--hh-space-4)}.pattern-body{padding:var(--hh-space-5)}.reference-switcher .hh-button{padding-inline:var(--hh-space-3);font-size:12px}}.reference-pagination{gap:var(--hh-space-3);margin-top:var(--hh-space-5);flex-wrap:wrap;display:flex}.system-landing .reference-toolbar input[type=search]{appearance:none}.component-directory{margin-top:var(--hh-space-6)}.component-directory details{border-top:.5px solid var(--hh-line);padding:var(--hh-space-4) 0}.component-directory summary{cursor:pointer;justify-content:space-between;align-items:center;min-height:44px;font-weight:600;list-style:none;display:flex}.component-directory summary::-webkit-details-marker{display:none}.component-directory details[open] summary .hh-icon{transform:rotate(180deg)}.component-directory p{color:var(--hh-ink-muted);max-width:760px}*{box-sizing:border-box}body{background:var(--hh-bg);color:var(--hh-ink);font:14px/1.7 var(--hh-font-sans);margin:0}.system-landing main{min-width:0;padding:0 var(--page-inset)}.system-landing a{color:inherit;text-underline-offset:4px;text-decoration:none}.system-landing :is(p,dd) a{color:var(--hh-brand-text);font-weight:500}.system-landing :is(p,dd) a:hover{text-decoration:underline}.system-landing :is(button,input,select,textarea){font:inherit}.system-landing :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--hh-ring);outline-offset:4px}.system-breadcrumb{align-items:center;gap:var(--hh-space-3);padding-top:var(--hh-space-6);color:var(--hh-ink-muted);flex-wrap:wrap;font-size:12px;display:flex}.system-breadcrumb a{align-items:center;min-height:44px;text-decoration:none;display:inline-flex}.system-breadcrumb a:hover{color:var(--hh-brand-text);text-decoration:none}.system-breadcrumb [aria-current]{color:var(--hh-ink)}.system-landing section{padding:var(--section-space) 0;border-bottom:.5px solid var(--hh-line);scroll-margin-top:96px}.system-landing #overview{scroll-margin-top:calc(var(--hh-space-20) * 3)}.system-landing .system-introduction{padding-top:var(--hh-space-8);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,64px);display:grid}.system-landing h1{letter-spacing:-.035em;margin:var(--hh-space-3) 0 var(--hh-space-6);overflow-wrap:anywhere;font-size:32px;line-height:1.12}.system-landing h2{letter-spacing:-.025em;margin:var(--hh-space-3) 0 var(--hh-space-6);font-size:32px;line-height:1.3}.system-landing h3{margin:0 0 var(--hh-space-3);font-size:20px;line-height:1.5}.system-landing .lead{max-width:680px;color:var(--hh-ink-muted);font-size:14px;line-height:1.8}.system-landing .eyebrow{color:var(--hh-ink-muted);letter-spacing:.04em;margin-top:0;font-size:12px}.system-landing .note{margin-top:var(--hh-space-6);color:var(--hh-ink-muted);font-size:12px}.system-landing .actions{gap:var(--hh-space-3);margin:var(--hh-space-6) 0 0;flex-wrap:wrap;align-items:center;display:flex}.system-landing :where(.action,.hh-button){border:.5px solid var(--hh-line-strong);border-radius:var(--hh-radius-md);background:var(--hh-bg-raised);min-height:44px;color:var(--hh-ink);cursor:pointer;justify-content:center;align-items:center;padding:10px 16px;text-decoration:none;display:inline-flex}.system-landing .action{background:var(--hh-primary);color:var(--hh-on-primary)}.system-landing .action.secondary{background:var(--hh-bg-raised);color:var(--hh-ink)}.system-landing .action:hover{opacity:.86}.system-landing .hh-button:disabled{opacity:.5;cursor:not-allowed}.system-landing .hh-button[aria-pressed=true]{background:var(--hh-bg-hover);border-color:var(--hh-ink);color:var(--hh-ink)}.system-facts{background:var(--hh-bg-raised);border:.5px solid var(--hh-line);border-radius:var(--hh-radius-lg);padding:var(--hh-space-6)}.system-facts dl{margin:0}.system-facts dl>div{gap:var(--hh-space-4);padding:var(--hh-space-3) 0;border-bottom:.5px solid var(--hh-line);grid-template-columns:90px minmax(0,1fr);display:grid}.system-facts dt{color:var(--hh-ink-muted);font-size:12px}.system-facts dd{margin:0}.system-facts .note{margin-bottom:0}.system-landing .system-directory{z-index:10;background:var(--hh-bg);border-bottom:.5px solid var(--hh-line);position:sticky;top:0}.system-landing .system-directory>summary{display:none}.system-landing .system-directory nav{gap:var(--hh-space-8);padding:var(--hh-space-3) 0;flex-wrap:wrap;display:flex}.system-landing .system-directory nav a{min-height:44px;padding:var(--hh-space-2) 0;color:var(--hh-ink-muted);align-items:center;text-decoration:none;display:inline-flex}.system-landing .system-directory nav a:hover,.system-landing .system-directory a[aria-current=location]{color:var(--hh-ink);font-weight:600;text-decoration:none}.system-landing .rules{gap:var(--hh-space-8);margin-top:var(--hh-space-8);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.system-landing .rules article{padding-top:var(--hh-space-5);border-top:.5px solid var(--hh-line);min-width:0}.system-landing .rules p{color:var(--hh-ink-muted)}.system-landing .demo{margin:var(--hh-space-6) 0;padding:var(--hh-space-6);background:var(--hh-bg-raised);border:.5px solid var(--hh-line);border-radius:var(--hh-radius-lg)}.system-landing pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 var(--hh-font-mono);padding:var(--hh-space-4);background:var(--hh-bg-sunken)}.system-landing label{gap:var(--hh-space-2);max-width:440px;margin:var(--hh-space-4) 0;display:grid}.system-landing :is(input,select,textarea){width:100%;min-height:44px;color:var(--hh-ink);background:var(--hh-bg-raised);border:.5px solid var(--hh-line-strong);border-radius:var(--hh-radius-md);padding:10px 12px}.system-landing textarea{resize:vertical}.system-landing form{margin-bottom:var(--hh-space-5)}.system-landing dialog{width:460px;max-width:calc(100vw - 32px);padding:var(--hh-space-8);background:var(--hh-bg-raised);color:var(--hh-ink);border:.5px solid var(--hh-line);border-radius:var(--hh-radius-xl);box-shadow:var(--hh-shadow-float)}.system-landing dialog::backdrop{background:var(--hh-scrim)}.system-landing footer{padding:var(--hh-space-8) 0;color:var(--hh-ink-muted);font-size:12px}.system-landing .system-related{justify-content:space-between;align-items:center;gap:var(--hh-space-6);padding:0 0 var(--hh-space-8);display:flex}.system-related h2{margin:var(--hh-space-2) 0;color:var(--hh-ink)}.system-related .action{flex-shrink:0}.notice:empty{display:none}.notice{z-index:30;bottom:var(--hh-space-5);background:var(--hh-primary);max-width:calc(100vw - 32px);color:var(--hh-on-primary);border-radius:var(--hh-radius-md);box-shadow:var(--hh-shadow-toast);padding:12px 20px;position:fixed;left:50%;transform:translate(-50%)}.skip{position:absolute;top:-100px}.skip:focus{background:var(--hh-bg-raised);color:var(--hh-ink);padding:var(--hh-space-2);z-index:30;top:8px}@media (width<=899px){.system-landing .system-introduction{gap:var(--hh-space-8);padding-top:var(--hh-space-6);grid-template-columns:1fr}.system-landing .system-directory{position:static}.system-landing .system-directory>summary{min-height:44px;padding:var(--hh-space-3) 0;cursor:pointer;color:var(--hh-ink-muted);display:block}.system-landing .system-directory:not([open])>nav{display:none}.system-landing .system-directory nav{padding:0 0 var(--hh-space-3);gap:4px 24px}.system-landing .rules{grid-template-columns:1fr}.system-landing .system-related{flex-direction:column;align-items:flex-start}.system-landing .demo,.system-facts{padding:var(--hh-space-5)}}.system-example-layout{gap:var(--hh-space-8);margin-top:var(--hh-space-6);grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start;display:grid}@media (width<=900px){.system-example-layout{grid-template-columns:1fr}}.system-embedded .hh-site-header,.system-embedded .system-breadcrumb,.system-embedded .skip{display:none}.system-embedded .system-landing{margin-top:0;padding-top:0}.system-embedded body{min-height:0}.system-landing .system-introduction h2{font-size:20px}