.tools-scene{isolation:isolate;z-index:1;width:100%;min-height:100svh;margin-inline:0;position:relative}.tools-shell{gap:var(--space-lg);min-width:0;padding:var(--space-md);flex-direction:column;display:flex}.tools-plaque{display:none}.tools-main-scroll,.tools-rail{min-width:0}.tools-main-scroll:focus-visible,.tools-rail:focus-visible{outline:2px solid var(--color-primary);outline-offset:-3px;box-shadow:none}.tools-intro,.tool-rail-panel{border-radius:var(--radius-panel);box-shadow:var(--shadow-low);background:oklch(98.5% .006 255/.96)}.tools-intro{padding:var(--space-xl)}.tools-title-row{align-items:flex-start;gap:var(--space-md);display:flex}.tools-title-row h1{color:var(--color-primary-deep);font-family:var(--font-display);font-size:var(--text-page-title);letter-spacing:-.015em;text-wrap:balance;margin:0;font-weight:600;line-height:1.2}.tools-title-row svg{margin-top:var(--space-xs);color:var(--color-gold)}.tools-intro>p{max-width:36rem;margin:var(--space-md) 0 0;color:var(--color-ink);font-size:var(--text-body);text-wrap:pretty;line-height:1.75}.tools-browser{margin-top:var(--space-lg);padding:0}.tools-search{gap:var(--space-xs);width:min(100%,36rem);display:grid}.tools-search>label{color:var(--color-ink);font-size:var(--text-label);font-weight:500;line-height:1.4}.tools-search-control{align-items:center;gap:var(--space-md);border:1px solid var(--color-line);border-radius:var(--radius-panel);height:48px;padding-inline:var(--space-lg);background:var(--color-white);color:var(--color-muted);transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out);display:flex}.tools-search-control:focus-within{border-color:var(--color-primary);background:var(--color-white);box-shadow:var(--focus-ring)}.tools-search-control input{width:100%;min-width:0;color:var(--color-ink);font-size:var(--text-body);background:0 0;border:0;outline:0;line-height:1.4}.tools-search-control input:focus-visible{box-shadow:none}.tools-search-control input::placeholder{color:var(--color-muted);opacity:1}.tools-search>p{margin:var(--space-xs) 0 0;color:var(--color-muted);font-size:var(--text-label);line-height:1.55}.tool-grid-container{margin-top:var(--space-xl);container:tool-grid/inline-size}.tools-loading,.tools-load-state{align-content:center;place-items:center;gap:var(--space-md);min-height:15rem;margin-top:var(--space-xl);border-radius:var(--radius-panel);padding:var(--space-3xl) var(--space-xl);background:var(--color-surface);color:var(--color-muted);text-align:center;display:grid}.tools-loading[hidden],.tools-load-state[hidden]{display:none}.tools-loading>span{border:2px solid var(--color-line);border-top-color:var(--color-primary);border-radius:50%;width:2rem;height:2rem;animation:.72s linear infinite tools-loading-spin}.tools-loading p,.tools-load-state p{color:var(--color-muted);margin:0}.tools-load-state h2{color:var(--color-primary-deep);font-family:var(--font-display);font-size:var(--text-content-title);margin:0}.tools-load-state .button{margin-top:var(--space-sm)}@keyframes tools-loading-spin{to{transform:rotate(1turn)}}.tool-card-grid{gap:var(--space-lg);grid-template-columns:1fr;display:grid}.tool-card{gap:var(--space-sm) var(--space-md);border-radius:var(--radius-panel);min-width:0;height:9.5rem;padding:var(--space-lg);color:inherit;cursor:pointer;box-shadow:var(--shadow-low);transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);background:oklch(98.5% .006 255/.97);grid-template-rows:minmax(0,1fr) auto;grid-template-columns:7rem minmax(0,1fr);text-decoration:none;display:grid;overflow:hidden}.tool-card[hidden]{display:none}.tool-card:hover{background:var(--color-white);box-shadow:var(--shadow-lift);transform:translateY(-2px)}.tool-card:active{transform:translateY(0)}.tool-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;box-shadow:none}.tool-card-image{aspect-ratio:1;border-radius:var(--radius-control);object-fit:cover;grid-area:1/1/-1;align-self:center;width:7rem;height:7rem}.tool-card-tags{gap:var(--space-xs);flex-wrap:wrap;min-width:0;margin:0;padding:0;list-style:none;display:flex}.tool-card-tags li{--tool-tag-color:var(--color-primary);border:1px solid color-mix(in srgb, var(--tool-tag-color) 42%, var(--color-line));max-width:100%;padding:.2rem var(--space-sm);background:color-mix(in srgb, var(--tool-tag-color) 12%, var(--color-white));color:var(--color-ink);font-size:var(--text-label);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;font-weight:500;line-height:1.35;overflow:hidden}.tool-card-copy{align-self:start;gap:var(--space-xs);grid-area:1/2;min-width:0;max-height:100%;display:grid;overflow:hidden}.tool-card-copy h3{color:var(--color-primary-deep);font-family:var(--font-display);font-size:var(--text-content-title);text-wrap:balance;margin:0;font-weight:600;line-height:1.45}.tool-card-copy p{-webkit-line-clamp:2;color:var(--color-muted);font-size:var(--text-label);text-overflow:ellipsis;text-wrap:pretty;-webkit-box-orient:vertical;margin:0;line-height:1.5;display:-webkit-box;overflow:hidden}.tool-card-action{align-items:center;gap:var(--space-xs);color:var(--color-primary);font-size:var(--text-label);transition:color .16s var(--ease-out), transform .16s var(--ease-out);flex:none;font-weight:500;line-height:1.4;display:inline-flex}.tool-card-meta{justify-content:space-between;align-self:end;align-items:flex-end;gap:var(--space-sm);grid-area:2/2;min-width:0;display:flex}.tool-card:hover .tool-card-action{color:var(--color-primary-deep);transform:translateX(var(--space-xs))}.tools-empty{align-content:center;place-items:center;gap:var(--space-sm);min-height:15rem;margin-top:var(--space-xl);border-radius:var(--radius-panel);padding:var(--space-3xl) var(--space-xl);background:var(--color-surface);color:var(--color-muted);text-align:center;display:grid}.tools-empty[hidden]{display:none}.tools-empty h2{margin:var(--space-sm) 0 0;color:var(--color-primary-deep);font-family:var(--font-display);font-size:var(--text-content-title);font-weight:600;line-height:1.45}.tools-empty p{color:var(--color-ink);font-size:var(--text-body);margin:0}.tools-empty .button{margin-top:var(--space-md)}.tools-footer{justify-content:center;gap:var(--space-sm);padding:var(--space-2xl) var(--space-lg);color:var(--color-muted);font-family:var(--font-display);font-size:var(--text-label);text-align:center;line-height:1.4;display:flex}.tools-rail{gap:var(--space-lg);flex-direction:column;display:flex}.tool-rail-panel{min-width:0;padding:var(--space-xl)}.tool-rail-panel h2,.tools-dialog h2{color:var(--color-primary-deep);font-family:var(--font-display);font-size:var(--text-content-title);text-wrap:balance;margin:0;font-weight:600;line-height:1.45}.tools-panel-heading{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);display:flex}.panel-text-button{align-items:center;gap:var(--space-xs);border-radius:var(--radius-compact);min-height:44px;padding-inline:var(--space-sm);color:var(--color-muted);font-size:var(--text-label);cursor:pointer;transition:color .16s var(--ease-out), background .16s var(--ease-out);background:0 0;border:0;font-weight:500;line-height:1.4;display:inline-flex}.panel-text-button:hover{background:var(--color-white);color:var(--color-primary)}.favorite-tools-list,.tool-update-list{margin:0;padding:0;list-style:none}.favorite-tools-list{gap:var(--space-sm);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.favorite-tools-list li[hidden]{display:none}.favorite-tools-list button{place-items:center;gap:var(--space-xs);border-radius:var(--radius-control);width:100%;min-height:64px;padding:var(--space-sm);color:var(--color-primary);cursor:pointer;transition:color .16s var(--ease-out), background .16s var(--ease-out), transform .16s var(--ease-out);background:0 0;border:0;display:grid}.favorite-tools-list button:hover{background:var(--color-white);color:var(--color-primary-deep);transform:translateY(-1px)}.favorite-tools-list span{color:var(--color-ink);font-size:var(--text-label);white-space:nowrap;font-weight:500;line-height:1.4}.favorite-tools-list .tool-favorite-cover{border:1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-line));border-radius:var(--radius-compact);background:var(--color-surface);object-fit:cover;width:2.75rem;height:2.75rem;box-shadow:0 4px 12px oklch(42% .08 255/.08)}.favorite-tools-empty{margin:var(--space-lg) 0 0;color:var(--color-muted);font-size:var(--text-body);text-wrap:pretty;line-height:1.6}.tool-update-list li{align-items:center;gap:var(--space-md);min-height:44px;color:var(--color-ink);font-size:var(--text-body);grid-template-columns:minmax(0,1fr) auto;display:grid}.tool-update-list li:before{content:"";width:var(--space-xs);height:var(--space-xs);background:var(--color-primary);border-radius:999px;grid-area:1/1;align-self:center}.tool-update-list li>span{min-width:0;text-overflow:ellipsis;white-space:nowrap;grid-area:1/1;padding-inline-start:var(--space-md);font-weight:500;overflow:hidden}.tool-update-list time{color:var(--color-muted);font-size:var(--text-label);font-variant-numeric:tabular-nums;font-weight:500;line-height:1.4}.recently-viewed-tool h2{margin-bottom:var(--space-md)}.recent-tool-entry{align-items:center;gap:var(--space-md);border-radius:var(--radius-control);width:100%;min-height:72px;padding:var(--space-sm);color:var(--color-primary);text-align:start;cursor:pointer;transition:color .16s var(--ease-out), background .16s var(--ease-out), transform .16s var(--ease-out);background:0 0;border:0;grid-template-columns:3.5rem minmax(0,1fr) auto;display:grid}.recent-tool-entry[hidden]{display:none}.recent-tool-entry:hover{background:var(--color-white);color:var(--color-primary-deep);transform:translateY(-1px)}.recent-tool-entry:active{transform:translateY(0)}.recent-tool-entry>img{border-radius:var(--radius-compact);object-fit:cover;width:3.5rem;height:3.5rem}.recent-tool-copy{gap:var(--space-xs);min-width:0;display:grid}.recent-tool-copy strong{color:var(--color-primary-deep);font-family:var(--font-display);font-size:var(--text-content-title);text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.45;overflow:hidden}.recent-tool-copy small{color:var(--color-muted);font-size:var(--text-label);text-overflow:ellipsis;white-space:nowrap;font-weight:500;line-height:1.4;overflow:hidden}.recent-tool-empty{min-height:72px;color:var(--color-muted);font-size:var(--text-body);text-wrap:pretty;margin:0;line-height:1.6}.tools-dialog{border-radius:var(--radius-panel);width:min(34rem,100% - 2rem);max-height:calc(100svh - 2rem);padding:var(--space-3xl);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-lift);border:0;position:relative;overflow:auto}.tools-dialog::backdrop{background:oklch(18% .04 255/.46)}.tools-dialog-close{top:var(--space-md);right:var(--space-md);position:absolute}.tools-dialog>p{margin:var(--space-md) 0 0;color:var(--color-ink);font-size:var(--text-body);text-wrap:pretty;line-height:1.7}.tool-dialog-kicker{margin-bottom:var(--space-xs);color:var(--color-primary);font-size:var(--text-label);font-weight:500;display:block}.tool-dialog-note{margin-top:var(--space-xl);border-radius:var(--radius-control);padding:var(--space-lg);background:var(--color-white)}.tool-dialog-note strong{color:var(--color-primary-deep);font-size:var(--text-label);font-weight:600}.tool-dialog-note p{margin:var(--space-xs) 0 0;color:var(--color-ink);font-size:var(--text-body);line-height:1.6}.tool-dialog-facts{gap:var(--space-sm);margin:var(--space-xl) 0 0;display:grid}.tool-dialog-facts>div{gap:var(--space-md);border-bottom:1px solid var(--color-line);padding-block:var(--space-sm);grid-template-columns:5rem minmax(0,1fr);display:grid}.tool-dialog-facts dt{color:var(--color-muted);font-size:var(--text-label)}.tool-dialog-facts dd{color:var(--color-ink);font-size:var(--text-label);margin:0}.tool-dialog-facts dd[data-tool-dialog-tags]{gap:var(--space-xs);flex-wrap:wrap;display:flex}.tool-dialog-tag{--tool-tag-color:var(--color-primary);border:1px solid color-mix(in srgb, var(--tool-tag-color) 42%, var(--color-line));padding:.15rem var(--space-sm);background:color-mix(in srgb, var(--tool-tag-color) 12%, var(--color-white));color:var(--color-ink);border-radius:999px}.dialog-actions a.button{justify-content:center;align-items:center;gap:var(--space-sm);text-decoration:none;display:inline-flex}.favorite-options{gap:var(--space-sm);display:grid}.favorites-dialog fieldset{min-width:0;margin:var(--space-xl) 0 0;border:0;padding:0}.favorite-options label{align-items:center;gap:var(--space-md);border-radius:var(--radius-control);min-height:48px;padding-inline:var(--space-md);background:var(--color-white);color:var(--color-ink);font-size:var(--text-body);cursor:pointer;display:flex}.favorite-options input{width:1.125rem;height:1.125rem;accent-color:var(--color-primary)}.favorite-options label:has(input:disabled){opacity:.58;cursor:not-allowed}.favorite-count{margin:var(--space-md) 0 0;color:var(--color-muted);font-size:var(--text-label);font-variant-numeric:tabular-nums}.dialog-actions{justify-content:flex-end;gap:var(--space-md);margin-top:var(--space-xl);flex-wrap:wrap;display:flex}.dialog-actions .button{min-width:9rem;min-height:44px;font-size:var(--text-label);cursor:pointer;font-weight:500}.tools-empty .button{font-size:var(--text-label);font-weight:500}@container tool-grid (width>=39rem){.tool-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=480px){.favorite-options{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=768px){.tools-shell{padding:var(--space-xl)}.tools-intro,.tools-browser{padding:var(--space-2xl)}.tools-browser{padding-inline:0}.tools-rail{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;display:grid}.tool-updates{grid-column:1/-1}}@media (width>=1024px){.tools-shell{gap:var(--space-xl);padding:0 var(--space-xl) var(--space-2xl) 0;grid-template-columns:minmax(150px,15%) minmax(0,1fr);display:grid}.tools-plaque{align-items:center;gap:var(--space-2xl);min-width:0;padding:var(--space-4xl) var(--space-xl) var(--space-3xl);color:oklch(94% .025 245);flex-direction:column;grid-area:1/1/span 2;display:flex}.tools-plaque>span{font-size:var(--text-content-title);line-height:1}.tools-plaque p{max-height:22rem;font-family:var(--font-display);font-size:var(--text-body);letter-spacing:.14em;writing-mode:vertical-rl;text-orientation:upright;margin:0;line-height:1.9}.tools-main-scroll{grid-area:1/2}.tools-intro,.tools-browser{box-shadow:none;background:0 0;border-radius:0}.tools-intro{padding:var(--space-3xl) var(--space-3xl) var(--space-xl)}.tools-browser{padding:0 var(--space-3xl) var(--space-2xl);margin-top:0}.tools-rail{gap:var(--space-xl);padding:0 var(--space-3xl) var(--space-2xl);grid-area:2/2;grid-template-columns:repeat(2,minmax(0,1fr))}.favorite-tools,.recently-viewed-tool{grid-column:auto}.tool-updates{grid-area:1/1/auto/-1}}@media (width>=1280px){html.tools-page,body.tools-page{overscroll-behavior:none;height:100%;overflow:hidden}.tools-scene{grid-template-rows:auto minmax(0,1fr);height:100svh;min-height:0;display:grid;overflow:hidden}.tools-shell{grid-template-columns:minmax(168px,12.6fr) minmax(0,56.8fr) minmax(360px,30.6fr);gap:0;min-height:0;padding:0;overflow:hidden}.tools-plaque{grid-area:1/1}.tools-main-scroll{overscroll-behavior-y:contain;-ms-overflow-style:none;scrollbar-width:none;min-height:0;scroll-padding-block:var(--space-xl);grid-area:1/2;overflow:hidden auto}.tools-rail{gap:var(--space-lg);min-height:0;padding:calc(var(--space-4xl) + var(--space-2xl)) var(--space-3xl) var(--space-xl) var(--space-xl);overscroll-behavior-y:contain;-ms-overflow-style:none;scrollbar-width:none;scroll-padding-block:var(--space-lg);flex-direction:column;grid-area:1/3;display:flex;overflow:hidden auto}.tool-rail-panel{width:min(100%,19rem);padding:var(--space-lg);margin-inline:auto}.tools-panel-heading{margin-bottom:var(--space-sm)}.favorite-tools-list{gap:var(--space-xs)}.favorite-tools-list button{min-height:52px}.tool-update-list li{min-height:36px}.tools-main-scroll::-webkit-scrollbar{width:0;height:0;display:none}.tools-rail::-webkit-scrollbar{width:0;height:0;display:none}.tools-intro{padding:var(--space-3xl) 0 var(--space-xl) calc(var(--space-4xl) + var(--space-2xl))}.tools-browser{padding:0 0 var(--space-2xl) calc(var(--space-4xl) + var(--space-2xl))}.tools-footer{padding-bottom:var(--space-xl)}}@media (width<=479px){.tools-shell{gap:var(--space-md)}.tools-intro{padding:var(--space-lg)}.tool-card{height:8.5rem;padding:var(--space-md);grid-template-columns:5rem minmax(0,1fr)}.tool-card-image{width:5rem;height:5rem}.tool-card-copy h3,.tool-card-copy p{overflow-wrap:anywhere}.tool-rail-panel,.tools-dialog{padding:var(--space-lg)}.tools-dialog{padding-top:var(--space-3xl)}.dialog-actions{flex-direction:column;align-items:stretch}.dialog-actions .button{width:100%}.tools-footer{flex-direction:column;align-items:center}}@media (width<=360px){.tools-shell{padding-inline:var(--space-md)}.tools-intro,.tools-browser{padding:var(--space-lg)}.tools-browser{padding-inline:0}.tool-card{height:auto;min-height:7.5rem;padding:var(--space-md);grid-template-columns:4rem minmax(0,1fr)}.tool-card-image{width:4rem;height:4rem}}@media (hover:none){.tool-card:hover{box-shadow:var(--shadow-low);transform:none}.tool-card:hover .tool-card-action{transform:none}}@media (prefers-reduced-motion:reduce){.tools-search-control,.tool-card,.tool-card-action,.panel-text-button,.favorite-tools-list button,.recent-tool-entry{transition:none}.tools-loading>span{animation:none}}@media (forced-colors:active){.tools-intro,.tools-browser,.tool-rail-panel,.tool-card,.tools-empty,.tools-dialog,.tool-dialog-note,.favorite-options label{border:1px solid canvastext}}