*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{color:#fff;background-color:#3b3b3b;background-image:radial-gradient(#aaa 1px,transparent 1px),radial-gradient(#666 1px,transparent 1px);background-position:0 0,25px 25px;background-size:50px 50px;font-family:"Times New Roman",Times,serif}

.landing{display:flex;justify-content:center;align-items:flex-start;padding:24px}
.hero{position:relative;width:min(1000px,100%);padding:36px 32px 44px;display:grid;grid-template-rows:auto auto;align-content:center;row-gap:57px;background:#050505;border:3px ridge #aaa;overflow:hidden;text-align:left}
.hero::before,.oauth-shell::before{position:absolute;inset:0;pointer-events:none;content:"";background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.045) 50%,transparent 50.2%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 100%,100% 6px;mix-blend-mode:screen}
.hero-identity{position:relative;z-index:2;width:100%}
.hero-mark{position:relative;z-index:2;padding-right:.1em;color:#eee;font-size:clamp(120px,26vw,300px);font-style:italic;font-weight:bold;line-height:.75;letter-spacing:-.1em;text-shadow:6px 6px #999,12px 12px #333;white-space:nowrap}
.rainbow{position:relative;z-index:1;width:100%;height:16px;margin-top:10px;background:linear-gradient(90deg,#f00 0 16.6%,#ff0 16.6% 33.2%,#0f0 33.2% 49.8%,#0ff 49.8% 66.4%,#00f 66.4% 83%,#f0f 83%);box-shadow:0 0 14px #0ff,0 0 28px #f0f;filter:saturate(1.4)}
.hero-copy{position:relative;z-index:2;display:grid;gap:10px 24px}
.dictionary-entry{margin:0;color:#aaa;font-size:clamp(16px,2.1vw,21px);line-height:1.2;letter-spacing:.02em}
.dictionary-entry b{color:#eee;font-size:1.15em}
.dictionary-entry span{font-style:italic}
.hero h1{max-width:720px;margin:0;color:#ddd;font-size:clamp(34px,5.3vw,54px);font-style:italic;font-weight:normal;line-height:1.03;letter-spacing:-.025em;text-wrap:balance}

.oauth-body{min-height:100vh;display:grid;place-items:center;padding:24px}
.oauth-shell{position:relative;width:min(560px,100%);padding:28px;background:#050505;border:3px ridge #aaa;overflow:hidden}
.oauth-brand,.oauth-card{position:relative;z-index:2}
.oauth-brand{display:block;color:#eee;font-size:72px;font-style:italic;font-weight:bold;line-height:.8;letter-spacing:-.1em;text-decoration:none;text-shadow:3px 3px #777,6px 6px #222}
.oauth-shell .rainbow{height:9px;margin:14px 0 30px;box-shadow:0 0 9px #0ff,0 0 18px #f0f}
.oauth-card{padding:28px;background:#0a0a0a;border:3px ridge #555}
.oauth-card h1{margin:0 0 18px;color:#eee;font-size:clamp(32px,8vw,48px);font-style:italic;font-weight:normal;line-height:1;letter-spacing:-.025em}
.oauth-card p{margin:0 0 24px;color:#bbb;font-size:19px;line-height:1.35}
.oauth-card .muted{color:#999}
.oauth-card .error{padding:14px;color:#fff;background:#4b1111;border-left:7px solid #d55}
.oauth-card strong{color:#fff}
.oauth-card form{display:grid;gap:18px}
.oauth-card label{display:grid;gap:8px;color:#ccc;font:700 13px/1 "Courier New",Courier,monospace;letter-spacing:.08em;text-transform:uppercase}
.oauth-card input:not([type="hidden"]){width:100%;padding:13px 14px;color:#111;background:#eee;border:3px inset #ccc;border-radius:0;font:20px/1.2 "Times New Roman",Times,serif;outline:none}
.oauth-card input:not([type="hidden"]):focus{border-color:#fff;box-shadow:0 0 0 2px #777}
.oauth-card button{justify-self:start;padding:14px 18px;color:#050505;background:#eee;border:3px outset #ccc;border-radius:0;cursor:pointer;font:700 14px/1 "Courier New",Courier,monospace;letter-spacing:.04em;text-transform:uppercase}
.oauth-card button:hover,.oauth-card button:focus-visible{color:#fff;background:#222;outline:2px solid #eee;outline-offset:3px}

.ops-body{min-height:100vh;padding:24px;text-align:left}
.ops-shell{width:min(1400px,100%);margin:0 auto;padding:28px;background:#050505;border:3px ridge #aaa}
.ops-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:34px;font:700 12px/1 "Courier New",Courier,monospace;letter-spacing:.1em}
.ops-header span{color:#999}
.ops-header a,.ops-back a{color:#111;background:#ccc;padding:9px 11px;border:3px outset #aaa;text-decoration:none}
.ops-intro>p{margin:0 0 12px;color:#999;font:700 13px/1 "Courier New",Courier,monospace;letter-spacing:.14em}
.ops-intro h1{max-width:1000px;margin:0;color:#eee;font-size:clamp(38px,6vw,70px);font-style:italic;font-weight:normal;line-height:.98;letter-spacing:-.025em;overflow-wrap:anywhere}
.ops-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:36px 0}
.ops-stat{padding:16px;background:#111;border:3px ridge #555}
.ops-stat span,.ops-stat b{display:block}
.ops-stat span{color:#999;font:700 11px/1.2 "Courier New",Courier,monospace;letter-spacing:.08em}
.ops-stat b{margin-top:12px;color:#eee;font-size:34px;line-height:1}
.ops-panel{margin-top:28px;padding:22px;background:#0a0a0a;border:3px ridge #555}
.ops-panel-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:18px}
.ops-panel-heading p{margin:0;color:#eee;font:700 16px/1 "Courier New",Courier,monospace;letter-spacing:.1em}
.ops-panel-heading span{color:#888;font:13px/1 "Courier New",Courier,monospace}
.ops-table-wrap{overflow-x:auto}
.ops-panel table{width:100%;border-collapse:collapse;color:#bbb;font-size:15px}
.ops-panel th,.ops-panel td{padding:12px 14px;border:1px solid #393939;vertical-align:top;text-align:left}
.ops-panel th{color:#111;background:#c8c8c8;font:700 11px/1.2 "Courier New",Courier,monospace;letter-spacing:.06em;text-transform:uppercase}
.ops-panel td{background:#111;line-height:1.35}
.ops-panel td b,.ops-panel td span{display:block}
.ops-panel td span{margin-top:4px;color:#888}
.ops-panel a,.ops-back a{color:#eee}
.ops-panel td>a{font-family:"Courier New",Courier,monospace}
.ops-panel time{color:#888;font:12px/1.3 "Courier New",Courier,monospace;white-space:nowrap}
.ops-preview{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-back{margin-bottom:28px}
.ops-back a{display:inline-block;color:#111;font-size:12px;font-weight:bold;letter-spacing:.06em}
.ops-participants{margin-top:20px;color:#bbb;font:18px/1.4 "Courier New",Courier,monospace}
.ops-messages{display:grid;gap:14px;margin-top:36px}
.ops-message{padding:20px;background:#0a0a0a;border:3px ridge #555}
.ops-message header{display:flex;justify-content:space-between;gap:20px;color:#eee;font:14px/1.3 "Courier New",Courier,monospace}
.ops-message header time{color:#888;font-size:12px}
.ops-message pre{margin:18px 0;color:#ccc;font:17px/1.45 "Times New Roman",Times,serif;white-space:pre-wrap;overflow-wrap:anywhere}
.ops-message>span{color:#666;font:11px/1 "Courier New",Courier,monospace}

@media(max-width:700px){
  .landing,.oauth-body{padding:0}
  .hero{min-height:100vh;padding:26px 18px 32px;row-gap:49px;border-inline:0}
  .hero-mark{font-size:clamp(110px,43vw,190px)}
  .hero .rainbow{height:12px;margin-top:8px}
  .hero h1{font-size:clamp(34px,9.5vw,46px)}
  .oauth-shell{min-height:100vh;padding:22px 16px;border-inline:0}
  .oauth-brand{font-size:62px}
  .oauth-card{padding:24px 18px}
  .ops-body{padding:0}
  .ops-shell{min-height:100vh;padding:22px 14px;border-inline:0}
  .ops-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-panel{padding:14px}
  .ops-message header{display:grid;gap:6px}
}