.keyflip-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}.keyflip-hero h1,.keyflip-page h2{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:600}.keyflip-mark{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-size:18px;font-weight:650}.keyflip-mark img{width:48px;height:48px}.keyflip-visual{display:grid;place-items:center;gap:24px;padding:52px 24px;border:1px solid var(--maker-line);border-radius:22px;background:radial-gradient(ellipse at 80% 0,light-dark(#eee7fa,#302a41),transparent 70%),var(--maker-card)}.keyflip-visual-line{display:flex;gap:14px;align-items:center;font-size:clamp(22px,3vw,31px);font-weight:550}.keyflip-visual-line del{text-decoration:none;color:var(--maker-muted)}.keyflip-visual-line b{font-weight:600}.keyflip-arrow{color:var(--maker-muted)}.keyflip-lang{display:flex;gap:8px}.keyflip-lang span{border:1px solid var(--maker-line);border-radius:999px;padding:7px 17px;font-size:13px}.keyflip-lang span:last-child{background:var(--maker-accent);color:light-dark(#fff,#152435);border-color:transparent}.keyflip-visual small{color:var(--maker-muted);font-size:12px;text-align:center}.keyflip-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-block:60px}.keyflip-features p{color:var(--maker-muted)}.keyflip-play{scroll-margin-top:100px;margin-block:64px}.keyflip-play-header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px}.keyflip-play-header p{margin:0;color:var(--maker-muted);max-width:650px}.keyflip-play h2{margin-bottom:12px}.keyflip-example{border:1px solid var(--maker-line);border-radius:22px;background:var(--maker-card);overflow:hidden}.keyflip-controls{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--maker-line);background:light-dark(#f1f5f8,#202830)}.keyflip-controls label{display:flex;align-items:center;gap:8px;font-size:13px}.keyflip-controls input{width:18px;height:18px;accent-color:var(--maker-accent);margin:0}.keyflip-controls select{font:inherit;padding:7px 10px;min-height:36px;max-width:240px;border:1px solid var(--maker-line);border-radius:9px;background:var(--maker-card);color:var(--maker-ink)}.keyflip-editor-label{display:block;padding:22px 24px 8px;font-size:13px;font-weight:600}.keyflip-example textarea{display:block;box-sizing:border-box;width:100%;min-height:190px;border:0;resize:vertical;padding:10px 24px 24px;background:transparent;color:var(--maker-ink);font:22px/1.6 system-ui,-apple-system,sans-serif;outline-offset:-4px}.keyflip-example textarea::placeholder{color:var(--maker-muted);opacity:.75}.keyflip-example button,.keyflip-reset{font:inherit;cursor:pointer}.keyflip-bottom{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--maker-line)}.keyflip-actions{display:flex;flex-wrap:wrap;gap:8px}.keyflip-actions button,.keyflip-reset{min-height:40px;border:1px solid var(--maker-line);border-radius:999px;padding:8px 14px;background:var(--maker-card);color:var(--maker-ink);font-size:13px;transition:transform 140ms cubic-bezier(.2,0,0,1),background-color 140ms cubic-bezier(.2,0,0,1)}.keyflip-actions button:active,.keyflip-reset:active{transform:scale(.98);transition-duration:80ms}.keyflip-actions button:disabled{opacity:.4;cursor:default;transform:none}.keyflip-language{font-size:12px;color:var(--maker-muted)}.keyflip-correction{display:flex;align-items:center;gap:9px;max-width:100%;padding:8px 12px;border:1px solid var(--maker-line);border-radius:999px;background:light-dark(#edf4fa,#243646);font-size:13px;overflow-wrap:anywhere;animation:keyflip-notice 180ms cubic-bezier(.16,1,.3,1)}.keyflip-correction[hidden]{display:none}.keyflip-correction button{border:0;border-radius:50%;min-width:28px;height:28px;background:transparent;color:var(--maker-ink);font-size:20px;cursor:pointer}.keyflip-correction s{text-decoration:none;color:var(--maker-muted)}.keyflip-samples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}.keyflip-samples span{font-size:12px;color:var(--maker-muted);margin-inline-end:4px}.keyflip-samples button{background:transparent;color:var(--maker-accent);border:1px solid var(--maker-line);border-radius:999px;min-height:36px;padding:6px 12px;font:13px/1.4 system-ui;cursor:pointer}.keyflip-example-help,.keyflip-example-note{font-size:13px;color:var(--maker-muted);margin:16px 0 0!important}.keyflip-example-status{min-height:24px;font-size:13px;color:var(--maker-muted);margin:12px 0 0!important}.keyflip-faq{max-width:780px}.keyflip-faq details{padding:20px 0;border-bottom:1px solid var(--maker-line)}.keyflip-faq summary{font-weight:600;cursor:pointer}.keyflip-faq details p{color:var(--maker-muted);margin:14px 0 0}.keyflip-privacy-note{padding:26px;border:1px solid var(--maker-line);border-radius:22px;margin-top:48px}.keyflip-privacy-note p{color:var(--maker-muted);margin-bottom:12px}.keyflip-privacy-note a{color:var(--maker-accent)}
@keyframes keyflip-notice{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:700px){.keyflip-hero{grid-template-columns:1fr;gap:32px}.keyflip-visual{padding:36px 18px}.keyflip-features{grid-template-columns:1fr;gap:18px;margin-block:38px}.keyflip-play{margin-block:42px;scroll-margin-top:140px}.keyflip-play-header{display:block}.keyflip-reset{margin-top:14px}.keyflip-controls{padding:16px;gap:14px}.keyflip-controls label:first-child{width:100%;display:grid;grid-template-columns:1fr}.keyflip-controls select{max-width:100%;width:100%}.keyflip-editor-label{padding:18px 16px 6px}.keyflip-example textarea{padding:10px 16px 18px;font-size:20px}.keyflip-bottom{padding:14px 16px;align-items:start}.keyflip-correction{font-size:12px;gap:6px}.keyflip-privacy-note{padding:22px}}
@media(prefers-reduced-motion:reduce){.keyflip-correction{animation:none}.keyflip-actions button,.keyflip-reset{transition:none;transform:none!important}}
@media(prefers-contrast:more){.keyflip-example,.keyflip-visual,.keyflip-correction{border-color:var(--maker-ink)}}
.keyflip-language-help{font-size:13px;color:var(--maker-muted);margin-block:14px}.keyflip-candidates{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-block:16px}.keyflip-candidates[hidden]{display:none}.keyflip-candidates span{font-size:13px;color:var(--maker-muted)}.keyflip-candidates button{font:22px system-ui;min-width:52px;min-height:44px;border:1px solid var(--maker-line);border-radius:14px;color:var(--maker-ink);background:var(--maker-card);cursor:pointer}.keyflip-comma-trainer{scroll-margin-top:100px;margin-block:64px;display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:start}.keyflip-comma-trainer h2{margin-block:8px 18px}.keyflip-comma-trainer p{color:var(--maker-muted)}.keyflip-comma-card{padding:24px;border:1px solid var(--maker-line);border-radius:22px;background:var(--maker-card)}.keyflip-comma-card label{font-size:13px;font-weight:600}.keyflip-comma-card textarea{box-sizing:border-box;display:block;width:100%;margin-block:12px 20px;border:1px solid var(--maker-line);border-radius:14px;background:var(--maker-bg);color:var(--maker-ink);padding:14px;resize:vertical;min-height:100px;font:24px/1.5 system-ui}.keyflip-comma-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.keyflip-comma-actions button{font:13px system-ui;min-height:40px;padding:8px 14px;border:1px solid var(--maker-line);border-radius:999px;background:var(--maker-card);color:var(--maker-ink);cursor:pointer;transition:transform 140ms cubic-bezier(.2,0,0,1),background-color 140ms cubic-bezier(.2,0,0,1)}.keyflip-comma-actions [data-space-button]{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:160px;min-height:60px;font-size:17px;border-radius:14px;touch-action:none;user-select:none;-webkit-user-select:none;background:light-dark(#f1f5f8,#202830)}.keyflip-comma-actions [data-space-button] span{font-size:24px}.keyflip-comma-actions button:disabled{opacity:.4;cursor:default}.keyflip-comma-actions button:active,.keyflip-comma-actions .is-held{transform:scale(.98);transition-duration:80ms;background:light-dark(#dfebf6,#2a4055)}.keyflip-comma-card [role=status]{min-height:44px;font-size:14px;margin-block:20px 0}.keyflip-comma-trainer .keyflip-example-note{font-size:12px}.keyflip-correction s,.keyflip-correction strong{unicode-bidi:isolate;min-width:0}.keyflip-controls select{min-width:0}
@media(max-width:700px){.keyflip-comma-trainer{grid-template-columns:1fr;margin-block:42px;scroll-margin-top:140px;gap:20px}.keyflip-comma-card{padding:20px}.keyflip-controls label:nth-child(2){width:100%;display:grid;grid-template-columns:1fr}.keyflip-controls label select{max-width:100%;width:100%}.keyflip-comma-actions [data-space-button]{width:100%}}
@media(prefers-reduced-motion:reduce){.keyflip-comma-actions button{transition:none;transform:none!important}}
@media(prefers-contrast:more){.keyflip-comma-card,.keyflip-comma-card textarea,.keyflip-comma-actions button{border-color:var(--maker-ink)}}

.keyflip-page-language{font:13px system-ui;max-width:130px;min-height:36px;padding:6px 10px;border:1px solid var(--maker-line);border-radius:999px;background:var(--maker-card);color:var(--maker-ink)}html[dir=rtl] .keyflip-hero h1{letter-spacing:normal}html[dir=rtl] .keyflip-faq summary{text-align:start}.keyflip-visual-line{unicode-bidi:isolate}.keyflip-comma-card code{direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:pre}.keyflip-page button{overflow-wrap:anywhere}.keyflip-comma-actions [data-space-button]{min-width:min(160px,100%)}

.keyflip-example textarea,.keyflip-comma-card textarea{text-align:start;overflow-anchor:none}.keyflip-samples button bdi{unicode-bidi:isolate}.keyflip-samples button span{font:inherit;color:inherit;margin:0}.keyflip-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(46px,auto) auto;row-gap:8px}.keyflip-correction{grid-column:1/-1;justify-self:start;box-sizing:border-box;min-height:46px}.keyflip-correction[hidden]{display:flex;visibility:hidden;height:46px}@media(max-width:700px){.keyflip-bottom{grid-template-columns:minmax(0,1fr)}.keyflip-correction{grid-column:1}}