
.explain-panel{margin:0 30px 24px;padding:22px 0 0;border-top:1px solid #e1e6ed}.explain-heading{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}.explain-heading h2{margin:0;font-size:16px}.explain-heading>span{font-size:13px;color:#758195}.time-segments{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px;white-space:pre-wrap}.time-token{border:1px solid #dce6fb;background:#f0f5ff;border-radius:6px;padding:9px 10px;display:flex;flex-direction:column;gap:8px;align-items:center;min-width:43px;max-width:100%;color:#294985}.time-token code{font:500 18px 'IBM Plex Mono',monospace;overflow-wrap:anywhere;max-width:100%}.time-token small{font-size:12px;font-family:inherit}.time-token.selected{border-color:#214ee8;box-shadow:0 0 0 2px #214ee815}.token-zone,.token-T{background:#f3f0ff;color:#6549a0;border-color:#e2dcf1}.token-unix,.token-expression{align-items:flex-start;background:#edf8f6;border-color:#d6ede7;color:#1e6658}.time-punctuation{padding:12px 1px;font:16px 'IBM Plex Mono',monospace;color:#9aa6b8;white-space:pre-wrap}.segment-info{font-size:14px;line-height:1.8;color:#66758a;margin-top:14px;min-height:25px}.conversion-steps{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:10px;margin-top:16px}.conversion-steps>div{display:flex;flex-direction:column;gap:10px;background:#f6f8fb;border-radius:7px;padding:14px;min-width:0}.conversion-steps span{color:#69798e;font-size:12px}.conversion-steps code{font:13px/1.8 'IBM Plex Mono',monospace;overflow-wrap:anywhere}.explain-panel details{background:transparent;border:0;margin-top:18px}.explain-panel summary{padding:0;font-size:14px;color:#315db5}.explain-panel details p{font-size:13px;color:#6a7890;line-height:1.8}.explain-panel form{display:flex;gap:8px}.explain-panel input{flex:1;min-width:0;border:1px solid #cbd3df;border-radius:6px;padding:10px 12px;font-size:14px}.explain-panel #compare-result{color:#214ee8;margin-bottom:0}#duration-tools{background:transparent;border:0;margin:3px 0 0}#duration-tools summary{padding:0;font-size:13px;color:#315db5}#duration-values>div{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-top:8px}#duration-values strong{font-weight:500;font-variant-numeric:tabular-nums}.receiver-edit{display:block;padding:0;margin:0 0 15px}.receiver-note{margin-top:0}@media(max-width:680px){.explain-panel{margin:0 20px 22px}.conversion-steps{grid-template-columns:1fr}.time-token{padding:8px}.time-token code{font-size:16px}.explain-heading{gap:8px}.explain-panel form{flex-direction:column}#duration-tools{width:100%}.relation #duration-values{max-width:260px}}
.copy-split{display:inline-flex;flex-shrink:0}.copy-split #copy-time{border-radius:7px 0 0 7px}.copy-split .copy-toggle{border-radius:0 7px 7px 0;border-left:1px solid #ffffff60;padding:10px 13px;min-width:42px}.copy-toggle span{font-size:18px;line-height:1}.copy-menu{position:fixed;z-index:1000;background:white;border:1px solid #d3dbea;border-radius:12px;box-shadow:0 12px 42px #152b552b;padding:7px;overflow:auto;overscroll-behavior:contain}.copy-menu-title{padding:9px 10px 11px;color:#53627a;font-size:13px;border-bottom:1px solid #edf0f5;margin-bottom:5px}.copy-menu button{display:flex;width:100%;flex-direction:column;text-align:left;gap:5px;background:transparent;border:0;border-radius:6px;padding:10px;color:#19212f}.copy-menu button:hover,.copy-menu button:focus-visible{background:#edf3ff;outline:none}.copy-format-label{font-size:14px;font-weight:500}.copy-format-preview{font-size:13px;line-height:1.6;color:#647083;overflow-wrap:anywhere;max-width:100%}.copy-menu-note{font-size:12px;line-height:1.6;color:#758195;padding:7px 10px 3px;margin:0;border-top:1px solid #edf0f5}.copy-split .primary:focus-visible{position:relative;z-index:1}
#language{margin-left:auto;width:auto;max-width:150px}header #now{margin-left:0}.input-options{display:flex;gap:10px;align-items:center;margin:0 0 20px;font-size:14px;color:#647083}.input-options select{max-width:280px}.relation #relative{display:flex;flex-direction:column;gap:7px;font-variant-numeric:tabular-nums}.relation #counter-clock{font:500 clamp(20px,2.6vw,29px) 'IBM Plex Mono',monospace;letter-spacing:-1px;white-space:nowrap}.relation #counter-days{font-size:20px;overflow-wrap:anywhere;line-height:1.4}.relation #counter-days:empty{display:none}#formats summary b{font-weight:400}.relation #relative-detail{line-height:1.7}.input-options+.input-help{margin-top:0}#choices button{white-space:normal;text-align:left}#choices{line-height:1.8}#source-panel label{display:block}#source-panel select{margin:12px 0 0}.parse-notes{overflow-wrap:anywhere}@media(max-width:680px){header #language{font-size:13px;max-width:118px}header{gap:12px!important}.relation #relative{width:100%}.relation #counter-clock{font-size:29px}.input-options{flex-wrap:wrap}.input-options select{max-width:100%}h1{overflow-wrap:anywhere}.actions .primary,.actions .secondary{white-space:normal}.parse-notes{margin-left:20px;margin-right:20px}}
.zone-line>span{flex-shrink:0;white-space:nowrap}.zone-line select{min-width:0;flex:1}.time-layout>div{min-width:0}
.parse-notes{margin:0 30px 18px;padding:12px 14px;background:#eef3ff;border-radius:6px;font-size:14px;color:#405c8c;line-height:1.8}.input-help{background:transparent!important;border:0!important;margin:-15px 0 24px}.input-help summary{padding:0;font-size:13px;color:#647083}.input-help p{font-size:14px;line-height:1.9;color:#647083}.input-help summary:before{content:'＋'}
:root{font-family:'Noto Sans SC',sans-serif;color:#19212f;background:#f5f7fa;font-synthesis:none;--blue:#214ee8;--muted:#647083;--line:#e1e6ed}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,summary,select{cursor:pointer}button{transition:background .15s,transform .15s}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #8eaaff;outline-offset:4px}input:focus,select:focus{outline:2px solid #8eaaff;outline-offset:2px}header{height:96px;max-width:1240px;margin:auto;display:flex;align-items:center;gap:32px;padding:0 40px}.brand{font:600 28px 'IBM Plex Mono',monospace;color:#19212f;text-decoration:none;letter-spacing:-1.5px}.brand span{color:var(--blue)}.header-note{font-size:14px;color:var(--muted)}.text-btn{margin-left:auto;border:0;background:transparent;color:var(--blue);font-size:15px}main{max-width:1000px;margin:44px auto 0;padding:0 32px}.eyebrow{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:1.7px;color:var(--muted)}h1{font-size:34px;line-height:1.5;letter-spacing:-1.2px;font-weight:600;margin:14px 0 28px}h1 span{color:#6c7687}.input-shell{display:flex;background:white;padding:8px;border:1px solid #c6cedc;border-radius:12px;box-shadow:0 3px 12px #19212f05}.input-shell:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px #214ee810}.input-shell input{min-width:0;flex:1;border:0;padding:12px 16px;font:400 18px 'IBM Plex Mono',monospace;background:transparent;outline:none}.primary,.secondary{border:1px solid transparent;border-radius:7px;padding:12px 22px;font-size:15px;font-weight:500;white-space:nowrap}.primary{background:var(--blue);color:white}.primary:hover{background:#123ac0}.secondary{background:white;border-color:#cbd3df;color:#28384e}.secondary:hover{background:#f0f4ff}.examples{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:15px 0 30px;font-size:13px;color:var(--muted)}.examples button{border:0;background:#e9edf3;color:#536075;padding:6px 10px;border-radius:4px;font-size:13px}.examples button:hover{color:var(--blue);background:#e0e7ff}#result{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 36px #23335506;overflow:hidden}.result-top{padding:24px 30px 0;display:flex;align-items:center;justify-content:space-between}.badge{font-size:12px;color:#3255a5;background:#edf2ff;padding:5px 9px;border-radius:4px}.time-layout{padding:26px 30px 30px;display:grid;grid-template-columns:1fr 220px;gap:25px;align-items:center}.date{font-size:18px;font-weight:500}.big-time{font:500 clamp(52px,6vw,76px)/1.3 'IBM Plex Mono',monospace;letter-spacing:-4px;margin:8px 0;color:#18273f}.big-time span{color:#a1adbe;font-size:.65em;letter-spacing:-2px}.zone-line{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}select{max-width:100%;border:0;background:#f2f5fa;border-radius:5px;padding:8px;color:#40516b;font-size:14px}.relation{border-left:1px solid var(--line);padding:14px 0 14px 28px;display:flex;flex-direction:column;gap:10px}.relation strong{font-size:24px;font-weight:500}.relation>span:last-child{font-size:13px;color:var(--muted)}.origin{margin:0 30px;padding:17px 0;border-top:1px solid var(--line);display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}.origin strong{font:400 13px 'IBM Plex Mono',monospace;color:#465773;overflow-wrap:anywhere}.fixed-note{margin-left:auto;font-size:12px}.actions{display:flex;gap:10px;align-items:center;padding:8px 30px 27px}.actions>span{font-size:13px;color:var(--blue)}details{border-top:1px solid var(--line);background:#fbfcfe}summary{padding:19px 30px;font-size:14px;color:#354866;list-style:none}summary:before{content:'＋';margin-right:10px}details[open] summary:before{content:'−'}summary span{float:right;font:12px 'IBM Plex Mono',monospace;color:#78849a}.format-row{display:flex;align-items:center;gap:15px;padding:12px 30px;border-top:1px solid #edf0f5;font-size:13px}.format-row label{width:90px;color:var(--muted)}.format-row code{flex:1;overflow-wrap:anywhere;min-width:0}.format-row button{border:0;color:var(--blue);background:transparent;padding:8px}footer{display:flex;justify-content:space-between;color:#7c8796;font-size:12px;margin:24px 0 32px}#source-panel,#error,#choices{padding:18px 20px;margin-bottom:22px;border:1px solid #d4dff8;background:#eef3ff;border-radius:8px;font-size:14px}#source-panel select{margin-left:12px;background:white;border:1px solid #c7d4ee}#source-panel p{color:#64738d;margin:10px 0 0;font-size:13px}#error{color:#a8392c;background:#fff2ef;border-color:#f1d4cf}#choices button{margin:8px}dialog{width:min(510px,calc(100% - 32px));border:1px solid var(--line);border-radius:14px;padding:32px;box-shadow:0 20px 100px #15213a30;color:#19212f}dialog::backdrop{background:#10213e55;backdrop-filter:blur(3px)}.close{position:absolute;right:15px;top:12px;background:none;border:0;font-size:28px;color:var(--muted)}h2{font-size:23px;margin:18px 0 25px}dialog label{display:block;font-size:14px;margin:18px 0 8px}dialog label span{color:var(--muted)}dialog input{width:100%;padding:12px;border:1px solid #cbd3df;border-radius:6px;font-size:14px}dialog p{font-size:13px;line-height:1.8;color:var(--muted)}dialog a{font-size:14px;color:var(--blue);margin-left:18px}#share-status{font-size:13px;color:var(--blue);margin-top:12px}.receiver-note{color:var(--muted);font-size:14px;margin-bottom:28px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:680px){header{height:76px;padding:0 22px;gap:16px}.header-note{display:none}main{margin-top:25px;padding:0 18px}h1{font-size:26px}.input-shell{flex-direction:column;padding:7px}.input-shell input{font-size:15px;width:100%;padding:14px 9px}.input-shell button{padding:11px}.examples{gap:7px}.result-top{padding:20px 20px 0}.time-layout{padding:22px 20px;grid-template-columns:1fr;gap:22px}.big-time{font-size:62px}.relation{border-left:0;border-top:1px solid var(--line);padding:18px 0 0;flex-direction:row;align-items:center;flex-wrap:wrap}.relation strong{font-size:21px}.relation>span:last-child{width:100%}.origin{margin:0 20px;gap:8px}.fixed-note{width:100%;margin:0}.actions{padding:8px 20px 22px;flex-wrap:wrap}.primary,.secondary{padding:11px 17px}summary{padding:18px 20px}summary span{font-size:11px}.format-row{padding:12px 20px;gap:8px}.format-row label{width:65px}footer{gap:12px;line-height:1.8;flex-direction:column}#source-panel select{display:block;margin:12px 0 0;width:100%}}
.context-tools{margin-top:18px}.context-tools details{border-top:1px solid #e5eaf2;padding-top:16px}.context-tools .tool-hint{font-size:14px}.tool-select{display:flex;align-items:center;gap:12px;font-size:14px;color:#53627a;margin:14px 0}.tool-select select{max-width:300px;min-width:0;flex:1;padding:9px;border:1px solid #dce3ed;border-radius:6px;background:white}.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.tool-card{display:flex;flex-direction:column;gap:10px;padding:16px;background:#f5f8fd;border:1px solid #e4eaf3;border-radius:8px;min-width:0}.tool-card strong{font-size:14px}.tool-card code{font-size:14px;overflow-wrap:anywhere}.context-tools .tool-card p{font-size:16px;color:#243c61;margin:0;line-height:1.6}.tool-card>span{font-size:14px;color:#62748d}.tool-button{align-self:flex-start;border:1px solid #cdd9f1;background:white;color:#254ca5;border-radius:5px;padding:7px 11px;font-size:14px;cursor:pointer}.tool-button:hover{background:#eaf0ff}.tool-button:focus-visible{outline:2px solid #2452dc;outline-offset:2px}.tool-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.tool-current{color:#244cac!important}.context-tools .tool-verdict{font-size:15px;color:#244cac}.context-tools .tool-base{font-size:14px}@media(max-width:680px){.tool-grid{grid-template-columns:1fr}.tool-select{align-items:flex-start;flex-direction:column}.tool-select select{width:100%;max-width:100%}}
.city-zone-id{font-size:12px;color:#6a7890;overflow-wrap:anywhere}.city-day-badge{align-self:flex-start;padding:3px 8px;border-radius:4px;background:#e9edf4;color:#53627a!important}.city-day-shift{background:#e6edff;color:#204ac1!important}.context-tools .tool-reference{font-size:14px}.tool-card>strong{overflow-wrap:anywhere}
.time-actions .shift-form,.time-actions .calendar-form{display:flex;align-items:end;flex-wrap:wrap;gap:12px}.time-actions label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:#586b84;min-width:0}.time-actions select,.time-actions input{padding:10px;border:1px solid #cbd3df;border-radius:6px;background:white;color:#233b61;font-size:14px;min-width:0;max-width:100%}.time-actions #shift-amount{width:100px}.time-actions .shift-form>button{align-self:end;padding:10px 16px}.time-actions .shift-results{display:grid;gap:12px;margin-top:16px}.time-actions .tool-card .tool-examples{margin:0}.time-actions .calendar-form>label:first-child{flex:1;min-width:180px}.time-actions .calendar-form>label:nth-child(2){max-width:150px}.calendar-preview{width:100%;padding:10px 14px;background:#f5f8fd;border-radius:6px}.time-actions .calendar-preview p{font-size:15px;color:#2e466a;margin:4px 0}.calendar-preview small{font-size:13px;color:#61738c}.time-actions button:disabled{opacity:.5;cursor:not-allowed}.time-actions .calendar-form>p{width:100%;margin:0}@media(max-width:680px){.time-actions .shift-form{display:grid;grid-template-columns:1fr 1fr}.time-actions .shift-form>label:nth-child(3){grid-column:1/-1}.time-actions #shift-amount{width:100%}.time-actions .shift-form>select{align-self:end}.time-actions .calendar-form{align-items:stretch}.time-actions .calendar-form>label:nth-child(2){max-width:none;width:100%}.time-actions .tool-button{white-space:normal;text-align:left}}
#compare-result{margin-top:14px}#compare-result>.tool-grid{margin:12px 0}#compare-result>small{font-size:13px;color:#63748a}#compare-result .tool-card strong{font-size:15px;line-height:1.6}
.batch-tool{background:transparent;border:0;margin:12px 0 22px}.batch-tool summary{padding:0;color:#315db5;font-size:14px}.batch-tool p{font-size:14px;line-height:1.8;color:#65768b}.batch-tool form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.batch-tool label{display:flex;flex-direction:column;gap:8px;font-size:14px;min-width:0;flex:1}.batch-tool label:first-child{flex-basis:100%}.batch-tool textarea{width:100%;resize:vertical;padding:12px;background:white;border:1px solid #cbd3df;border-radius:7px;font:14px/1.8 'IBM Plex Mono',monospace;box-sizing:border-box}.batch-tool select{padding:10px;max-width:100%;min-width:0}#batch-results{display:grid;gap:10px;margin-top:16px}#batch-results:empty{display:none}#batch-results .tool-card{background:white}#batch-results strong{white-space:pre-wrap;overflow-wrap:anywhere}.batch-tool form>button{align-self:end}@media(max-width:680px){.batch-tool form>label{flex-basis:100%}}
#batch-results{max-height:480px;overflow:auto;overscroll-behavior:contain;padding:2px}#batch-results:focus-within{scroll-margin-top:20px}
.time-actions .calendar-form .calendar-end-field{width:100%;max-width:none;flex-basis:100%}.time-actions .calendar-form .calendar-end-hint{font-size:14px;line-height:1.8}.time-actions [hidden]{display:none!important}#calendar-file{display:inline-block;margin-top:8px;text-decoration:none}
.extra-result { display:grid; gap:10px; margin-top:12px } #date-tool > details { margin-top:16px; border-top:1px solid var(--line); padding-top:14px } .extra-result code { overflow-wrap:anywhere }
.tool-presets { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 }
#interval-progress { margin-top:14px } progress { width:100%;height:8px;accent-color:var(--accent,#4569b2) }
.zone-search { font-size:12px;max-width:100%;margin-top:6px } .zone-search input { width:100%;min-width:0;margin-top:10px } .zone-search .tool-presets { align-items:center } .zone-line { flex-wrap:wrap } .zone-search .tool-button { white-space:normal;text-align:left;overflow-wrap:anywhere }
.zone-line > .zone-search { flex-basis:100%;width:100% } .zone-search > summary { padding:8px 0 } @media(min-width:681px){.time-layout{grid-template-columns:minmax(0,1fr) minmax(220px,.6fr)}} #batch-results textarea {width:100%;max-width:100%;font-family:monospace}
.history-list { display:grid;gap:8px;max-height:320px;overflow:auto;margin:12px 0 }.history-list button { text-align:left;overflow-wrap:anywhere;white-space:normal }.history-list small { display:block;color:var(--muted);margin-top:5px }.extra-result strong {font-size:15px} #precision-tool code {display:block;overflow-wrap:anywhere;font-size:12px}
