.app{--app-rail-w: 76px;--app-panel-w: clamp(312px,30%,380px); --app-rail: var(--c-primary);--app-rail-hover: color-mix(in srgb,var(--c-on-primary) 10%,var(--c-primary));--app-rail-on: color-mix(in srgb,var(--c-on-primary) 18%,var(--c-primary));--app-rail-ink: var(--c-primary-soft);--app-rail-mark: var(--c-grass); --app-glass: color-mix(in srgb,var(--c-surface) 94%,transparent); --app-danger-ink: color-mix(in srgb,var(--c-danger) 70%,var(--c-ink)); --app-inset-top: 0px;--app-inset-right: 0px;--app-inset-bottom: 0px;position: relative;isolation: isolate;margin: var(--sp-3) 0 28px;padding: 0;gap: 0;background: var(--c-surface);border: 1px solid var(--c-line);border-radius: var(--r-lg);box-shadow: var(--sh-1)} .app.layout::before,.app.layout::after{content: none}.app > *{min-width: 0} .app [hidden]{display: none !important} .app-stage{position: relative;overflow: hidden;isolation: isolate;margin: 0;background-color: var(--c-surface-2); background-image: radial-gradient(circle,color-mix(in srgb,var(--c-ink) 14%,transparent) 1px,transparent 1.5px);background-size: 16px 16px;background-position: 8px 8px} .app[data-app-stage="surface"] .app-stage{background: var(--c-surface)} .app-stage-inset{position: absolute;inset: var(--app-inset-top) var(--app-inset-right) var(--app-inset-bottom) 0;min-width: 0;min-height: 0} .app-bar{display: flex;flex-wrap: wrap;align-items: center;gap: var(--sp-2) var(--sp-4);margin: 0;padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);background: var(--app-glass);border-bottom: 1px solid var(--c-line)} .app-heading{flex: 2 1 260px;min-width: 0;max-width: 480px}.app-bar .app-heading .tool-title{margin: 0;font-size: 25px;line-height: 1.05;overflow-wrap: anywhere}.app-bar .app-heading .tool-answer{max-width: none;margin: 3px 0 0;color: var(--c-ink-2);font-size: var(--fs-xs);line-height: 1.35}html:is(:lang(zh),:lang(ja),:lang(ko),:lang(ru)) .app-bar .app-heading .tool-title{font-size: 20px;font-weight: 600}.app-bar-controls{flex: 1 1 auto;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: var(--sp-2);min-width: 0} .app-bar .toggle,.app-dock .toggle{margin-top: 0;box-shadow: var(--sh-1)}.app-bar .btn,.app-dock .btn,.app-toasts .btn,.app-panel-head .btn{margin-top: 0} .app-stats{flex: 0 1 auto;display: flex;flex-wrap: wrap;min-width: 0;max-width: 100%;margin: 0;padding: 0;overflow: hidden;background: var(--c-surface);border: 1px solid var(--c-line);border-radius: var(--r-md)}.app .app-stats > *{flex: 1 1 auto;display: flex;flex-direction: column;justify-content: center;min-width: 0;height: auto;margin: 0;padding: var(--sp-1) var(--sp-3);border: 0;background: var(--c-surface);box-shadow: -1px 0 0 var(--c-line),0 -1px 0 var(--c-line);color: var(--c-ink-2);font-size: var(--fs-xs);line-height: 1.25}.app .app-stats > .stat::before{content: none} .app .app-stats > .stat:nth-child(n){border: 0} .app .app-stats b,.app .app-stats strong{display: block;color: var(--c-ink);font: 600 17px/1.15 var(--mono);font-variant-numeric: tabular-nums;white-space: normal;overflow-wrap: normal} .app-toasts{display: flex;flex-direction: column;align-items: center;gap: 6px;min-width: 0;margin: 0;pointer-events: none}.app-toasts > *{max-width: min(560px,100%);margin: 0;pointer-events: auto} .app-toasts > [role="status"],.app-toasts > [aria-live="polite"]{padding: 7px 14px;border-radius: var(--r-pill);background: color-mix(in srgb,var(--c-ink) 92%,transparent);color: var(--c-on-primary);font-size: var(--fs-sm);line-height: 1.4;overflow-wrap: anywhere;box-shadow: var(--sh-2);transition: opacity .25s ease}.app-toasts > [role="status"] a,.app-toasts > [aria-live="polite"] a{color: inherit}.app-toasts > [role="alert"]:not(.alert){padding: 10px 14px;border-left: 3px solid var(--c-danger);border-radius: var(--r-sm);background: var(--c-danger-soft);color: var(--app-danger-ink);font-size: var(--fs-sm);line-height: 1.45;overflow-wrap: anywhere;box-shadow: var(--sh-2)}.app-toasts > .alert{box-shadow: var(--sh-2)} .app .app-toasts > :empty{padding: 0;border: 0;background: none;box-shadow: none} .app-dock{display: flex;flex-wrap: wrap;align-items: center;gap: var(--sp-2) var(--sp-3);min-width: 0;margin: 0;padding: var(--sp-2) var(--sp-3);background: var(--app-glass);border-top: 1px solid var(--c-line)} .app-rail{display: flex;gap: var(--sp-1);min-width: 0;margin: 0}.app-tab{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: var(--sp-1);min-width: 0;min-height: 56px;margin: 0;padding: 7px 2px 6px;border: 0;border-radius: var(--r-sm);background: transparent;color: inherit;font: 600 var(--fs-xs)/1.15 var(--font);letter-spacing: -0.01em;text-align: center; overflow-wrap: normal;hyphens: auto;cursor: pointer;touch-action: manipulation}.app-tab-icon{flex: none;width: 24px;height: 24px;fill: currentColor;shape-rendering: crispEdges}.app-tab:focus-visible{outline: 3px solid var(--c-focus);outline-offset: -3px} .app-panel{position: relative;display: flex;flex-direction: column;min-width: 0;min-height: 0;margin: 0;background: var(--c-surface)}.app-panel-head{display: flex;align-items: center;gap: var(--sp-2);padding: var(--sp-2) var(--sp-2) 0 var(--sp-4)}.app-panel-title{flex: 1 1 auto;min-width: 0;margin: var(--sp-1) 0 2px;color: var(--c-ink);font: 400 28px/1.05 var(--tool-display);font-synthesis: none;letter-spacing: 0;text-wrap: balance;overflow-wrap: anywhere}html:is(:lang(zh),:lang(ja),:lang(ko),:lang(ru)) .app-panel-title{font-size: 21px;font-weight: 600} .app-panel-close{position: relative;flex: none;width: 44px;height: 44px;margin: 0 0 0 auto;padding: 0;overflow: hidden;border: 1px solid transparent;border-radius: var(--r-sm);background: var(--c-surface);color: var(--c-ink-2);font-size: 0;line-height: 0;cursor: pointer}.app-panel-close::before,.app-panel-close::after{content: "";position: absolute;left: 50%;top: 50%;width: 16px;height: 2px;margin: -1px 0 0 -8px;border-radius: 1px;background: currentColor;transform: rotate(45deg)}.app-panel-close::after{transform: rotate(-45deg)}.app-panel-close:has(svg)::before,.app-panel-close:has(svg)::after{content: none}.app-panel-close > svg{width: 18px;height: 18px}.app-panel-close:hover{background: var(--c-primary-soft);color: var(--c-ink)}.app-panel-scroll{flex: 1 1 auto;min-height: 0;padding: var(--sp-1) var(--sp-4) var(--sp-4)}.app-section{margin: 0} @media (min-width: 861px){.app{display: grid;grid-template-columns: var(--app-rail-w) minmax(0,1fr) var(--app-panel-w);grid-template-rows: auto minmax(0,1fr) auto;height: calc(100vh - var(--app-top,180px) - 16px);height: calc(100dvh - var(--app-top,180px) - 16px);min-height: 560px;overflow: hidden;overflow: clip} .app-rail{grid-column: 1;grid-row: 1 / -1;flex-direction: column;padding: 10px 6px;overflow-x: hidden;overflow-y: auto;scrollbar-width: none;background: var(--app-rail)}.app-stage{grid-column: 2 / -1;grid-row: 1 / -1;z-index: 0;min-height: 0}.app-bar{grid-column: 2 / -1;grid-row: 1;z-index: 3;-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px)}.app-toasts{grid-column: 2;grid-row: 2;z-index: 2;align-self: end;padding: 0 var(--sp-3) 10px}.app[data-app-panel="closed"] .app-toasts{grid-column: 2 / -1}.app-dock{grid-column: 2 / -1;grid-row: 3;z-index: 4;-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px)}.app-panel{grid-column: 3;grid-row: 2;z-index: 3;align-self: start;max-height: calc(100% - 24px);margin: var(--sp-3) var(--sp-3) var(--sp-3) 0;border: 1px solid var(--c-line);border-radius: var(--r-lg);box-shadow: var(--sh-3)}.app-panel-scroll{overflow: auto;overscroll-behavior: contain} :where(.app) > :where(:not(.app-bar,.app-stage,.app-toasts,.app-dock,.app-rail,.app-panel)){grid-column: 2;grid-row: 2;z-index: 2;align-self: start;justify-self: start;max-width: calc(100% - 24px);margin: var(--sp-2) var(--sp-3) 0} .app-tab{min-height: 58px;color: var(--app-rail-ink)}.app-tab:hover{background: var(--app-rail-hover);color: var(--c-on-primary)}.app-tab[aria-expanded="true"]{background: var(--app-rail-on);color: var(--c-on-primary)}.app-tab[aria-selected="true"]::before{content: "";position: absolute;left: -6px;top: 12px;bottom: 12px;width: 3px;border-radius: 0 var(--r-pill) var(--r-pill) 0;background: var(--app-rail-mark)} .app-tab:focus-visible{outline-color: var(--c-accent);box-shadow: inset 0 0 0 6px var(--app-rail)} .app-toasts > [data-app-toast="faded"]:is([role="status"],[aria-live="polite"]){opacity: 0;pointer-events: none}}@media (min-width: 861px) and (max-width: 1100px){.app-bar .app-heading .tool-answer{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden}} @media (max-width: 860px){ .app{display: flex;flex-direction: column;overflow: hidden;overflow: clip}.app-bar{padding: 10px var(--sp-3)}.app-heading{flex: 1 1 100%;max-width: none}.app-bar .app-heading .tool-title{font-size: 24px}.app-bar-controls{justify-content: flex-start}.app-stats{flex: 1 1 100%;display: grid;grid-template-columns: repeat(auto-fit,minmax(min(132px,100%),1fr))}.app .app-stats b,.app .app-stats strong{white-space: normal;overflow-wrap: anywhere}.app-stage{flex: none;height: 50vh;height: 50svh;min-height: 280px;max-height: 560px}.app-toasts{align-items: stretch;padding: var(--sp-2) var(--sp-3) 0}.app-toasts > *{max-width: none}.app-toasts > [role="status"],.app-toasts > [aria-live="polite"]{border-radius: var(--r-sm);transition: none}.app-dock{padding: var(--sp-2) var(--sp-3) var(--sp-3);background: var(--c-surface);border-top: 0} .app-rail{gap: 2px;padding: var(--sp-1);overflow-x: auto;overflow-y: hidden;overscroll-behavior-x: contain;scrollbar-width: thin;background: var(--c-surface-2);border-block: 1px solid var(--c-line)}.app-tab{flex: 1 0 64px;padding: 6px var(--sp-1);color: var(--c-ink)}.app-tab:hover{background: var(--c-primary-soft);color: var(--c-ink)}.app-tab[aria-expanded="true"]{background: var(--c-surface);color: var(--c-primary);box-shadow: inset 0 -3px 0 var(--c-primary)}.app-panel-head{padding: var(--sp-2) var(--sp-3) 0}.app-panel-scroll{padding: var(--sp-1) var(--sp-3) var(--sp-4)} .app-panel-close{display: none}}@media (forced-colors: active){.app-panel-close{width: auto;padding: 0 var(--sp-3);font-size: var(--fs-sm);line-height: 1.2}.app-panel-close::before,.app-panel-close::after{content: none}}@media (prefers-reduced-motion: reduce){.app-toasts > *{transition: none}}@media print{.app{--app-inset-top: 0px !important;--app-inset-right: 0px !important;--app-inset-bottom: 0px !important;display: block;height: auto;min-height: 0;margin: 0;overflow: visible;border: 0;box-shadow: none}.app-rail,.app-dock,.app-toasts,.app-bar-controls,.app-panel-head{display: none !important}.app-bar{background: none;border: 0;-webkit-backdrop-filter: none;backdrop-filter: none}.app-stage{height: 70vh;break-inside: avoid;background: var(--c-surface)}.app .app-panel[hidden],.app .app-section[hidden]{display: block !important}.app-panel{display: block;max-height: none;margin: 0;border: 0;box-shadow: none}.app-panel-scroll{overflow: visible;padding: 0}.app-section + .app-section{margin-top: var(--sp-4);padding-top: var(--sp-4);border-top: 1px solid var(--c-line)}}