*,*::after,*::before{box-sizing:border-box}html,body{margin:0;padding:0;background:oklch(20.51% 0.05 314.52deg);color:oklch(94.91% 0.02 220deg);font-family:system-ui,sans-serif;font-size:18px}main{max-width:min(80ch,100vw - 20px);margin-inline:auto;margin-block:2rem;border:2px solid oklch(94.91% 0.02 220deg);border-radius:2rem;padding:2.5rem 2rem;position:relative}div#toast-area{position:fixed;inset-inline:0;top:2.5rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1000}div.toast{background:oklch(20.51% 0.05 314.52deg/0.95);border-width:2px;border-style:solid;border-radius:4px;display:flex;align-items:center;padding:.5rem;width:30ch;justify-content:center}div.toast.success{border-color:oklch(70.89% 0.198 149deg);color:oklch(70.89% 0.198 149deg)}div.toast.error{border-color:red;color:red}h1{margin-top:0;text-shadow:0 0 6px oklch(94.91% 0.02 220deg/0.1)}div#timestamp-output{margin-top:1rem;display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;column-gap:8px}div.output{display:grid;grid-column:1/3;grid-template-columns:subgrid;padding:6px 25px;cursor:pointer;border-width:2px;border-color:rgba(0,0,0,0);border-style:solid;border-radius:6px;position:relative;row-gap:2px}div.output:hover,div.output:focus-visible{border-color:oklch(94.91% 0.02 220deg);outline:none}div.output.copied{border-color:oklch(70.89% 0.198 149deg);transition:border-color .05s ease-out}div.output.copied::after{content:"✓";position:absolute;color:oklch(70.89% 0.198 149deg);font-weight:bold;inset-inline-end:7px;top:calc(50% - 13px)}span.output-label{justify-self:end;text-align:right}span.output-preview{background-color:rgba(78,80,88,.48);border-radius:3px;padding:0 4px;color:#dbdee1;user-select:none;justify-self:start;align-self:flex-start}form{display:grid;grid-template-columns:auto max-content;align-items:center;gap:.4rem;font-weight:bold}form label{border-bottom:2px dotted oklch(94.91% 0.02 220deg);padding-inline-start:4px}input,select,button{background-color:oklch(94.91% 0.02 220deg);color:oklch(30.51% 0.1 314.52deg);border:2px solid oklch(5.51% 0.1 314.52deg);padding:6px 8px;border-radius:4px;font-size:.9rem}button:hover{background-color:oklch(85% 0.02 220deg);cursor:pointer}button:active{background-color:oklch(80% 0.02 220deg)}@media(max-width: 650px){h1{font-size:28px;line-height:1}main{margin-block:1rem;border:2px solid oklch(94.91% 0.02 220deg);border-radius:1rem;padding:1.5rem 1rem;position:relative}div.output{grid-template-columns:1fr}span.output-label{justify-self:start;text-align:left}div.container{display:flex;flex-direction:column;width:90%}div.container>*{margin:1rem .2rem}}