@view-transition{navigation:auto}@layer pages{.regex-builder-page{--spacing-3xs: .2rem;--height-pattern-item: 2rem;--max-height-pattern-input: 6rem;--max-height-pattern-list-mobile: 20rem;--max-height-pattern-list-tablet: 25rem;--accent-ghost: color-mix(in srgb, var(--accent-bright) 8%, transparent);--accent-subtle: color-mix(in srgb, var(--accent-bright) 20%, transparent);--accent-shadow: color-mix(in srgb, var(--accent-bright) 30%, transparent);--accent-shadow-strong: color-mix(in srgb, var(--accent-bright) 40%, transparent);--accent-glow: color-mix(in srgb, var(--accent-bright) 30%, transparent);--card-border-custom: color-mix(in srgb, var(--text-primary-whiter) 12%, transparent);--bg-inverse: var(--text-primary-whiter);--text-inverse-dark: var(--text-primary-black);--border-print: var(--text-primary-black);--text-muted: var(--text-disabled);--text-accent: var(--accent-bright);background:radial-gradient(circle at bottom,var(--bg-section-night-start) 0%,var(--bg-section-night-end) 100%);background-attachment:fixed}.hero-title{font-family:var(--font-mono)}.hero-subtitle{font-family:var(--font-sans)}.concepts-grid{display:grid;gap:var(--spacing-xs);grid-template-columns:1fr}.concept-card{background:transparent;border:var(--border-width-thin) solid var(--border-color);border-inline-start:var(--border-width-thick) solid var(--accent);border-radius:var(--border-radius-sm);padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);transition:var(--transition-normal);display:flex;align-items:flex-start;gap:var(--spacing-xs)}.concept-card h3{color:var(--text-primary);margin-block:0 var(--spacing-3xs);margin-inline:0;font-size:clamp(.9rem,.88rem + .15vw,1rem);display:flex;align-items:center;gap:var(--spacing-2xs);font-weight:700;flex-wrap:nowrap}.concept-card h3 svg{width:1rem;height:1rem;color:var(--accent);flex-shrink:0}.concept-card p{color:var(--text-secondary);font-size:clamp(.8rem,.78rem + .15vw,.88rem);line-height:1.4;margin:0}.concept-card code{background:var(--bg-secondary);color:var(--text-accent);padding-block:.15em;padding-inline:.35em;border-radius:.2rem;font-size:.85em;font-weight:600}@media(width>=48rem){.concepts-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.concept-card{padding:var(--spacing-sm) var(--spacing-sm)}}@media(width>=64rem){.concepts-grid{grid-template-columns:repeat(2,1fr)}.concept-card{flex-direction:column;padding:var(--spacing-sm)}.concept-card h3{flex-wrap:wrap}}.section-title{color:var(--text-primary);margin-block:var(--spacing-lg) var(--spacing-sm);padding-block-end:var(--spacing-xs);border-block-end:var(--border-width-medium) solid var(--border-color);font-weight:600}.pattern-display{margin-block-end:var(--spacing-md);padding:var(--spacing-md);background:var(--surface-elevated);border:var(--border-width-thin) solid var(--border-color);border-radius:var(--border-radius-card);box-shadow:var(--shadow-elevated)}.workspace-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-sm);margin-block-end:var(--spacing-md)}.pattern-display h2{color:var(--text-primary);font-weight:600;margin:0}.pattern-input-row{margin-block-end:var(--spacing-xs)}.pattern-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center;justify-content:space-between;margin-block-end:var(--spacing-lg)}.pattern-actions__group{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center}#test-pattern{flex-shrink:0}#copy-pattern .btn{min-block-size:var(--hit-target-min);padding-inline:18px;font-size:var(--font-size-sm)}.pattern-code{font-size:clamp(1rem,.9rem + .3vw,1.25rem);color:var(--accent-bright);word-break:break-all;display:block;min-block-size:var(--height-pattern-item);line-height:1.5}.pattern-input{inline-size:100%;max-block-size:var(--max-height-pattern-input);overflow-y:auto;resize:none;background:var(--bg-darker);border:var(--border-width-thin) solid var(--border-color);border-radius:var(--border-radius-xs);outline:none;padding:var(--spacing-xs) var(--spacing-sm);caret-color:var(--accent);transition:var(--transition-fast)}.pattern-input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-color) 20%,transparent)}.pattern-input::placeholder{color:var(--text-muted);opacity:.7}.pattern-validation-msg{font-size:var(--font-size-xs);color:var(--warning-color);margin-block:var(--spacing-xs) 0;display:flex;align-items:center;gap:var(--spacing-2xs)}.pattern-validation-msg[hidden]{display:none}.pattern-validation-msg code{background:var(--bg-secondary);padding-inline:var(--spacing-2xs);border-radius:var(--border-radius-xs)}.validation-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:1.25em;block-size:1.25em;background:var(--warning-color);color:var(--bg-primary);border-radius:50%;font-weight:700;font-size:.85em;flex-shrink:0}.pattern-input--invalid{border-color:var(--warning-color)}.pattern-input--invalid:focus-visible{border-color:var(--warning-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--warning-color) 20%,transparent)}#pattern-breakdown{margin-block-end:var(--spacing-md)}.flavor-export-section h3{color:var(--text-primary);margin-block-end:var(--spacing-sm);font-weight:600}.flavor-export-section{margin-block-start:var(--spacing-md);padding-block-start:var(--spacing-md);border-block-start:var(--border-width-thin) solid var(--border-color)}.pattern-parts-list{background:var(--bg-darker);border:var(--border-width-thin) solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);max-block-size:var(--max-height-pattern-list-mobile);overflow-y:auto;content-visibility:auto;contain-intrinsic-size:auto 20rem}.pattern-part-row{display:flex;align-items:center;gap:var(--spacing-xs);padding-block:var(--spacing-2xs);padding-inline:var(--spacing-xs);margin-block-end:var(--spacing-3xs);background:var(--bg-content);border-inline-start:var(--border-width-thick) solid var(--accent);border-radius:var(--border-radius-xs);font-size:var(--font-size-md);line-height:1.6;animation:slideIn .3s ease-out}.pattern-part-row__remove{margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--hit-target-min);min-inline-size:var(--hit-target-min);background:transparent;color:var(--text-dim);border:var(--border-width-thin) solid transparent;border-radius:var(--border-radius-xs);font-family:inherit;font-size:var(--font-size-lg);line-height:1;cursor:pointer;transition:var(--transition-fast);flex-shrink:0}.pattern-part-row__remove:focus-visible{outline:var(--border-width-medium) solid var(--focus-color);outline-offset:.125rem;box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-color) 20%,transparent)}@media(prefers-reduced-motion:reduce){.pattern-part-row{animation:none}}.pattern-atom{color:var(--accent-bright);background:var(--bg-primary);padding-block:.125rem;padding-inline:.375rem;border-radius:var(--border-radius-xs);font-weight:600;flex-shrink:0}.pattern-description{color:var(--text-secondary);font-size:clamp(.8rem,.77rem + .15vw,.9rem)}.placeholder-text{color:var(--text-dim);font-style:italic;text-align:center;padding:var(--spacing-sm)}.regex-builder-page .container{max-width:var(--chrome-max-width);border:var(--border-width-thin) solid color-mix(in srgb,var(--accent-bright) 18%,transparent);box-shadow:none}.pattern-parts-list,.pattern-validation-msg{user-select:text}#pattern-breakdown[open] .pattern-parts-list{border-radius:0 0 var(--border-radius-sm) var(--border-radius-sm);border-block-start:none}@media(width>=80rem){.regex-builder-page .container{width:80%}}@media(width>=64rem){.builder-columns{display:grid;grid-template-columns:minmax(20rem,3fr) minmax(0,2fr);gap:var(--spacing-lg);align-items:start}.builder-palette{grid-column:2;grid-row:1}.pattern-display{grid-column:1;grid-row:1;position:sticky;top:1.8rem;max-block-size:calc(100vh - 8rem);max-block-size:calc(100svh - 8rem);overflow-y:auto}}.flags-section{padding:var(--spacing-sm);border-block-start:var(--border-width-thin) solid var(--border-color)}.pattern-parts__hint{color:var(--text-dim);font-style:italic;text-align:center;padding:var(--spacing-sm);margin:0}.flags-options{display:grid;grid-template-columns:1fr;gap:var(--spacing-xs)}.flag-option{display:flex;align-items:center;min-block-size:var(--hit-target-min);padding-block:var(--spacing-2xs);padding-inline:var(--spacing-xs);background:var(--bg-darker);border:var(--border-width-thin) solid var(--border-color);border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition-fast)}.flag-option:has(input:focus-visible){outline:var(--border-width-medium) solid var(--focus-color);outline-offset:.125rem;box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-color) 20%,transparent)}.flag-option input[type=checkbox]{block-size:1.125rem;inline-size:1.125rem;margin-inline-end:var(--spacing-xs);cursor:pointer;accent-color:var(--accent)}.flag-label{color:var(--text-secondary);font-size:clamp(.9rem,.85rem + .2vw,.98rem);line-height:1.4}.flag-label strong{color:var(--text-primary);font-weight:700}.pattern-blocks{padding-block-end:var(--spacing-md)}.block-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:var(--spacing-2xs)}.accordion--compact .block-grid{padding:var(--spacing-sm);border-block-start:var(--border-width-medium) solid var(--border-color)}.block-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-3xs);padding:var(--spacing-2xs);min-block-size:var(--hit-target-min);background:var(--bg-darker);border:var(--border-width-thin) solid var(--border-color);border-radius:var(--border-radius-sm);color:var(--text-secondary);font-family:inherit;cursor:pointer;transition:var(--transition-fast);position:relative;overflow:hidden}.block-btn:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;transform:translate(-100%);inline-size:100%;block-size:100%;background:linear-gradient(90deg,transparent,var(--accent-subtle),transparent);transition:transform .5s var(--ease-out)}.block-btn:focus-visible{outline:var(--border-width-medium) solid var(--focus-color);outline-offset:.125rem;box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-color) 20%,transparent)}.block-btn:active{transform:translateY(0);box-shadow:0 .125rem .375rem var(--accent-subtle)}.block-pattern{font-size:clamp(.9rem,.85rem + .2vw,1.05rem);font-weight:700;color:var(--accent-bright);text-shadow:0 0 .5rem var(--accent-glow)}.block-desc{font-size:clamp(.72rem,.7rem + .1vw,.82rem);color:var(--text-secondary);text-align:center;line-height:1.2}.block-btn-custom{border-color:var(--card-border-custom);border-style:dashed}.block-btn-custom .block-pattern:after{content:" …";color:var(--text-secondary);font-weight:400;opacity:.7}.block-btn-preset{border-color:var(--card-border-custom)}.block-btn-preset .block-pattern{font-size:clamp(1.4rem,1.35rem + .2vw,1.6rem)}.block-btn-preset .block-icon{width:1.5rem;height:1.5rem;color:var(--accent-bright)}.block-btn-wrap{border-color:var(--card-border-custom)}.component-btn--clicked{border-color:var(--accent)!important;transform:scale(.95);transition:all .15s ease}.component-btn--success{background:var(--accent-dim);border-color:var(--accent);color:var(--text-primary);font-weight:600}.pattern-parts-list::-webkit-scrollbar,.pattern-input::-webkit-scrollbar{inline-size:.5rem;block-size:.5rem}.pattern-parts-list::-webkit-scrollbar-track,.pattern-input::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:var(--border-radius-xs)}.pattern-parts-list::-webkit-scrollbar-thumb,.pattern-input::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:var(--border-radius-xs)}.pattern-parts-list::-webkit-scrollbar-thumb:hover,.pattern-input::-webkit-scrollbar-thumb:hover{background:var(--accent)}@media(width>=48rem){.flags-options{grid-template-columns:repeat(2,1fr)}.block-grid{grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:var(--spacing-2xs)}.block-btn{min-block-size:var(--hit-target-min);padding:var(--spacing-2xs)}}@media(width>=64rem){.flags-options{grid-template-columns:repeat(2,1fr)}.block-grid{grid-template-columns:repeat(auto-fill,minmax(6rem,1fr))}.pattern-parts-list{max-block-size:var(--max-height-pattern-list-tablet)}}@media(width>=80rem){.block-grid{grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr))}.flags-options{grid-template-columns:repeat(2,1fr)}}@keyframes slideIn{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.block-btn:active .block-pattern{animation:pulse .3s ease-out}@media(prefers-reduced-motion:reduce){.block-btn:before{display:none}.block-btn:active .block-pattern{animation:none}}@media(prefers-contrast:more){.block-btn{border-width:var(--border-width-medium)}.pattern-code{text-shadow:none}.flag-option,.pattern-display,.pattern-parts-list{border-width:var(--border-width-medium)}}@media(forced-colors:active){.block-btn:before{display:none}.block-btn-preset{outline:var(--border-width-thin) solid ButtonText;outline-offset:-.125rem}.flag-option{border-width:var(--border-width-medium)}.pattern-input{border:1px solid ButtonText;background:Canvas;color:CanvasText}.pattern-display,.pattern-parts-list{border:1px solid CanvasText}.validation-icon{background:ButtonText;color:ButtonFace}}@media(prefers-reduced-transparency:reduce){.regex-builder-page .container{border-color:var(--accent-bright)}}@media print{cyber-back-to-top,.pattern-actions{display:none}.regex-builder-page{background:var(--bg-inverse);color:var(--text-inverse-dark)}.pattern-code{color:var(--text-inverse-dark);border:var(--border-width-thin) solid var(--border-print)}}@media(hover:hover)and (pointer:fine){.concept-card:hover{border-inline-start-color:var(--accent-bright);background:var(--bg-secondary);box-shadow:0 .0625rem .25rem var(--accent-ghost)}.pattern-part-row__remove:hover{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-primary)}.pattern-input:hover{border-color:var(--accent-dim)}.flag-option:hover{background:color-mix(in srgb,var(--text-primary-whiter) 5%,var(--bg-darker));border-color:color-mix(in srgb,var(--accent-bright) 40%,transparent)}.block-btn:hover:before{transform:translate(100%)}.block-btn-custom:hover .block-pattern:after{opacity:1;color:var(--accent-bright)}.block-btn:hover{background:color-mix(in srgb,var(--text-primary-whiter) 6%,var(--bg-darker));border-color:color-mix(in srgb,var(--accent-bright) 40%,transparent);box-shadow:0 .125rem .5rem var(--accent-shadow);transform:translateY(-.0625rem)}}@media(width>=80rem)and (hover:hover)and (pointer:fine){.concept-card:hover{background:var(--bg-secondary)}}.initialization-error{text-align:center}}