*{box-sizing:border-box}body{margin:0}button{cursor:pointer}label{display:block}footer{padding:16px 0;border-top:1px solid;text-align:center}[hidden]{display:none!important}
/* Warm, restrained regex workbench. */
.regex-page {--slate:#3d4a5c;--soft:rgba(61,74,92,.7);--edge:rgba(61,74,92,.1);font-family:'Pretendard','Apple SD Gothic Neo','PingFang SC',system-ui,sans-serif;max-width:1040px;width:100%;margin:auto;padding:48px 32px;color:var(--slate);background:#faf9f7;min-height:100vh;font-weight:400;line-height:1.75}
body:has(#regex-page:not([hidden])) {background:#faf9f7;color:#3d4a5c}
.regex-page * {letter-spacing:0;text-transform:none}
.regex-header,.regex-brand,.regex-label,.regex-expression {display:flex;align-items:center;gap:24px}
.regex-header {justify-content:space-between;padding-bottom:32px;border-bottom:1px solid var(--edge)}
.regex-logo {display:grid;place-items:center;background:rgba(168,197,184,.22);color:var(--slate);border-radius:16px;font-size:26px;font-weight:500;width:48px;height:48px}
.regex-brand strong {font-size:20px;font-weight:500}.regex-tag,.regex-engine {font-size:12px;color:var(--soft)}
.regex-intro {margin:64px 0 48px}.regex-intro .eyebrow {display:inline-block;background:rgba(212,165,165,.12);border-radius:999px;padding:6px 14px;color:var(--slate);font-size:12px;font-weight:500}.regex-intro h1 {font-size:34px;font-weight:300;line-height:1.3;margin:24px 0;color:var(--slate)}.regex-intro>p:last-child {color:var(--soft);font-size:14px}
.regex-card {border:1px solid var(--edge);background:#fff;border-radius:24px;overflow:hidden;margin:0;padding:32px;box-shadow:0 2px 8px rgba(61,74,92,.04);min-width:0}
.regex-label {justify-content:space-between;font-size:14px;margin-bottom:24px}.regex-label h2 {font-size:16px;font-weight:400;margin:0;color:var(--slate)}.regex-label span {color:var(--soft);font-size:12px}
.regex-expression {color:#b9b08a;gap:12px}.regex-page .regex-expression input {background:#fff;border:1px solid rgba(61,74,92,.12);color:var(--slate);min-width:0;border-radius:16px;padding:12px 18px;font:400 14px/1.75 'Pretendard','PingFang SC',system-ui,sans-serif;box-shadow:none}.regex-expression #regex-pattern {flex:1}.regex-expression #regex-flags {width:60px;padding:12px;text-align:center}.regex-page .regex-expression .primary {background:#3d4a5c;color:#faf9f7;border:0;border-radius:16px;font-size:14px;font-weight:400;white-space:nowrap;padding:14px 24px;box-shadow:none;transition:background .4s ease-out,transform .4s ease-out}.regex-page .regex-expression .primary:hover {background:#4b596c}.regex-page .regex-expression .primary:active {background:#344050;transform:scale(.99)}
.regex-page input:focus-visible,.regex-page textarea:focus-visible,.regex-page button:focus-visible {outline:3px solid rgba(212,165,165,.3);outline-offset:3px;border-color:rgba(61,74,92,.4)}
.regex-hint {margin:24px 0 0;font-size:12px;color:var(--soft)}
.regex-workbench {display:grid;grid-template-columns:5fr 7fr;gap:24px;margin-top:24px}.regex-card textarea {display:block;resize:vertical;min-height:240px;width:100%;background:#fff;border:1px solid rgba(61,74,92,.12);border-radius:16px;padding:18px;color:var(--slate);font:400 14px/1.75 'Pretendard','PingFang SC',system-ui,sans-serif}.regex-bottom {padding-top:24px;color:var(--soft);font-size:12px}.regex-results {white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:24px;border-radius:16px;background:rgba(168,197,184,.1);max-height:320px;min-height:240px;overflow:auto;font:400 14px/1.75 'Pretendard','PingFang SC',system-ui,sans-serif;color:var(--slate)}#regex-status {margin:0 0 16px;color:var(--soft);font-size:13px}#regex-status:empty {display:none}
.regex-reference {margin-top:64px}.regex-reference h2 {font-size:16px;font-weight:400;color:var(--slate);margin-bottom:24px}.regex-reference>div {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;color:var(--soft);font-size:12px}.regex-reference code {font-family:inherit;font-weight:500;color:var(--slate);background:rgba(232,212,184,.22);border-radius:8px;padding:4px 8px;margin-right:8px}.regex-page footer {color:var(--soft);border-color:var(--edge);margin-top:64px;font-size:12px}
@media(max-width:680px){.regex-page{padding:32px 20px}.regex-tag,.regex-engine{display:none}.regex-intro{margin:48px 0 32px}.regex-intro h1{font-size:26px}.regex-workbench{grid-template-columns:minmax(0,1fr)}.regex-card{padding:24px}.regex-expression{flex-wrap:wrap;gap:8px}.regex-expression #regex-pattern{padding:12px;font-size:12px}.regex-expression .primary{width:100%}.regex-reference>div{grid-template-columns:repeat(2,minmax(0,1fr))}.regex-reference{margin-top:48px}}
@media(prefers-reduced-motion:reduce){.regex-page *{transition:none!important;animation:none!important}}