body:has(.seismo){background:#171512;margin:0}.seismo{--case:#171512;--case-hi:#24211c;--rim:#3a352c;--enamel:#d9d2bf;--enamel-dim:#9c9481;--paper:#f1ecdd;--paper-edge:#e3dcc8;--grid:#40706038;--ink:#1a1a1a;--red:#b3261e;--blue:#1e4fa3;--green:#1d7a46;--amber:#e8a33a;--f:var(--font-seismo);--m:var(--font-seismo);--rail:360px;--row:15px;box-sizing:border-box;grid-template-columns:minmax(0, 1fr) var(--rail);min-height:100vh;color:var(--enamel);font:400 14px/1.45 var(--f);background:radial-gradient(1200px 600px at 30% -10%, #fff0d20f, transparent 70%), repeating-linear-gradient(90deg, #ffffff03 0 1px, transparent 1px 3px), var(--case);grid-template-areas:"plate plate""sheet rail";gap:18px 28px;padding:18px 28px 40px;display:grid}.seismo *,.seismo :before,.seismo :after{box-sizing:border-box}.seismo,.seismo *{font-variant-numeric:tabular-nums!important}.seismo [hidden]{display:none!important}.seismo .plate{border-bottom:1px solid var(--rim);grid-area:plate;grid-template-columns:auto 1fr auto;grid-template-areas:"home home home""title sta lamp";align-items:end;gap:6px 22px;padding-bottom:14px;display:grid}.seismo .home{color:var(--enamel-dim);font:400 12px/1 var(--m);letter-spacing:.04em;grid-area:home;justify-self:start;text-decoration:none}.seismo .home:hover,.seismo .home:focus-visible{color:var(--enamel)}.seismo h1{font:700 30px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--enamel);grid-area:title;margin:0}.seismo .sta{color:var(--enamel-dim);flex-wrap:wrap;grid-area:sta;align-items:baseline;gap:2px 16px;margin:0;display:flex}.seismo .sta .code{font:700 14px/1.2 var(--m);color:var(--amber);letter-spacing:.08em}.seismo .lamp{font:400 12px/1.2 var(--m);color:var(--enamel-dim);white-space:nowrap;grid-area:lamp;align-items:center;gap:8px;margin:0;display:flex}.seismo .led{background:#5d574b;border-radius:50%;width:9px;height:9px;box-shadow:inset 0 1px 1px #00000080}.seismo .lamp[data-state=live] .led{background:#7fd36b;box-shadow:0 0 8px #7fd36bb3,inset 0 -1px 1px #0000004d}.seismo .lamp[data-state=wait] .led{background:var(--amber);box-shadow:0 0 8px #e8a33a99}.seismo .lamp[data-state=down] .led{background:#d4493b;box-shadow:0 0 8px #d4493b99}.seismo .sheet{grid-area:sheet;min-width:0}.seismo .heading{font:400 12px/1.3 var(--m);color:var(--enamel-dim);justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px;display:flex}.seismo .heading p{margin:0}.seismo .paper{background:radial-gradient(140% 90% at 50% 0%, #ffffff59, transparent 60%), linear-gradient(90deg, var(--paper-edge), var(--paper) 3%, var(--paper) 97%, var(--paper-edge)), var(--paper);touch-action:pan-y;border-radius:2px;min-height:240px;position:relative;overflow:clip;box-shadow:inset 0 1px #fff6,0 18px 40px -12px #000000b3,0 2px 6px #00000080}.seismo .ink{width:100%;display:block}.seismo .marks{pointer-events:none;position:absolute;inset:0}.seismo .flag{pointer-events:auto;cursor:pointer;font:700 9px/1 var(--m);color:#7a2b18;background:0 0;border:0;padding:0;position:absolute;transform:translate(-50%)}.seismo .flag:before{content:"";width:1px;height:var(--h,18px);opacity:.55;background:currentColor;position:absolute;top:0;left:50%}.seismo .flag .ph{white-space:nowrap;background:#f1ecddd9;padding:1px 2px;position:absolute;top:-1px;left:3px}.seismo .flag .ph b{font-weight:700}.seismo .flag .ph i{opacity:.8;font-style:normal;font-weight:400}.seismo .flag.lt .ph{left:auto;right:3px}.seismo .flag .ph.quiet{visibility:hidden}.seismo .flag.on .ph.quiet{visibility:visible}.seismo .flag.dim{opacity:.35}.seismo .flag.on{color:var(--red);opacity:1;z-index:2}.seismo .flag.on:before{opacity:1}.seismo .margin{font:400 9.5px/1 var(--m);color:#28322c9e;white-space:nowrap;position:absolute;transform:translateY(-50%)}.seismo .margin.l{left:6px}.seismo .margin.r{text-align:right;right:6px}.seismo .margin.day{color:#28322cd9;font-weight:700}.seismo .pen{pointer-events:none;will-change:transform;position:absolute;top:0;left:0}.seismo .pen .nib{background:radial-gradient(circle at 35% 35%, #ff8f73, var(--red) 55%, #6b120c);border-radius:50%;width:10px;height:10px;position:absolute;top:-5px;left:-5px;box-shadow:0 0 0 3px #b3261e2e,0 0 14px #b3261e8c}.seismo .pen .tag{font:400 10px/1.25 var(--m);color:var(--paper);white-space:nowrap;background:#1a1713e0;border-radius:2px;padding:3px 6px;position:absolute;top:9px;left:12px}.seismo .pen.flip .tag{left:auto;right:12px}.seismo .pen.above .tag{top:auto;bottom:9px}.seismo .cursor{pointer-events:none;background:#1e4fa373;width:1px;position:absolute;top:0;bottom:0}.seismo .cursor span{top:var(--y,0);font:400 10px/1.3 var(--m);color:var(--paper);white-space:pre;background:#171512e6;border-radius:2px;padding:3px 6px;position:absolute;left:8px}.seismo .cursor.flip span{left:auto;right:8px}.seismo .playhead{background:var(--amber);pointer-events:none;width:2px;margin-left:-1px;position:absolute;box-shadow:0 0 10px #e8a33ae6}.seismo .blank{background:var(--paper);text-align:center;max-width:30em;font:400 14px/1.5 var(--f);color:#59523f;margin:0 auto;padding:14px 18px;position:absolute;inset:40% 10% auto;box-shadow:0 0 0 1px #40706040}.seismo .legend{font:400 11px/1.4 var(--m);color:var(--enamel-dim);flex-wrap:wrap;gap:4px 22px;margin-top:10px;display:flex}.seismo .legend p{margin:0}.seismo .legend .lt{color:var(--enamel);margin-right:4px}.seismo .rail{flex-direction:column;grid-area:rail;gap:20px;min-width:0;display:flex}.seismo .dial{margin:0}.seismo .dial canvas{aspect-ratio:1;width:100%;display:block}.seismo .dial figcaption{font:400 11px/1.45 var(--f);color:var(--enamel-dim);margin-top:6px}.seismo .controls{background:linear-gradient(180deg, var(--case-hi), #1d1a16);border:1px solid var(--rim);border-radius:4px;grid-template-columns:1fr 1fr;grid-auto-flow:dense;gap:14px;padding:14px;display:grid;box-shadow:inset 0 1px #ffffff0a}.seismo .field{border:0;gap:5px;min-width:0;margin:0;padding:0;display:grid}.seismo .field>span,.seismo .field legend{font:700 10px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--enamel-dim);padding:0}.seismo .field legend{margin-bottom:5px}.seismo label.field{grid-column:1/-1}.seismo select{width:100%;font:400 13px/1.2 var(--f);color:var(--enamel);background:linear-gradient(45deg, transparent 50%, var(--enamel-dim) 50%) right 15px center / 5px 5px no-repeat, linear-gradient(-45deg, transparent 50%, var(--enamel-dim) 50%) right 10px center / 5px 5px no-repeat, #12100d;border:1px solid var(--rim);appearance:none;border-radius:3px;padding:8px 30px 8px 10px}.seismo select option{color:var(--enamel);background:#12100d}.seismo .rows{grid-column:2/3}.seismo .seg{display:flex}.seismo .seg label{flex:1;position:relative}.seismo .seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seismo .seg span{white-space:nowrap;text-align:center;font:400 12px/1.2 var(--m);color:var(--enamel-dim);border:1px solid var(--rim);background:#12100d;margin-left:-1px;padding:8px 2px;display:block}.seismo .seg label:first-of-type span{border-radius:3px 0 0 3px;margin-left:0}.seismo .seg label:last-of-type span{border-radius:0 3px 3px 0}.seismo .seg input:checked+span{color:#1b160d;background:var(--amber);border-color:var(--amber)}.seismo .seg input:focus-visible+span,.seismo .knob button:focus-visible,.seismo .listen:focus-visible,.seismo select:focus-visible,.seismo .quakes button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.seismo .gain{grid-column:1/2}.seismo .knob{border:1px solid var(--rim);background:#12100d;border-radius:3px;grid-template-columns:34px 1fr 34px;align-items:stretch;display:grid}.seismo .knob button{color:var(--enamel);font:700 16px/1 var(--m);cursor:pointer;background:0 0;border:0;padding:0}.seismo .knob button:hover{color:var(--amber)}.seismo .knob output{font:400 13px/1.2 var(--m);color:var(--amber);border-inline:1px solid var(--rim);place-items:center;padding:7px 0;display:grid}.seismo .listen{min-height:36px;font:700 12px/1.1 var(--f);letter-spacing:.04em;color:#1b160d;background:var(--enamel);cursor:pointer;border:0;border-radius:3px;grid-column:1/-1;justify-content:center;align-items:center;gap:8px;padding:7px 10px;display:flex}.seismo .listen:disabled{opacity:.45;cursor:default}.seismo .listen .glyph{border-left:8px solid;border-block:5px solid #0000;width:0;height:0}.seismo .listen[aria-pressed=true] .glyph{border:0;border-inline:3px solid;width:8px;height:10px}.seismo .hint{font:400 11px/1.4 var(--f);color:var(--enamel-dim);grid-column:1/-1;margin:0}.seismo .quakes h2{font:700 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--enamel-dim);margin:0 0 8px}.seismo .quakes .note{font:400 12px/1.4 var(--f);color:var(--enamel-dim);margin:0 0 8px}.seismo .quakes ol{gap:2px;margin:0;padding:0;list-style:none;display:grid}.seismo .quakes button{text-align:left;width:100%;color:var(--enamel);cursor:pointer;font:inherit;background:0 0;border:1px solid #0000;border-radius:3px;grid-template-columns:44px 1fr;gap:2px 10px;padding:8px 10px;display:grid}.seismo .quakes button:hover{background:var(--case-hi)}.seismo .quakes button[aria-pressed=true]{background:var(--case-hi);border-color:var(--rim)}.seismo .quakes .mag{font:700 17px/1 var(--m);color:var(--amber);grid-row:span 3;align-self:center}.seismo .quakes .mag.big{color:#ff7a5c}.seismo .quakes .what{font:400 13px/1.3 var(--f)}.seismo .quakes .when{font:400 11px/1.3 var(--m);color:var(--enamel-dim)}.seismo .credit p{font:400 11px/1.5 var(--f);color:#7b7464;margin:0}@media (width<=900px){.seismo{--rail:1fr;grid-template-columns:minmax(0,1fr);grid-template-areas:"plate""sheet""rail";gap:14px;padding:14px 16px 32px}.seismo .plate{grid-template-columns:1fr auto;grid-template-areas:"home lamp""title title""sta sta";align-items:center;gap:8px 12px}.seismo h1{font-size:24px}.seismo .heading{flex-direction:column;gap:2px}.seismo .rail{grid-template-columns:minmax(0,1fr);display:grid}.seismo .controls{order:-1}.seismo .dial{justify-self:center;width:100%;max-width:420px}}
