.time-format{--tf-ink:#243b53;--tf-blue:#1660a8;--tf-line:#c6deef;--tf-paper:#f2f9fd;--tf-sun:#fff3d5;border:1px solid var(--tf-line);border-radius:14px;padding:clamp(16px,3vw,26px);margin:28px 0;background:var(--tf-paper);color:var(--tf-ink)}
.time-format [hidden]{display:none!important}.time-format h2{font-size:20px;line-height:1.55;margin:0 0 10px;padding:0;border:0;background:none}.time-format h2::before,.time-format h2::after{display:none}.time-format p{margin:10px 0;font-size:15.2px;line-height:1.8}.time-format__controls{display:grid;gap:16px;margin:18px 0}.time-format label{display:grid;gap:5px;font-size:12.8px;font-weight:700;min-width:0}.time-format select{min-width:0;width:100%;min-height:46px;border:1px solid #91b4ce;border-radius:8px;background:#fff;color:var(--tf-ink);padding:8px 28px 8px 10px;font:inherit;font-size:16px}.time-format__mode{max-width:300px}.time-format__fields{display:grid;grid-template-columns:minmax(58px,1fr) auto minmax(58px,1fr) minmax(92px,1.3fr);gap:10px;align-items:end;max-width:440px}.time-format__fields>span{padding-bottom:10px;font:700 24px ui-monospace,monospace}.time-format__examples{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.time-format__examples span{font-size:12.8px;width:100%}.time-format button{background:#fff;color:var(--tf-blue);border:1px solid #91b4ce;border-radius:7px;min-height:42px;padding:7px 13px;font:inherit;font-size:14.4px;cursor:pointer}.time-format button:hover{background:#e3f1fb}.time-format :is(select,button,a):focus-visible{outline:3px solid var(--tf-blue);outline-offset:3px}.time-format__result{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;border-radius:10px;background:#fff;padding:18px 12px;border:1px solid var(--tf-line)}.time-format__result>div{display:grid;gap:8px;text-align:center}.time-format__result>div>span{font-size:12px}.time-format output{font:700 clamp(16.8px,3.8vw,26.4px)/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.time-format__equals{color:#60788b}.time-format__result>p{grid-column:1/-1;text-align:center;margin:0}.time-format [data-time-japanese]{font-weight:700;border-top:1px solid #dfebf3;padding-top:12px}.time-format .time-format__english{font-size:13.6px}.time-format[data-time-half=pm] .time-format__result{background:var(--tf-sun)}.time-format .time-format__note{font-size:13.28px;margin-top:14px}.time-format .time-format__more{margin-bottom:0;font-size:13.6px}.time-format__more a{color:var(--tf-blue);text-decoration:underline;text-underline-offset:3px}