@charset "UTF-8";
:root{--paper:#fafafa;--ink:#242424;--muted:#737373;--line:#e3e3e3;--field:#d9d9d9;--accent:#cc4b45;--modifier:#b0478a;--year:#3966ce;--month:#b16b17;--day:#268251;--week:#9255b7;--time:#cc4b45;--zone:#15808c;--composite:#4f5866;--char:#8a8a8a;--literal:var(--muted);--mono:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--year);outline-offset:5px}
code,pre{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page{max-width:1280px;margin:0 auto;padding:0 56px}
.masthead{height:86px;display:flex;align-items:center;justify-content:space-between}
.wordmark{font:600 29px var(--mono);letter-spacing:-1.4px;text-decoration:none}.wordmark span{color:var(--accent)}
.reset{display:grid;place-items:center;width:38px;height:38px;margin-right:-9px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);transition:color .16s,background .16s,opacity .16s}.reset:hover{color:var(--ink);background:#0000000a}.reset:focus-visible{outline-offset:2px}.reset:disabled{opacity:.35;cursor:default;color:var(--muted);background:transparent}.reset svg{width:20px;height:20px}.reset.is-spinning svg{animation:reset-spin .45s ease}
@keyframes reset-spin{to{transform:rotate(-360deg)}}

.anatomy{display:grid;grid-template-rows:66px 242px;padding-top:36px}
.inspector{height:66px;overflow:hidden}
.choices{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:34px;gap:12px 14px;height:100%;align-content:center}
.choice{display:block;height:34px;border:0;background:transparent;padding:0;text-align:center;line-height:34px;color:inherit;cursor:help}
.choice code{font-size:19px;font-weight:500;line-height:34px;color:var(--segment-color);white-space:pre}
.choice:hover code{text-decoration:underline;text-underline-offset:5px}.choice:focus-visible{outline-color:var(--segment-color);outline-offset:3px}
.syntax{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr) repeat(7,minmax(0,1fr) minmax(0,.45fr)) minmax(0,1fr);align-items:start;justify-items:center;height:242px;padding:47px 0 30px;user-select:none}
.token,.syntax-prefix{display:grid;grid-template-rows:auto 20px;row-gap:6.5px;justify-items:center;align-content:start;border:0;background:transparent;padding:0;position:relative}
.syntax-code,.syntax-alt{font:500 clamp(1.45rem,6.7vw,5.75rem)/1.35 var(--mono);letter-spacing:-.04em;white-space:nowrap}
.syntax-alt{font-weight:300;color:var(--muted);opacity:.3}
.bracket{opacity:.4;font-weight:300}
.token-caption{font:13px/20px var(--sans);letter-spacing:2px;white-space:nowrap;word-break:keep-all}
.syntax-prefix .token-caption{color:var(--muted)}
.token{color:var(--segment-color);border-radius:6px;transition:background .16s,color .16s}
.token:after{content:"";position:absolute;bottom:-3.5px;left:24%;right:24%;height:2px;background:var(--segment-color);opacity:0;transform:scaleX(.6);transition:opacity .16s,transform .16s}
.token:hover:after,.token.is-active:after,.token.is-preview:after{opacity:1;transform:scaleX(1)}
.token.is-active .bracket,.token:hover .bracket{opacity:.8}
.token[data-segment=modifier]{--segment-color:var(--modifier)}.token[data-segment=year]{--segment-color:var(--year)}.token[data-segment=month]{--segment-color:var(--month)}.token[data-segment=day]{--segment-color:var(--day)}.token[data-segment=week]{--segment-color:var(--week)}.token[data-segment=time]{--segment-color:var(--time)}.token[data-segment=zone]{--segment-color:var(--zone)}.token[data-segment=composite]{--segment-color:var(--composite)}.token[data-segment=char]{--segment-color:var(--char)}

.playground{display:grid;row-gap:26px;border-top:1px solid var(--line);padding-top:31px}
#strftime-form{display:grid;row-gap:24px}
.field-label{display:flex;align-items:center;gap:12px;font-size:14px;margin-bottom:11px}
.input-shell{display:grid;grid-template-columns:14px minmax(0,1fr) 14px;gap:12px;align-items:center;min-height:64px;border:1px solid var(--field);border-radius:6px;padding:0 19px;background:#fff;transition:border-color .16s,box-shadow .16s}
.input-shell:focus-within,.struct-shell:focus-within{border-color:#555;box-shadow:0 0 0 3px #24242408}
.input-shell:has(input[aria-invalid=true]){border-color:var(--accent)}
.input-quote{font:24px Georgia,serif;color:#aaa}
.format-editor{position:relative;min-width:0;overflow:hidden}
.format-editor input{position:relative;width:100%;min-width:0;border:0;background:transparent;outline:none;padding:18px 0;font:20px var(--mono);color:transparent;caret-color:var(--ink);-webkit-text-fill-color:transparent}
.format-editor input::placeholder{color:#a0a0a0;-webkit-text-fill-color:#a0a0a0}.format-editor input::selection{background:#3966ce30;color:transparent}
.input-highlight{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;overflow:hidden;font:20px var(--mono);white-space:pre}.input-highlight>span{display:block;flex-shrink:0;will-change:transform}
.struct-shell{display:grid;grid-template-columns:repeat(9,minmax(0,1fr)) repeat(2,minmax(0,1.4fr));gap:1px;border:1px solid var(--field);border-radius:6px;background:var(--field);overflow:hidden;transition:border-color .16s,box-shadow .16s}
.member{display:grid;align-content:center;gap:3px;min-height:76px;padding:10px 14px;background:#fff;cursor:text;transition:background .16s,box-shadow .16s}
.member span{font:12px var(--mono);color:var(--member-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member input{width:100%;min-width:0;border:0;background:transparent;outline:none;padding:3px 0;font:20px var(--mono);color:var(--ink)}
.member input::placeholder{color:#b5b5b5}
.member:focus-within{box-shadow:inset 0 -2px 0 var(--member-color)}
.member.is-read{background:color-mix(in srgb,var(--member-color) 7%,#fff);box-shadow:inset 0 -2px 0 var(--member-color)}
.member:has(input[aria-invalid=true]){box-shadow:inset 0 0 0 1px var(--accent)}

.output-panel{display:grid;align-content:center;min-height:147px;padding:25px;border-radius:7px;background:#202122;color:#f5f5f5;overflow:hidden;transition:box-shadow .16s}
.output-panel.has-error{box-shadow:inset 0 0 0 1px var(--accent)}
#output{margin:0;min-height:48px;padding-bottom:3px;font-size:clamp(23px,2.4vw,32px);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.output-error{margin:0;font-size:14px;line-height:1.7;color:#ffaaa6}
#output [data-part=literal]{color:#b6b8ba}#output [data-part=year]{color:#8fb3f8}#output [data-part=month]{color:#e5aa5c}#output [data-part=day]{color:#6ccb98}#output [data-part=week]{color:#c9a0ec}#output [data-part=time]{color:#f18d87}#output [data-part=zone]{color:#5ccdd7}#output [data-part=composite],#output [data-part=char]{color:#e6e8ea}

.rule-tooltip{position:fixed;z-index:20;width:max-content;max-width:min(340px,calc(100vw - 24px));padding:10px 13px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);box-shadow:0 4px 18px #0000000d;font:14px/1.65 var(--sans);overflow-wrap:anywhere}.rule-tooltip[hidden]{display:none}
.rule-sample{display:block;margin-top:4px;font:13px/1.6 var(--mono);color:var(--muted);white-space:pre}

@media(min-width:1500px){.page{max-width:1376px;padding:0 72px}.anatomy{padding-top:54px;grid-template-rows:66px 265px}.syntax{height:265px;padding-top:62px}.syntax-code,.syntax-alt{font-size:6.1rem}}
@media(max-width:1100px) and (min-width:601px){.anatomy{grid-template-rows:66px 210px}.syntax{height:210px;padding-top:42px}}
@media(max-width:1000px){.page{padding:0 32px}.syntax-code,.syntax-alt{font-size:6.5vw}.struct-shell{grid-template-columns:repeat(6,minmax(0,1fr))}.member-wide{grid-column:span 2}}
@media(max-width:600px){.page{padding:0 20px}.masthead{height:72px}.wordmark{font-size:26px}.anatomy{padding-top:21px;grid-template-rows:86px 155px}.inspector{height:86px}.choices{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:26px;gap:8px 10px}.choice,.choice code{height:26px;line-height:26px}.choice code{font-size:15px}.syntax{height:155px;padding:34px 0 23px}.syntax-code,.syntax-alt{font-size:6.35vw;letter-spacing:-.055em}.token-caption{font-size:10px;letter-spacing:0}.playground{row-gap:24px;padding-top:24px}#strftime-form{row-gap:20px}.field-label{margin-bottom:9px}.input-shell{min-height:57px;padding:0 16px;gap:10px}.format-editor input,.input-highlight{font-size:18px}.format-editor input{padding:15px 0}.struct-shell{grid-template-columns:repeat(4,minmax(0,1fr))}.member{min-height:66px;padding:9px 10px}.member span{font-size:11px}.member input{font-size:18px}.output-panel{min-height:140px;padding:19px}#output{font-size:27px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}.reset.is-spinning svg{animation:none}}
@media(forced-colors:active){.format-editor input{color:CanvasText;-webkit-text-fill-color:CanvasText}.input-highlight{display:none}}