Initial commit — Singular Particular Space v1
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
735
Writings/sneaky-bastards.html
Normal file
735
Writings/sneaky-bastards.html
Normal file
@@ -0,0 +1,735 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BU-88-L3S-X7# | CODENAME: SNEAKY BASTARDS</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ── RESET ─────────────────────────────────────────────── */
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
|
||||
/* ── VARS ───────────────────────────────────────────────── */
|
||||
:root{
|
||||
--bg:#040410;
|
||||
--surf:#0b0b20;
|
||||
--pan:#10102c;
|
||||
--pan2:#161638;
|
||||
--bd0:#18184a;
|
||||
--bd1:#2a2a70;
|
||||
--green:#00ff66;
|
||||
--greendim:#006630;
|
||||
--cyan:#00e8ff;
|
||||
--mag:#ff00cc;
|
||||
--yel:#ffee00;
|
||||
--ora:#ff6600;
|
||||
--red:#ff2255;
|
||||
--purp:#bb44ff;
|
||||
--txt:#a0ffb0;
|
||||
--txtd:#336644;
|
||||
--txb:#e8ffe8;
|
||||
--glo-g:0 0 10px rgba(0,255,102,.55);
|
||||
--glo-c:0 0 10px rgba(0,232,255,.55);
|
||||
--glo-m:0 0 10px rgba(255,0,204,.55);
|
||||
--glo-y:0 0 10px rgba(255,238,0,.55);
|
||||
--glo-o:0 0 10px rgba(255,102,0,.55);
|
||||
--px:'Press Start 2P',monospace;
|
||||
--mn:'VT323','Courier New',monospace;
|
||||
}
|
||||
|
||||
/* ── BASE ───────────────────────────────────────────────── */
|
||||
html{background:var(--bg);color:var(--txt);font-family:var(--mn);font-size:17px;line-height:1.75;scroll-behavior:smooth}
|
||||
body{min-height:100vh;overflow-x:hidden}
|
||||
|
||||
/* ── SCANLINES ──────────────────────────────────────────── */
|
||||
body::before{
|
||||
content:'';position:fixed;inset:0;
|
||||
background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 4px);
|
||||
pointer-events:none;z-index:9999;
|
||||
}
|
||||
/* vignette */
|
||||
body::after{
|
||||
content:'';position:fixed;inset:0;
|
||||
background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.65) 100%);
|
||||
pointer-events:none;z-index:9998;
|
||||
}
|
||||
|
||||
/* ── HEADER ─────────────────────────────────────────────── */
|
||||
.hdr{
|
||||
background:var(--surf);
|
||||
border-bottom:2px solid var(--green);
|
||||
box-shadow:0 0 28px rgba(0,255,102,.2),0 2px 0 var(--green);
|
||||
padding:22px 36px 18px;
|
||||
}
|
||||
.hdr-cls{font-family:var(--px);font-size:7px;color:var(--red);text-shadow:0 0 8px rgba(255,34,85,.9);letter-spacing:4px;margin-bottom:8px}
|
||||
.hdr-doc{font-family:var(--px);font-size:7px;color:var(--txtd);letter-spacing:2px;margin-bottom:10px}
|
||||
.hdr-tit{font-family:var(--px);font-size:13px;color:var(--green);text-shadow:var(--glo-g);line-height:2}
|
||||
.hdr-sub{font-family:var(--px);font-size:9px;color:var(--cyan);text-shadow:var(--glo-c);margin-top:6px}
|
||||
.hdr-meta{font-size:15px;color:var(--txtd);margin-top:6px}
|
||||
|
||||
/* ── TAB NAV ────────────────────────────────────────────── */
|
||||
.tnav{
|
||||
background:var(--surf);
|
||||
border-bottom:2px solid var(--bd1);
|
||||
display:flex;overflow-x:auto;
|
||||
position:sticky;top:0;z-index:100;
|
||||
}
|
||||
.tnav button{
|
||||
font-family:var(--px);font-size:7px;color:var(--txtd);
|
||||
background:transparent;border:none;
|
||||
border-right:1px solid var(--bd0);
|
||||
border-bottom:3px solid transparent;
|
||||
padding:14px 18px 11px;cursor:pointer;
|
||||
white-space:nowrap;
|
||||
transition:color 100ms,border-color 100ms;
|
||||
line-height:1.7;
|
||||
}
|
||||
.tnav button:hover{color:var(--cyan);text-shadow:var(--glo-c);border-bottom-color:var(--cyan)}
|
||||
.tnav button.act{color:var(--green);text-shadow:var(--glo-g);border-bottom-color:var(--green);background:rgba(0,255,102,.04)}
|
||||
.tnav button.act::before{content:'▶ '}
|
||||
|
||||
/* ── WRAP ───────────────────────────────────────────────── */
|
||||
.wrap{max-width:860px;margin:0 auto;padding:40px 32px 80px}
|
||||
|
||||
/* ── TABS ───────────────────────────────────────────────── */
|
||||
.tab{display:none}.tab.act{display:block}
|
||||
|
||||
/* ── DOC FRAME ──────────────────────────────────────────── */
|
||||
.doc{
|
||||
background:var(--pan);
|
||||
border:1px solid var(--bd1);
|
||||
border-left:3px solid var(--green);
|
||||
box-shadow:inset 0 0 40px rgba(0,255,102,.025);
|
||||
padding:32px 40px;margin-bottom:28px;
|
||||
}
|
||||
.memo-hd{border-bottom:1px solid var(--bd1);padding-bottom:18px;margin-bottom:20px}
|
||||
.memo-dn{font-family:var(--px);font-size:7px;color:var(--cyan);text-shadow:var(--glo-c);margin-bottom:14px}
|
||||
.memo-ln{font-size:16px;color:var(--txtd);margin-bottom:4px}
|
||||
.memo-ln strong{color:var(--txt)}
|
||||
|
||||
/* ── LOG ENTRY ──────────────────────────────────────────── */
|
||||
.log{
|
||||
background:var(--pan2);
|
||||
border:1px solid var(--bd0);
|
||||
border-left:3px solid var(--cyan);
|
||||
padding:20px 26px;margin:22px 0;
|
||||
}
|
||||
.log-id{font-family:var(--px);font-size:8px;color:var(--cyan);text-shadow:var(--glo-c);display:block;margin-bottom:14px}
|
||||
.log-ts{font-size:14px;color:var(--txtd);margin-left:10px}
|
||||
|
||||
/* ── PROSE ──────────────────────────────────────────────── */
|
||||
.prose p{font-size:19px;color:var(--txt);margin-bottom:16px;line-height:1.8}
|
||||
.prose p:last-child{margin-bottom:0}
|
||||
.prose em{color:var(--txtd);font-style:italic}
|
||||
.ba{color:var(--mag)} /* bracket-alt */
|
||||
|
||||
/* ── SIGN-OFF ────────────────────────────────────────────── */
|
||||
.signoff{border-top:1px solid var(--bd0);margin-top:22px;padding-top:14px;font-size:15px;color:var(--txtd);font-style:italic}
|
||||
|
||||
/* ── TRANSL NOTES ────────────────────────────────────────── */
|
||||
.tn{border:1px solid var(--mag);border-left:3px solid var(--mag);background:rgba(255,0,204,.03);padding:22px 26px;margin:24px 0}
|
||||
.tn .slabel{font-family:var(--px);font-size:7px;color:var(--mag);text-shadow:var(--glo-m);margin-bottom:12px;display:block}
|
||||
|
||||
/* ── CHALLENGE BLOCK ─────────────────────────────────────── */
|
||||
.chall{border:1px solid var(--bd0);border-left:3px solid var(--yel);background:rgba(255,238,0,.025);padding:16px 20px;margin:22px 0;font-size:16px;color:var(--txtd)}
|
||||
.chall .slabel{font-family:var(--px);font-size:7px;color:var(--yel);text-shadow:var(--glo-y);margin-bottom:10px;display:block}
|
||||
.chall p{margin-bottom:6px}
|
||||
.auth-note{border:1px solid var(--bd0);border-left:3px solid var(--purp);background:rgba(187,68,255,.03);padding:14px 20px;font-size:16px;color:var(--txtd);font-style:italic;margin-top:10px}
|
||||
|
||||
/* ── DECODER ─────────────────────────────────────────────── */
|
||||
.decoder{position:relative;display:inline}
|
||||
.decoder-trigger{
|
||||
background:none;border:none;padding:0 2px;cursor:pointer;
|
||||
font-family:var(--mn);font-size:inherit;
|
||||
color:var(--yel);text-shadow:var(--glo-y);
|
||||
text-decoration:underline;text-decoration-color:rgba(255,238,0,.35);
|
||||
text-underline-offset:3px;line-height:inherit;
|
||||
transition:color 100ms;
|
||||
}
|
||||
.decoder-trigger:hover,.decoder-trigger.open{color:#fff;text-shadow:0 0 14px var(--yel)}
|
||||
.decoder-trigger::after{content:' ▾';font-size:.7em;opacity:.7}
|
||||
.decoder-trigger.open::after{content:' ▴'}
|
||||
.decoder-panel{
|
||||
display:none;position:absolute;
|
||||
top:calc(100% + 6px);left:0;z-index:200;
|
||||
width:300px;
|
||||
background:#08082a;
|
||||
border:1px solid var(--yel);
|
||||
box-shadow:0 0 18px rgba(255,238,0,.25),inset 0 0 24px rgba(0,0,0,.6);
|
||||
padding:14px 16px;
|
||||
}
|
||||
.decoder-panel.open{display:block}
|
||||
.decoder-panel.flip-left{left:auto;right:0}
|
||||
.dec-label{display:block;font-family:var(--px);font-size:6px;color:var(--txtd);letter-spacing:2px;margin-bottom:6px}
|
||||
.dec-term{display:block;font-family:var(--px);font-size:8px;color:var(--yel);text-shadow:var(--glo-y);margin-bottom:8px;line-height:1.6}
|
||||
.decoder-panel .dp{display:block;font-size:15px;color:var(--txb);line-height:1.65;margin-bottom:0}
|
||||
.dec-link{display:block;margin-top:8px;font-size:13px;color:var(--cyan);text-decoration:none}
|
||||
.dec-link:hover{text-decoration:underline}
|
||||
|
||||
/* ── MARGIN NOTE ─────────────────────────────────────────── */
|
||||
.mn{position:relative;display:inline}
|
||||
.mn-trig{
|
||||
background:none;border:none;padding:0 1px;cursor:pointer;
|
||||
font-family:var(--px);font-size:9px;
|
||||
color:var(--ora);text-shadow:var(--glo-o);
|
||||
vertical-align:super;line-height:0;
|
||||
transition:color 100ms;
|
||||
}
|
||||
.mn-trig:hover,.mn-trig.open{color:#fff;text-shadow:0 0 14px var(--ora)}
|
||||
.mn-panel{
|
||||
display:none;position:absolute;
|
||||
top:calc(100% + 6px);left:-20px;z-index:200;
|
||||
width:280px;
|
||||
background:#180800;
|
||||
border:1px solid var(--ora);
|
||||
box-shadow:0 0 16px rgba(255,102,0,.25),inset 0 0 24px rgba(0,0,0,.6);
|
||||
padding:14px 16px;
|
||||
}
|
||||
.mn-panel.open{display:block}
|
||||
.mn-panel.flip-left{left:auto;right:-20px}
|
||||
.mn-label{display:block;font-family:var(--px);font-size:6px;color:var(--ora);text-shadow:var(--glo-o);letter-spacing:2px;margin-bottom:6px}
|
||||
.mn-panel .dp{display:block;font-size:15px;color:#ffcc99;line-height:1.65;margin-bottom:0}
|
||||
|
||||
/* ── LB TRIGGER ──────────────────────────────────────────── */
|
||||
.lbt{
|
||||
background:none;border:none;padding:0 2px;cursor:pointer;
|
||||
font-family:var(--mn);font-size:inherit;
|
||||
color:var(--mag);text-shadow:var(--glo-m);
|
||||
text-decoration:underline;text-decoration-color:rgba(255,0,204,.35);
|
||||
text-underline-offset:3px;line-height:inherit;
|
||||
transition:color 100ms;
|
||||
}
|
||||
.lbt:hover{color:#fff;text-shadow:0 0 14px var(--mag)}
|
||||
|
||||
/* ── LIGHTBOX ────────────────────────────────────────────── */
|
||||
.lb-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1000;align-items:center;justify-content:center;padding:20px}
|
||||
.lb-ov.open{display:flex}
|
||||
.lb-box{background:var(--pan);border:1px solid var(--mag);box-shadow:0 0 50px rgba(255,0,204,.25);max-width:680px;width:100%;max-height:88vh;overflow-y:auto}
|
||||
.lb-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--bd1);position:sticky;top:0;background:var(--pan)}
|
||||
.lb-title{font-family:var(--px);font-size:8px;color:var(--mag);text-shadow:var(--glo-m)}
|
||||
.lb-close{background:none;border:1px solid var(--bd1);color:var(--txtd);font-size:15px;padding:4px 10px;cursor:pointer;font-family:var(--mn);transition:color 100ms,border-color 100ms}
|
||||
.lb-close:hover{color:var(--red);border-color:var(--red)}
|
||||
.lb-body{padding:24px 28px}
|
||||
.lb-body h3{font-family:var(--px);font-size:8px;color:var(--cyan);text-shadow:var(--glo-c);margin-bottom:12px;margin-top:20px;line-height:1.7}
|
||||
.lb-body h3:first-child{margin-top:0}
|
||||
.lb-body p{font-size:16px;color:var(--txt);line-height:1.8;margin-bottom:14px}
|
||||
.lb-body p:last-child{margin-bottom:0}
|
||||
.lb-body strong{color:var(--green)}
|
||||
|
||||
/* ── ACCORDION ───────────────────────────────────────────── */
|
||||
.acc-item{border:1px solid var(--bd0);border-left:3px solid var(--cyan);margin-bottom:8px;background:var(--pan)}
|
||||
.acc-trig{width:100%;background:none;border:none;padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left}
|
||||
.acc-text{font-family:var(--px);font-size:7px;color:var(--txtd);line-height:1.8}
|
||||
.acc-trig:hover .acc-text,.acc-trig.open .acc-text{color:var(--cyan);text-shadow:var(--glo-c)}
|
||||
.acc-arr{font-size:18px;color:var(--txtd);flex-shrink:0;transition:transform 150ms}
|
||||
.acc-trig.open .acc-arr{transform:rotate(180deg);color:var(--cyan)}
|
||||
.acc-pan{display:none;padding:0 20px 18px;border-top:1px solid var(--bd0)}
|
||||
.acc-pan.open{display:block}
|
||||
.acc-pan p{font-size:16px;color:var(--txt);line-height:1.8;margin-top:14px}
|
||||
.acc-pan p:first-child{margin-top:12px}
|
||||
.acc-pan strong{color:var(--green)}
|
||||
.acc-pan em{color:var(--txtd)}
|
||||
|
||||
/* ── EDU TABS ────────────────────────────────────────────── */
|
||||
.edu-sec{margin-bottom:38px}
|
||||
.edu-tit{font-family:var(--px);font-size:9px;color:var(--green);text-shadow:var(--glo-g);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--bd1);line-height:1.8}
|
||||
.edu-intro{font-size:16px;color:var(--txt);line-height:1.8;margin-bottom:20px}
|
||||
|
||||
/* ── FURTHER READING ─────────────────────────────────────── */
|
||||
.rg{margin-bottom:30px}
|
||||
.rg-tit{font-family:var(--px);font-size:7px;color:var(--yel);text-shadow:var(--glo-y);margin-bottom:12px;line-height:1.8}
|
||||
.ri{display:block;border:1px solid var(--bd0);border-left:2px solid var(--yel);padding:12px 16px;margin-bottom:8px;text-decoration:none;background:var(--pan);transition:border-color 100ms,background 100ms}
|
||||
.ri:hover{border-left-color:var(--cyan);background:var(--pan2)}
|
||||
.ri-title{font-size:16px;color:var(--cyan);display:block;margin-bottom:4px}
|
||||
.ri-desc{font-size:14px;color:var(--txtd);display:block}
|
||||
|
||||
/* ── DIVIDER ─────────────────────────────────────────────── */
|
||||
.pdiv{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.3;margin:32px 0}
|
||||
|
||||
/* ── STATUS BAR ──────────────────────────────────────────── */
|
||||
.sbar{font-family:var(--px);font-size:7px;color:var(--txtd);display:flex;flex-wrap:wrap;gap:20px;padding:8px 0;border-top:1px solid var(--bd0);margin-top:40px}
|
||||
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
|
||||
.blink{animation:blink 1.3s step-end infinite}
|
||||
|
||||
/* ── SCROLLBAR ───────────────────────────────────────────── */
|
||||
::-webkit-scrollbar{width:5px}
|
||||
::-webkit-scrollbar-track{background:var(--surf)}
|
||||
::-webkit-scrollbar-thumb{background:var(--bd1)}
|
||||
::-webkit-scrollbar-thumb:hover{background:var(--green)}
|
||||
|
||||
/* ── RESPONSIVE ──────────────────────────────────────────── */
|
||||
@media(max-width:640px){
|
||||
.wrap{padding:24px 16px 60px}
|
||||
.doc{padding:20px 16px}
|
||||
.hdr{padding:16px 16px 14px}
|
||||
.hdr-tit{font-size:9px}
|
||||
.tnav button{font-size:6px;padding:12px 10px 9px}
|
||||
.decoder-panel,.mn-panel{width:240px}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="hdr">
|
||||
<div class="hdr-cls">◈ TOP SECRET ◈ INTERSTELLAR WAR MINISTRY ◈ RESTRICTED ACCESS ◈</div>
|
||||
<div class="hdr-doc">DOCUMENT NO: BU-88-L3S-X7# ∙ ALIEN-HOMELAND AFFAIRS: ARCHAEOLOGY DIVISION</div>
|
||||
<div class="hdr-tit">CODENAME: SNEAKY BASTARDS</div>
|
||||
<div class="hdr-sub">▸ ALLIED INTERSTELLAR ARCHIVES ∙ TRANSLATION: TEEMO ORIANNA, 12/06/2881</div>
|
||||
<div class="hdr-meta">First confirmed Atarian operative log ∙ Active: mid-2014 – December 2015 ∙ Predates First Contact by ~300 years</div>
|
||||
</header>
|
||||
|
||||
<nav class="tnav">
|
||||
<button class="act" onclick="switchTab('t-story',this)">THE LOG</button>
|
||||
<button onclick="switchTab('t-world',this)">THE WORLD</button>
|
||||
<button onclick="switchTab('t-craft',this)">THE CRAFT</button>
|
||||
<button onclick="switchTab('t-read',this)">FURTHER READING</button>
|
||||
</nav>
|
||||
|
||||
<main class="wrap">
|
||||
|
||||
<!-- ═══════════════════ TAB 1 – THE LOG ═══════════════════ -->
|
||||
<div class="tab act" id="t-story">
|
||||
|
||||
<div class="doc">
|
||||
<div class="memo-hd">
|
||||
<div class="memo-dn">MEMORANDUM ∙ ALIEN-HOMELAND AFFAIRS: ARCHAEOLOGY DIVISION</div>
|
||||
<div class="memo-ln"><em>To:</em> <strong>Gen. Taric Graves-Ashe, Interstellar War Ministry</strong></div>
|
||||
<div class="memo-ln"><em>Document No:</em> <strong>BU-88-L3S-X7# (Codename: Sneaky Bastards)</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="prose">
|
||||
<p>What follows are excerpts from the log of the first confirmed spy for the Atarian Empire. Research indicates that the operative was active from mid-2014, until around December of 2015. This predates
|
||||
<span class="decoder" id="dec-first-contact"><button class="decoder-trigger" onclick="togglePanel('dec-first-contact',this)">First Contact</button><span class="decoder-panel"><span class="dec-label">WORLD-INTERNAL</span><span class="dec-term">First Contact</span><span class="dp">The first officially acknowledged meeting between humanity and the Atarian Empire — roughly 300 years after this spy's activity. It is the document's temporal anchor: by 2881, the Atarians have been a known presence for about three centuries, but this log proves they were watching long before that.</span></span></span>
|
||||
with the Atarian menace by around 300 years — confirming the long-held assumption that the Atarians were interested in our planet's resources long before we were aware of their existence.</p>
|
||||
|
||||
<p>This, in turn, vindicates those responsible for the <button class="lbt" onclick="openLightbox('lb-firstblood')">First Blood Fiasco</button>, who have long been criticized for acting to deliberately create hostilities between Earth and the Atarian Empire, by clearly showing that the Atarians were intent on hostility from the start. It has, however, become a subject of scholarly debate as to whether or not these early reconnoitres of our home planet actually contributed to the early victories of the Atarians in the subsequent
|
||||
<span class="decoder" id="dec-firstwars"><button class="decoder-trigger" onclick="togglePanel('dec-firstwars',this)">First Star Wars</button><span class="decoder-panel"><span class="dec-label">WORLD-INTERNAL</span><span class="dec-term">First Star Wars</span><span class="dp">The first military conflict between humanity and the Atarian Empire. The name's proximity to the 1977 film franchise is presumably intentional — one of several jokes the story allows itself inside the serious bureaucratic frame.</span></span></span>.</p>
|
||||
|
||||
<p>It has been translated into English, to the best of our ability, for your convenience, as I'm sure you would find Ancient Atarian mostly unintelligible. I have also included notes in [brackets] where multiple interpretations of specific terms exist.<span class="mn" id="mn-brackets"><button class="mn-trig" onclick="togglePanel('mn-brackets',this)">✎</button><span class="mn-panel"><span class="mn-label">CRAFT NOTE</span><span class="dp">The bracket system is established before a single log entry appears. The reader arrives at the translated text already holding the method — primed to carry two readings simultaneously. Every word that follows casts a shadow.</span></span></span></p>
|
||||
</div>
|
||||
<div class="signoff">Albert K. Waffling<br>Head of Alien-Homeland Affairs: Archaeology Division</div>
|
||||
</div>
|
||||
|
||||
<!-- LOG 001 -->
|
||||
<div class="log">
|
||||
<span class="log-id">▶ LOG 001 <span class="log-ts">267/32/71354 — 200:43:6798</span></span>
|
||||
<div class="prose">
|
||||
<p>Entrance into atmosphere successful, but rough.
|
||||
<span class="decoder" id="dec-walnut"><button class="decoder-trigger" onclick="togglePanel('dec-walnut',this)">Ship [Walnut]</button><span class="decoder-panel"><span class="dec-label">WORLD-INTERNAL + TRANSLATION NOTE</span><span class="dec-term">Walnut / Ship</span><span class="dp">The Atarian word for their spacecraft translates as "Walnut." This will pay off spectacularly in Log 010, where male anatomy is described as "a stick and two ships [walnuts]." The alien has no idea what they've written. The reader notices immediately. That gap is the joke.</span></span></span>
|
||||
has taken a small amount of damage — will need to be
|
||||
<span class="decoder" id="dec-destroy"><button class="decoder-trigger" onclick="togglePanel('dec-destroy',this)">destroyed [could also mean 'repaired' — the difference in terms is a single character]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Destroyed / Repaired</span><span class="dp">The first bracket note — and already the stakes of the whole document are announced. "Destroy" and "repair" differ by a single character in Ancient Atarian. This ambiguity will return as the story's exit hinge in Log 101.</span></span></span>.<span class="mn" id="mn-gaps"><button class="mn-trig" onclick="togglePanel('mn-gaps',this)">✎</button><span class="mn-panel"><span class="mn-label">CRAFT NOTE</span><span class="dp">After entry 001, the next log is 003. Then 010, 035, 100, 101. The gaps are never remarked on. Fifty-nine missing entries lie between 035 and 100 alone. The story implies a much longer, stranger surveillance mission than we ever see — which is funnier than showing it.</span></span></span>
|
||||
Causes quite a few heated debates at parties.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOG 003 -->
|
||||
<div class="log">
|
||||
<span class="log-id">▶ LOG 003 <span class="log-ts">312/32/71354 — 432:42:8726</span></span>
|
||||
<div class="prose">
|
||||
<p><span class="decoder" id="dec-transform"><button class="decoder-trigger" onclick="togglePanel('dec-transform',this)">Transformation [integration]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Transformation / Integration</span><span class="dp">The translator renders the alien's term for putting on a human disguise as "transformation." The alternative is the softer "integration" — a social process rather than a physical one. The translator is already loading the language before we've read a single log entry.</span></span></span>
|
||||
into apex predator proves difficult. Man-suit is adequate, but
|
||||
<span class="decoder" id="dec-dualsex"><button class="decoder-trigger" onclick="togglePanel('dec-dualsex',this)">dual-sex conversion [<span class="ba">understanding</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Conversion / Understanding</span><span class="dp">The operative — an asexual being — is trying to understand a two-sex species. The official word "conversion" implies a physical or ideological change. The alternative is simply "understanding." The alien is doing biology homework, not body modification.</span></span></span>
|
||||
is problematic. The governing society lacks
|
||||
<span class="decoder" id="dec-homogeny"><button class="decoder-trigger" onclick="togglePanel('dec-homogeny',this)">homogeny [<span class="ba">unity</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Homogeny / Unity</span><span class="dp">Read alongside "too weak [diverse]," this bracket pair is quietly devastating. The official translation frames human diversity as a military vulnerability the spy is cataloguing. The alternative frames it neutrally — an alien noting that further research is needed before meaningful contact. One reading starts a war; the other delays it.</span></span></span>
|
||||
and is therefore too
|
||||
<span class="decoder" id="dec-weak"><button class="decoder-trigger" onclick="togglePanel('dec-weak',this)">weak [<span class="ba">diverse</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Weak / Diverse</span><span class="dp">In the official translation: the operative considers human diversity a weakness to exploit. In the alternative: the alien simply notes that humans are diverse and further study is needed. The same observation — framed as threat assessment versus anthropological note.</span></span></span>
|
||||
to successfully
|
||||
<span class="decoder" id="dec-invade"><button class="decoder-trigger" onclick="togglePanel('dec-invade',this)">invade [<span class="ba">interact with</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE — LOAD-BEARING</span><span class="dec-term">Invade / Interact With</span><span class="dp">The single most consequential bracket pair in the document. "Invade" is the translator's word. The alternative is "interact with." Everywhere you see "invasion" in this text, mentally substitute "interaction" — and the entire spy thriller collapses into an anxious alien trying to figure out how to talk to people.</span></span></span>
|
||||
us. More research is required for successful conversion.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOG 010 -->
|
||||
<div class="log">
|
||||
<span class="log-id">▶ LOG 010 <span class="log-ts">532/32/71354 — 100:12:6735</span></span>
|
||||
<div class="prose">
|
||||
<p>First successful
|
||||
<span class="decoder" id="dec-inv2"><button class="decoder-trigger" onclick="togglePanel('dec-inv2',this)">invasion [<span class="ba">interaction</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Invasion / Interaction</span><span class="dp">By now the reader knows the drill. But repetition accumulates: every recurrence is a reminder that a single translator's word choice is the foundation of the entire geopolitical narrative.</span></span></span>
|
||||
of <button class="lbt" onclick="openLightbox('lb-biology')">apex predator female [<span class="ba">beauty</span>]</button>.<span class="mn" id="mn-clinical"><button class="mn-trig" onclick="togglePanel('mn-clinical',this)">✎</button><span class="mn-panel"><span class="mn-label">CRAFT NOTE</span><span class="dp">The Atarians are asexual, so "female" is a non-concept requiring field definition. The alien builds the vocabulary from scratch, with the clinical precision of a biologist encountering a new species. The comedy lives in the gap between the tone (dry, scientific) and the subject (going to a bar).</span></span></span></p>
|
||||
|
||||
<p>Definition:
|
||||
<span class="decoder" id="dec-female"><button class="decoder-trigger" onclick="togglePanel('dec-female',this)">Female [<span class="ba">beauty</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Female / Beauty</span><span class="dp">The Atarian root word the translator renders as "female" is actually their root word for "beauty." The alien has no gender concept — only an aesthetic one. This makes the clinical anatomical definitions that follow simultaneously absurd and oddly sweet.</span></span></span>
|
||||
— responsible for gestation in dual-sex reproduction. Identified by receptacle organ between lower limbs and dual lactation protrusions in older models.</p>
|
||||
|
||||
<p>Definition:
|
||||
<span class="decoder" id="dec-male"><button class="decoder-trigger" onclick="togglePanel('dec-male',this)">Male [<span class="ba">stick</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Male / Stick</span><span class="dp">The Atarian word for "male" is their word for "stick." The alien identifies males by "a stick and two ships [walnuts] between lower limbs." The alien — who uses "walnut" for their spacecraft throughout the log — has described the male anatomy as a twig and two small spacecraft. Entirely by accident. The alien does not know this is funny.</span></span></span>
|
||||
— responsible for
|
||||
<span class="decoder" id="dec-aggression"><button class="decoder-trigger" onclick="togglePanel('dec-aggression',this)">aggression [<span class="ba">fertilisation</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE — TRANSLATOR TELLS ON THEMSELVES</span><span class="dec-term">Aggression / Fertilisation</span><span class="dp">The translator's word for the male reproductive role is "aggression." The alternative is the clinical "fertilisation." This is Orianna's most revealing choice in the entire document: a biological function rendered in militaristic vocabulary. It tells us about the translator, not the alien.</span></span></span>
|
||||
in dual-sex reproduction. Identified by
|
||||
<span class="decoder" id="dec-walnuts"><button class="decoder-trigger" onclick="togglePanel('dec-walnuts',this)">male [stick] and two ships [walnuts]</button><span class="decoder-panel"><span class="dec-label">THE PAYOFF</span><span class="dec-term">Stick and Two Walnuts</span><span class="dp">Here it lands. The alien describes male anatomy using the same words they use for themselves ("stick") and their spacecraft ("walnut"). From the alien's perspective: a reasonable field description. From the reader's: the funniest scientific observation in the document.</span></span></span>
|
||||
between lower limbs. Location of invasion: Food and fluid dispensary called a 'bar'.</p>
|
||||
|
||||
<p>Notes: Apex predator becomes unstable after excessive consumption of
|
||||
<span class="decoder" id="dec-alcohol"><button class="decoder-trigger" onclick="togglePanel('dec-alcohol',this)">alcohol</button><span class="decoder-panel"><span class="dec-label">OBSERVATION</span><span class="dec-term">Alcohol as a Tool</span><span class="dp">The operative's recommendation to use alcohol in future "invasions" sounds sinister. It is also entirely accurate: going to a bar and buying drinks does increase social interaction. The alien has observed something true. It sounds like reconnaissance because of translation.</span></span></span>,
|
||||
but chances of successful invasions [<span class="ba">interactions</span>] increase dramatically. Recommend heavy doses of alcohol in future invasions [<span class="ba">interactions</span>].
|
||||
<span class="decoder" id="dec-currency"><button class="decoder-trigger" onclick="togglePanel('dec-currency',this)">Female apex predator seems to express increased interest in reproduction ritual when presented with currency.</button><span class="decoder-panel"><span class="dec-label">OBSERVATION</span><span class="dec-term">Buying Drinks</span><span class="dp">The alien has observed that buying drinks gets you attention at a bar. Rendered in the operative's clinical framing ("reproduction ritual," "currency"), it reads like reconnaissance on human mating behaviour. It is an alien at a bar learning to be social.</span></span></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOG 035 -->
|
||||
<div class="log">
|
||||
<span class="log-id">▶ LOG 035 <span class="log-ts">012/37/71354 — 800:25:6287</span></span>
|
||||
<div class="prose">
|
||||
<p>Successful transformation [<span class="ba">integration</span>] into apex predator
|
||||
<span class="decoder" id="dec-weapon"><button class="decoder-trigger" onclick="togglePanel('dec-weapon',this)">weapon [<span class="ba">help</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Weapon / Help</span><span class="dp">The operative has got a job. The official word is "weapon" — implying a sleeper agent. The alternative is "help" — a person who works at a shop. One makes the alien a spy asset; the other makes them a mechanic. The story holds both simultaneously.</span></span></span>.
|
||||
<span class="decoder" id="dec-technician"><button class="decoder-trigger" onclick="togglePanel('dec-technician',this)">Weapon [<span class="ba">help</span>] status: Walnut [ship] Destruction [<span class="ba">repair</span>] Technician.</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE — PILING UP</span><span class="dec-term">Ship Destruction Technician / Car Mechanic</span><span class="dp">Three ambiguous terms stacked into a single job title. Official translation: a Ship Destruction Technician — a saboteur of human vehicles. Alternative: a car mechanic at Hal's Autobody. The punchline is in the accumulation. The entry delivers it deadpan.</span></span></span>
|
||||
Location of weapon [<span class="ba">help</span>] house: "Hal's Autobody."</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOG 100 -->
|
||||
<div class="log">
|
||||
<span class="log-id">▶ LOG 100 <span class="log-ts">312/40/71354</span></span>
|
||||
<div class="prose">
|
||||
<p>First experience anomaly: This
|
||||
<span class="decoder" id="dec-solar"><button class="decoder-trigger" onclick="togglePanel('dec-solar',this)">solar rotation</button><span class="decoder-panel"><span class="dec-label">DECODED</span><span class="dec-term">Solar Rotation = Day</span><span class="dp">The alien counts time by planetary rotation rather than hours. This entry describes Halloween without naming it. The alien has encountered a human holiday and logged it as a calendar anomaly, using their own vocabulary throughout.</span></span></span>
|
||||
seems to have been
|
||||
<span class="decoder" id="dec-decimated"><button class="decoder-trigger" onclick="togglePanel('dec-decimated',this)">decimated [<span class="ba">dedicated</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Decimated / Dedicated</span><span class="dp">The day has been "decimated by the anomalous" — or "dedicated to the anomalous." Both are arguably accurate descriptions of Halloween. The translator's word implies destruction; the alternative implies celebration.</span></span></span>
|
||||
by the anomalous. The apex predators, both newer and older models, are preoccupied in
|
||||
<span class="decoder" id="dec-costumes"><button class="decoder-trigger" onclick="togglePanel('dec-costumes',this)">integrating [<span class="ba">transforming</span>] with alternate forms</button><span class="decoder-panel"><span class="dec-label">DECODED</span><span class="dec-term">Wearing Halloween Costumes</span><span class="dp">The alien observes humans wearing costumes and describes it using their own term for disguise. On Halloween, every human is doing what the alien does every day. They've stumbled into the one day humanity approximates their own existence.</span></span></span>.
|
||||
They make
|
||||
<span class="decoder" id="dec-armour"><button class="decoder-trigger" onclick="togglePanel('dec-armour',this)">armour [<span class="ba">clothes</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Armour / Clothes</span><span class="dp">The alien uses the same word for everyday clothing and Halloween costumes. On Halloween, this conflation is not entirely wrong — costumes are a way of being something else, a kind of protection for the night.</span></span></span>
|
||||
in the form of anything from local wildlife, to abstract inventions [<span class="ba">artillery</span>]. One particular male created armour [<span class="ba">clothes</span>] in the form of a
|
||||
<span class="decoder" id="dec-gorilla"><button class="decoder-trigger" onclick="togglePanel('dec-gorilla',this)">previous evolutionary state</button><span class="decoder-panel"><span class="dec-label">DECODED + CHALLENGE REQUIREMENT MET</span><span class="dec-term">The Gorilla Suit</span><span class="dp">A man in a gorilla suit — the story's first required challenge element. Delivered entirely through alien perspective, without naming it. The alien doesn't recognise it as a costume: they see a human wearing the form of an evolutionary ancestor.</span></span></span>,
|
||||
which I found quite
|
||||
<span class="decoder" id="dec-despicable"><button class="decoder-trigger" onclick="togglePanel('dec-despicable',this)">despicable [<span class="ba">hilarious</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Despicable / Hilarious</span><span class="dp">The gorilla suit is either morally repugnant or very funny, depending on translation. The Alternative-Reading alien is laughing. The Official-Translation alien is offended. Either response makes them oddly relatable — the first moment the operative expresses a personal reaction rather than a field observation.</span></span></span>.<span class="mn" id="mn-gorilla"><button class="mn-trig" onclick="togglePanel('mn-gorilla',this)">✎</button><span class="mn-panel"><span class="mn-label">CRAFT NOTE — CHALLENGE REQ.</span><span class="dp">The challenge specified "a man in a gorilla suit." JL delivers it through alien eyes, without naming it, using the alien's own vocabulary. The requirement becomes invisible — metabolised into the world's logic rather than dropped in as a prop.</span></span></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOG 101 -->
|
||||
<div class="log">
|
||||
<span class="log-id">▶ LOG 101 <span class="log-ts">213/12/71355</span></span>
|
||||
<div class="prose">
|
||||
<p>Log discrepancy: Was unable to report due to confinement. In the later phases of the anomalous solar rotation, was
|
||||
<span class="decoder" id="dec-forced"><button class="decoder-trigger" onclick="togglePanel('dec-forced',this)">forced [<span class="ba">encouraged</span>] to consume excessive amounts of alcohol</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Forced / Encouraged</span><span class="dp">Halloween peer pressure, rendered in the full weight of the translation ambiguity. Whether the alien was coerced or simply went along with the revelry depends entirely on the translator. The Official-Translation alien was victimised. The Alternative alien got into the spirit of it.</span></span></span>.
|
||||
This resulted in no recollection of my actions for the next
|
||||
<span class="decoder" id="dec-heartcycles"><button class="decoder-trigger" onclick="togglePanel('dec-heartcycles',this)">1300 heart cycles</button><span class="decoder-panel"><span class="dec-label">WORLD-INTERNAL</span><span class="dec-term">Heart Cycles</span><span class="dp">The alien measures time in heartbeats. At a resting rate of ~70 beats per minute, 1300 heart cycles is roughly 18-19 minutes. The alien blacked out for about 20 minutes, woke up in jail, and served three days. The unit makes the blackout sound both alien and painfully human.</span></span></span>.
|
||||
I was informed that my confinement would last no longer than 3 solar cycles. However, I was
|
||||
<span class="decoder" id="dec-barfight"><button class="decoder-trigger" onclick="togglePanel('dec-barfight',this)">encouraged [<span class="ba">forced</span>] to repair [<span class="ba">destroy</span>] a particularly friendly [<span class="ba">violent</span>] stick [<span class="ba">male</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE — MAXIMUM DENSITY</span><span class="dec-term">The Bar Fight</span><span class="dp">Four ambiguous terms stacked into one sentence. Official translation: the alien was encouraged to repair a friendly male — which is baffling. Alternative: they were forced to fight a violent man. The reversal of "encouraged/forced" and "friendly/violent" in the same sentence is the story's most technically precise joke.</span></span></span>
|
||||
who attempted to
|
||||
<span class="decoder" id="dec-greet"><button class="decoder-trigger" onclick="togglePanel('dec-greet',this)">greet [<span class="ba">attack</span>] me</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE</span><span class="dec-term">Greet / Attack</span><span class="dp">Official translation: the alien beat up someone who was saying hello. Alternative: they defended themselves from someone who attacked them. One is assault; the other is self-defence. The alien went back to jail either way.</span></span></span>
|
||||
after I dropped the
|
||||
<span class="decoder" id="dec-soap"><button class="decoder-trigger" onclick="togglePanel('dec-soap',this)">cleaning apparatus</button><span class="decoder-panel"><span class="dec-label">DECODED + CHALLENGE REQUIREMENT MET</span><span class="dec-term">A Bar of Soap</span><span class="dp">The second required challenge element: "a bar of soap." Placed in a jail scene — where dropping soap carries its own cultural weight — described only as "the cleaning apparatus." The alien doesn't know the word. The reader does. A triple-layer joke: the object, the setting, and the alien's clinical name for it.</span></span></span>.<span class="mn" id="mn-soap"><button class="mn-trig" onclick="togglePanel('mn-soap',this)">✎</button><span class="mn-panel"><span class="mn-label">CRAFT NOTE — CHALLENGE REQ.</span><span class="dp">"A bar of soap" was required. JL drops it into a jail scene in the alien's vocabulary — "the cleaning apparatus." The requirement appears as the shape of something the alien doesn't have language for. The reader fills the gap.</span></span></span>
|
||||
This caused further confinement.</p>
|
||||
|
||||
<p>After converting [<span class="ba">understanding</span>] as much as I could about the apex predator's punishment systems, I have escaped. My
|
||||
<span class="decoder" id="dec-walnut2"><button class="decoder-trigger" onclick="togglePanel('dec-walnut2',this)">walnut [ship] is destroyed [<span class="ba">repaired</span>]</button><span class="decoder-panel"><span class="dec-label">TRANSLATION NOTE — CALLBACK</span><span class="dec-term">Destroyed / Repaired — The Exit Hinge</span><span class="dp">The "destroyed/repaired" ambiguity from Log 001 returns as the story's final structural turn. If destroyed: the alien is stranded and the mission ends in failure. If repaired: it's complete and the alien goes home. The translation resolves nothing. Both endings exist simultaneously until the reader decides.</span></span></span>
|
||||
and so I will be able to return home. I have discovered much, but further, more extensive research is required. Therefore, my recommendation is to postpone the first large-scale attack and invasion until we can achieve full conversion of the apex predator's weakness and adapt our stratagem to suit the goal of homogeny.<span class="mn" id="mn-finalrec"><button class="mn-trig" onclick="togglePanel('mn-finalrec',this)">✎</button><span class="mn-panel"><span class="mn-label">CRAFT NOTE</span><span class="dp">In the alternative translation: the alien recommends postponing contact until they can better understand human diversity, adapting their approach to suit the goal of unity. The "invasion" becomes a diplomatic mission delayed for more cultural research. The alien got drunk, went to jail, and came back with a recommendation for patience.</span></span></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="pdiv">
|
||||
|
||||
<!-- Translation Notes -->
|
||||
<div class="tn">
|
||||
<span class="slabel">▶ FINAL TRANSLATION NOTES — TEEMO ORIANNA, TRANSLATOR-IN-CHIEF</span>
|
||||
<div class="prose">
|
||||
<p>While the inclusion of [brackets] may give the impression that the above translation is not accurate, it is important to note a few key things about the translation process. Firstly, the current written form of written Atarian was standardised at the Coalition Communications Conference of 2561 and is thus a far cry from the Ancient Atarian of the above text. While it is common knowledge that the spatial placement of characters to indicate the relationships between terms is a constant bane to translators (for example the near constant flux of 'by-with-for-to'), our ability to correctly identify complex terminology is considerably stronger.</p>
|
||||
|
||||
<p>The words provided in brackets as alternative interpretations have yet to gain any widespread recognition or acceptance by scholars. I have provided them simply as side notes, due to this particular text's notoriety as the <button class="lbt" onclick="openLightbox('lb-worstlie')">"Worst Lie in Human History."</button></p>
|
||||
|
||||
<p>Until the Atarian Empire's Archives can be accessed in order to validate or refute the claims, the alternative interpretations will always be disputed. It is truly a pity that the Atarian Archives no longer exist.</p>
|
||||
|
||||
<p>Finally, the conspiracy theorists will argue that the nonsensical statement about
|
||||
<span class="decoder" id="dec-trees"><button class="decoder-trigger" onclick="togglePanel('dec-trees',this)">repairing a stick is evidence of misinterpretation</button><span class="decoder-panel"><span class="dec-label">TRANSLATOR'S ARGUMENT</span><span class="dec-term">The Tree Defence</span><span class="dp">Orianna argues that "stick" must refer to a tree, not a male human, since Atarians are known to enjoy fixing trees. This is the most strained argument in the document. She's defending hardest exactly where the alternative reading is most damaging to the official interpretation.</span></span></span>,
|
||||
but we all know how much Atarians love to try and fix trees.<span class="mn" id="mn-bias"><button class="mn-trig" onclick="togglePanel('mn-bias',this)">✎</button><span class="mn-panel"><span class="mn-label">CRAFT NOTE — NARRATOR'S UNRELIABILITY</span><span class="dp">Orianna dismisses her own alternative interpretations as unrecognised, notes with suspicious relief that the Atarian Archives are gone, and closes with an argument about trees. The translator is the unreliable narrator. The document about a potentially unreliable document is itself narrated unreliably.</span></span></span>
|
||||
It must, however, be perfectly clear to anyone with two eyes, a nose and a mouth, that the Atarian Empire's motives were exceedingly clear, given their operative's final statement.</p>
|
||||
</div>
|
||||
<div class="signoff">Teemo Orianna<br>Translator-in-Chief, Allied Interstellar Archives, 12/06/2881</div>
|
||||
</div>
|
||||
|
||||
<hr class="pdiv">
|
||||
|
||||
<div class="chall">
|
||||
<span class="slabel">▶ ORIGINAL CHALLENGE PARAMETERS</span>
|
||||
<p><strong>Challenger:</strong> TeeKay</p>
|
||||
<p><strong>Tell me a story about:</strong> An alien living among us | <strong>Genre:</strong> Science Fiction | <strong>Style:</strong> Surprise Me</p>
|
||||
<p><strong>It must have:</strong> 1) A man in a gorilla suit 2) A bar of soap</p>
|
||||
<p><strong>Someone must say:</strong> "Worst lie in human history"</p>
|
||||
<p><strong>Anything else?</strong> The alien must not be violent.</p>
|
||||
</div>
|
||||
|
||||
<div class="auth-note"><em>Author's note: Peaceful aliens are tricky… Especially on a Friday night. —JL</em></div>
|
||||
|
||||
<div class="sbar">
|
||||
<span>◈ DOCUMENT VERIFIED</span>
|
||||
<span>◈ TRANSLATION: ORIANNA — 2881</span>
|
||||
<span>◈ RESTRICTED ACCESS <span class="blink">█</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════ TAB 2 – THE WORLD ═══════════════════ -->
|
||||
<div class="tab" id="t-world">
|
||||
<div class="edu-sec">
|
||||
<div class="edu-tit">▶ THE WORLD — ATARIAN EMPIRE & HUMAN EARTH</div>
|
||||
<p class="edu-intro">The story operates across two timelines separated by nine centuries. The spy's log runs in 2014–2015. The document frame — memo, translation notes, classified stamp — exists in 2881. What the author has constructed is less a conventional world and more a <em>bureaucratic apparatus</em>: a translation, an archive, a set of institutional claims about what a document means. The world is made of paper and power, not geography and magic.</p>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">Who are the Atarians — and are they actually hostile?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p>The official record: the Atarians are an empire that sent a spy to Earth in 2014, used the intelligence gathered to win early victories in the First Star Wars, and remain humanity's primary enemy in 2881. This is the story the Interstellar War Ministry wants told — and it is the story Waffling's memo is designed to support.</p>
|
||||
<p>The alternative reading, assembled entirely from the bracketed translations, tells a different story: an asexual being with no concept of human gender tried to disguise itself as a human, went to a bar, got a job as a car mechanic, watched Halloween, got drunk, went to jail twice, and came home recommending more research before trying to make contact again. Not a spy — a bewildered anthropologist.</p>
|
||||
<p>The story never resolves which reading is correct. The <strong>Atarian Archives no longer exist</strong> — the only external validation is gone. Orianna says this is "a pity." The reader is invited to decide how genuine that pity is.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">How does the Atarian language work — and why does it break everything?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p>Ancient Atarian differs from the standardised form (fixed in 2561) in two critical ways. First, the spatial placement of characters indicates relationships between terms — and this means prepositions are always approximate. Second, certain near-identical terms are separated by a single character: "destroyed" and "repaired," "invade" and "interact with," "forced" and "encouraged."</p>
|
||||
<p>The story's comedy depends on this being plausible. Any real translator working with an ancient language would face exactly this kind of ambiguity. The story is asking: <strong>how much of what we know about our enemies is a translator's choice?</strong></p>
|
||||
<p>The 2561 standardisation is a neat detail: modern Atarian is comprehensible, but this text predates that standardisation by five hundred years. There is no living expert on Ancient Atarian. There is only Orianna.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">What is the timeline — and what does it imply about the war?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p>The chronology: spy active 2014–2015. First Contact ~300 years later. The First Star Wars follows. The "First Blood Fiasco" is a disputed incident accused of creating hostilities. By 2881: Interstellar War Ministry, Allied Interstellar Archives, ongoing conflict.</p>
|
||||
<p>Waffling's memo presents the spy's log as vindication for the Fiasco's perpetrators: if the Atarians were already spying, then whoever struck first was responding to a pre-existing threat. The spy's presence proves hostile intent — <em>or so the official translation claims.</em></p>
|
||||
<p>If the alternative translation is correct — if the "spy" was a researcher and the "recommendation to attack" was a recommendation to study human culture further — then the First Blood Fiasco may have been exactly what it was accused of being: humanity deliberately starting a war with a species trying to make contact. The document that clears the Fiasco may be the document that condemns it.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">Who are Waffling and Orianna — and why do they matter?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p><strong>Albert K. Waffling</strong> — the name does the work. His memo frames the document as definitive evidence of Atarian hostility, immediately acknowledges scholarly debate, then insists motives are "exceedingly clear." His argument wobbles. His bureaucratic title ("Head of Alien-Homeland Affairs: Archaeology Division") buries him in institutional layers. He forwards the document to a general — which tells us who his audience is.</p>
|
||||
<p><strong>Teemo Orianna</strong> — the Translator-in-Chief; the single person through whom all this passes. Her final note is the story's most precise characterisation: she dismisses the alternative interpretations as unrecognised, notes with suspicious relief that the Atarian Archives are gone, and closes with an argument about trees. She may genuinely believe her translation. But she also has reasons to want it to mean what it means.</p>
|
||||
<p>The story places enormous epistemic power in the hands of one translator in 2881 — and then quietly demonstrates that she has interests.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">What does the operative's final recommendation actually say?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p><strong>Official translation:</strong> postpone the invasion until full intelligence is gathered on human weakness, then attack.</p>
|
||||
<p><strong>Alternative translation:</strong> postpone first contact until the alien can better understand human diversity, then try to engage in a way that respects it.</p>
|
||||
<p>Both versions agree on the action: <em>wait.</em> But the reason and goal are opposite. The official translation ends on aggression; the alternative ends on patience and cultural humility. The challenge requirement specified that the alien must not be violent. JL honours that in both translations: the alien never initiates harm. Whether the species intends harm is the question that remains, permanently, open.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════ TAB 3 – THE CRAFT ═══════════════════ -->
|
||||
<div class="tab" id="t-craft">
|
||||
<div class="edu-sec">
|
||||
<div class="edu-tit">▶ THE CRAFT — HOW THIS STORY IS BUILT</div>
|
||||
<p class="edu-intro"><em>Codename: Sneaky Bastards</em> is formal constraint fiction. It was written to satisfy a list of specific requirements (alien, gorilla suit, bar of soap, non-violent alien, the phrase "worst lie in human history"), and its structural ingenuity lies in how completely those requirements disappear into the world's logic. The scaffolding is invisible. What's visible is the machine it holds up.</p>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">What tradition is this text working within?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p>The story belongs to at least three overlapping traditions. The <strong>epistolary / found document</strong> tradition: stories told entirely through letters, diaries, or official records. Dracula, Frankenstein, and House of Leaves all use this structure. The document creates distance — we're never there; we're always reading about being there.</p>
|
||||
<p>The <strong>double unreliable narrator</strong> tradition: both the primary document and the frame commentary are compromised. The spy's log may be misconstrued; the translator's notes are self-serving; Waffling's memo is politically motivated. There is no clean source.</p>
|
||||
<p>The <strong>comedic alien observer</strong> tradition: the defamiliarising gaze of a non-human perspective makes human behaviour legible and absurd simultaneously. The Hitchhiker's Guide is the genre's canonical example. The operative's clinical anatomy notes echo Adams's comic method: describe the familiar with the tone of a first encounter.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">How does the bracket system work as a structural device?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p>The brackets are established before the first log entry, in Waffling's memo. This is deliberate: the reader arrives at the translated text already holding the method. Every bracketed alternative is a door the reader can open independently of the framing narrative.</p>
|
||||
<p>The brackets work in three registers simultaneously: <strong>comedy</strong> (the walnut/ship anatomy joke, the gorilla suit as "previous evolutionary state"); <strong>political tension</strong> (invade vs. interact with, homogeny vs. diversity); and <strong>structural unreliability</strong> (by the end, every word in the document is shadowed by the possibility that a translator chose it, and that translator had reasons).</p>
|
||||
<p>The story's most precise technical move is Log 101's reversal: "forced [encouraged]… friendly [violent]." Normally the bracketed term is softer — the alternative reading is the kinder one. Here the reversal inverts the pattern: the official translation is more sympathetic to the alien, but the alternative makes more narrative sense. The story trains the reader, then subverts the training.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">How does JL handle the challenge constraints?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p><strong>A man in a gorilla suit:</strong> delivered as "armour in the form of a previous evolutionary state." The alien observes it on Halloween without naming it. The challenge requirement never appears as itself — it appears as the alien's description of it. The constraint is metabolised into the story's vocabulary.</p>
|
||||
<p><strong>A bar of soap:</strong> "the cleaning apparatus," dropped in a jail scene with its own contextual weight. The alien doesn't know the human word for soap. The reader fills the gap. Again: the requirement appears as absence — the shape of something the alien has no language for.</p>
|
||||
<p><strong>"Worst lie in human history":</strong> not spoken as dialogue. The phrase is the historical nickname the document has acquired, delivered in quotation marks by the translator. It's a reputation, not a line. The constraint is met without anyone saying anything aloud.</p>
|
||||
<p><strong>The alien must not be violent:</strong> honoured in both translations. In the bar fight, the alien is either responding to a greeting or defending themselves. They never initiate harm. Their final recommendation is to wait. The non-violence is built into the character's nature, not performed as a plot exemption.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">What does the text refuse to resolve — and is that meaningful?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p>The story refuses to answer: were the Atarians hostile, or curious? Both readings are fully supported. The alternative interpretations are never declared correct — Orianna explicitly refuses to grant them scholarly standing. The evidence that could settle it (the Archives) is gone.</p>
|
||||
<p><strong>Structurally:</strong> a comedy of misunderstanding requires the misunderstanding to remain unresolved. If we learn which translation is true, one genre evaporates. The story sustains both simultaneously by making the evidence permanently unreachable.</p>
|
||||
<p><strong>Thematically:</strong> the story argues that wars are built on documents, documents are built by translators, and translators have interests. If the "true" translation existed, it would let us off the hook — we could say the war was either just or unjust. The irresolution forces the reader to sit with the discomfort that we may never know, and the war happened anyway.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acc-item">
|
||||
<button class="acc-trig" onclick="toggleAcc(this)"><span class="acc-text">What is the story actually arguing?</span><span class="acc-arr">▾</span></button>
|
||||
<div class="acc-pan">
|
||||
<p>The comedy is doing political work. The story is, underneath the jokes about walnuts and gorilla suits, an argument about the relationship between translation, institutional authority, and war. The operative's final statement — the smoking gun Orianna cites — is also the statement most dependent on her translation choices.</p>
|
||||
<p>The challenge specified that the alien must not be violent. JL takes that constraint and builds it into the story's central ambiguity: whether the Atarian species is violent is precisely what's at stake in the translation debate. The non-violence requirement becomes the hinge of the geopolitical argument.</p>
|
||||
<p>The author's closing note — "Peaceful aliens are tricky. Especially on a Friday night." — reads differently once you've engaged with the text. It's not just a wry aside. It's a small admission that the story's alien, whatever the official translation says, is fundamentally peaceful. The author tells us the answer. The document refuses to.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════ TAB 4 – FURTHER READING ═══════════════════ -->
|
||||
<div class="tab" id="t-read">
|
||||
<div class="edu-sec">
|
||||
<div class="edu-tit">▶ FURTHER READING</div>
|
||||
<p class="edu-intro">The texts below situate <em>Codename: Sneaky Bastards</em> in its genre traditions, offer comparative craft reading, and point toward the real-world debates the story refracts.</p>
|
||||
</div>
|
||||
|
||||
<div class="rg">
|
||||
<div class="rg-tit">▸ THE FOUND DOCUMENT TRADITION</div>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/House_of_Leaves" target="_blank">
|
||||
<span class="ri-title">House of Leaves — Mark Z. Danielewski (2000)</span>
|
||||
<span class="ri-desc">The genre at its most extreme: a novel structured as a found manuscript annotated by multiple unreliable editors, each with their own agenda. The layered document frames in Sneaky Bastards sit in this tradition.</span>
|
||||
</a>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/World_War_Z" target="_blank">
|
||||
<span class="ri-title">World War Z — Max Brooks (2006)</span>
|
||||
<span class="ri-desc">An oral history whose narrator's framing shapes every interview. A close model for how found documents construct political perspectives without explicit argument.</span>
|
||||
</a>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/Dracula" target="_blank">
|
||||
<span class="ri-title">Dracula — Bram Stoker (1897)</span>
|
||||
<span class="ri-desc">The classic epistolary novel. Told through diaries, letters, and newspaper clippings — the reader assembles truth from biased sources, which is precisely the method Sneaky Bastards demands.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="rg">
|
||||
<div class="rg-tit">▸ COMEDIC ALIEN OBSERVER FICTION</div>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy" target="_blank">
|
||||
<span class="ri-title">The Hitchhiker's Guide to the Galaxy — Douglas Adams (1979)</span>
|
||||
<span class="ri-desc">The canonical example of the defamiliarising alien gaze. The operative's clinical anatomy notes — describing the familiar with the tone of a first encounter — echo Adams's comic method throughout.</span>
|
||||
</a>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/Men_in_Black_(film)" target="_blank">
|
||||
<span class="ri-title">Men in Black (1997)</span>
|
||||
<span class="ri-desc">Aliens among humans, maintaining cover, observing behaviour. A comparable premise handled cinematically — and considerably less interested in who does the translating.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="rg">
|
||||
<div class="rg-tit">▸ TRANSLATION, LANGUAGE & POWER</div>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/Story_of_Your_Life" target="_blank">
|
||||
<span class="ri-title">"Story of Your Life" — Ted Chiang (1998)</span>
|
||||
<span class="ri-desc">Basis for the film Arrival. A linguist translating alien communication discovers the language reshapes how reality is perceived. The most direct companion piece to Sneaky Bastards' central argument.</span>
|
||||
</a>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/Babel,_or_the_Necessity_of_Violence" target="_blank">
|
||||
<span class="ri-title">Babel, or the Necessity of Violence — R.F. Kuang (2022)</span>
|
||||
<span class="ri-desc">A fantasy in which translation is literally a source of political control. Makes explicit what Sneaky Bastards leaves implicit: to translate is to exercise authority.</span>
|
||||
</a>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/Orientalism_(book)" target="_blank">
|
||||
<span class="ri-title">Orientalism — Edward Said (1978)</span>
|
||||
<span class="ri-desc">The foundational text on how scholarship constructs the "other" through translation, documentation, and institutional authority — the exact mechanism Orianna deploys on the operative's log.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="rg">
|
||||
<div class="rg-tit">▸ CONSTRAINT WRITING</div>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/Oulipo" target="_blank">
|
||||
<span class="ri-title">Oulipo — The Workshop of Potential Literature (1960–)</span>
|
||||
<span class="ri-desc">The French literary collective that systematised constraint writing. The challenge format Sneaky Bastards responds to is a popular-fiction cousin of this tradition.</span>
|
||||
</a>
|
||||
<a class="ri" href="https://en.wikipedia.org/wiki/A_Void" target="_blank">
|
||||
<span class="ri-title">A Void — Georges Perec (1969)</span>
|
||||
<span class="ri-desc">A novel written without the letter E. The constraint is invisible in the reading experience. Sneaky Bastards achieves something comparable: challenge requirements vanish into the story's internal logic.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sbar">
|
||||
<span>◈ ARCHIVE ACCESS GRANTED</span>
|
||||
<span>◈ EXTERNAL LINKS — LEAVING RESTRICTED NETWORK <span class="blink">█</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ═══════════════════ LIGHTBOXES ═══════════════════ -->
|
||||
|
||||
<div class="lb-ov" id="lb-firstblood" onclick="closeLbOverlay(event,'lb-firstblood')">
|
||||
<div class="lb-box">
|
||||
<div class="lb-hd"><span class="lb-title">▶ THE FIRST BLOOD FIASCO</span><button class="lb-close" onclick="closeLb('lb-firstblood')">✕</button></div>
|
||||
<div class="lb-body">
|
||||
<h3>What is it?</h3>
|
||||
<p>A disputed incident in the story's future history, occurring after First Contact and apparently triggering the First Star Wars. It refers to a moment when someone on the human side is accused of deliberately creating hostilities with the Atarian Empire.</p>
|
||||
<h3>Why does this document matter to it?</h3>
|
||||
<p>Waffling presents the spy's log as vindication for the Fiasco's perpetrators. His argument: if the Atarians were already spying in 2014, then whoever struck first in the First Star Wars was responding to a pre-existing Atarian threat, not creating one. The spy's presence proves hostile intent — or so the official translation claims.</p>
|
||||
<h3>What the alternative reading implies</h3>
|
||||
<p>If the alternative translation is correct — if the "spy" was an anthropologist, the "invasion" was a visit, and the "recommendation to attack" was advice to study human culture further — then the First Blood Fiasco may have been exactly what it was accused of being: humanity deliberately starting a war with a species trying to make contact.</p>
|
||||
<p><strong>The document that clears the Fiasco's perpetrators may be the document that condemns them.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lb-ov" id="lb-worstlie" onclick="closeLbOverlay(event,'lb-worstlie')">
|
||||
<div class="lb-box">
|
||||
<div class="lb-hd"><span class="lb-title">▶ "WORST LIE IN HUMAN HISTORY"</span><button class="lb-close" onclick="closeLb('lb-worstlie')">✕</button></div>
|
||||
<div class="lb-body">
|
||||
<h3>What does the phrase refer to?</h3>
|
||||
<p>By 2881, the operative's log has acquired a popular name: the "Worst Lie in Human History." This is what Orianna cites as the reason the alternative interpretations haven't gained scholarly acceptance. The document is so central to the justification of the war that any reading undermining it is treated as revisionism or conspiracy theory.</p>
|
||||
<h3>But which reading is the lie?</h3>
|
||||
<p>The phrase could refer to the operative's claim to be merely researching humanity (if the official translation is correct — the "peaceful alien" framing is the lie, a spy playing innocent). Or it could refer to the official translation itself (if the alternative is correct — the "hostile spy" narrative is a fabrication built on a translator's choices).</p>
|
||||
<h3>Why doesn't the story resolve it?</h3>
|
||||
<p>The Atarian Archives no longer exist. Orianna mentions this briefly, as if incidental. It is not incidental. Without the originals, the only source for what the Ancient Atarian text actually says is Orianna's translation — the very document under dispute. The story has constructed a <strong>closed epistemic loop</strong>: the evidence that could verify or refute the translation is gone. Orianna calls their destruction "a pity."</p>
|
||||
<h3>The challenge requirement</h3>
|
||||
<p>The challenge specified that someone must say "Worst lie in human history." JL doesn't have a character speak the line — they assign it to the document as its historical nickname, quoted by the translator. The requirement is met without anyone saying anything.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lb-ov" id="lb-biology" onclick="closeLbOverlay(event,'lb-biology')">
|
||||
<div class="lb-box">
|
||||
<div class="lb-hd"><span class="lb-title">▶ ATARIAN BIOLOGY & THE GENDER GAP</span><button class="lb-close" onclick="closeLb('lb-biology')">✕</button></div>
|
||||
<div class="lb-body">
|
||||
<h3>Atarian biology</h3>
|
||||
<p>Atarians are asexual reproducers. They have no concept of male or female as distinct categories. When the operative encounters a binary-sex species for the first time, they must build the conceptual vocabulary from scratch — hence the field definitions, rendered with the clinical accuracy of a biologist encountering a new species.</p>
|
||||
<h3>The translation problem in biology</h3>
|
||||
<p>The Atarian root word for "female" is their word for "beauty." Their word for "male" is their word for "stick." These are not insults — they're the closest conceptual analogues an asexual species has for categories it doesn't experience. The translator renders them as "female" and "male," which are comprehensible human words — but the alien's actual concept is different: <em>the beautiful ones</em> and <em>the stick ones.</em></p>
|
||||
<h3>Why the anatomy is funny</h3>
|
||||
<p>The operative uses the same word for their spacecraft ("walnut") to describe part of the male anatomy. The alien has no idea. The reader notices immediately. The gap between the alien's complete sincerity and the reader's realisation is exactly where the comedy lives — and it is entirely structural, built into the story's vocabulary before this entry appears.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(id, btn) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('act'));
|
||||
document.querySelectorAll('.tnav button').forEach(b => b.classList.remove('act'));
|
||||
document.getElementById(id).classList.add('act');
|
||||
btn.classList.add('act');
|
||||
window.scrollTo({top: 0, behavior: 'smooth'});
|
||||
}
|
||||
|
||||
function togglePanel(id, btn) {
|
||||
const el = document.getElementById(id);
|
||||
const panel = el.querySelector('.decoder-panel, .mn-panel');
|
||||
const isOpen = panel.classList.contains('open');
|
||||
document.querySelectorAll('.decoder-panel.open,.mn-panel.open').forEach(p => p.classList.remove('open'));
|
||||
document.querySelectorAll('.decoder-trigger.open,.mn-trig.open').forEach(b => b.classList.remove('open'));
|
||||
if (!isOpen) {
|
||||
panel.classList.add('open');
|
||||
btn.classList.add('open');
|
||||
const r = panel.getBoundingClientRect();
|
||||
panel.classList.toggle('flip-left', r.right > window.innerWidth - 16);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAcc(btn) {
|
||||
const panel = btn.nextElementSibling;
|
||||
const isOpen = btn.classList.contains('open');
|
||||
document.querySelectorAll('.acc-trig.open').forEach(b => { b.classList.remove('open'); b.nextElementSibling.classList.remove('open'); });
|
||||
if (!isOpen) { btn.classList.add('open'); panel.classList.add('open'); }
|
||||
}
|
||||
|
||||
function openLightbox(id) { document.getElementById(id).classList.add('open'); document.body.style.overflow = 'hidden'; }
|
||||
function closeLb(id) { document.getElementById(id).classList.remove('open'); document.body.style.overflow = ''; }
|
||||
function closeLbOverlay(e, id) { if (e.target === document.getElementById(id)) closeLb(id); }
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.decoder') && !e.target.closest('.mn')) {
|
||||
document.querySelectorAll('.decoder-panel.open,.mn-panel.open').forEach(p => p.classList.remove('open'));
|
||||
document.querySelectorAll('.decoder-trigger.open,.mn-trig.open').forEach(b => b.classList.remove('open'));
|
||||
}
|
||||
});
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
document.querySelectorAll('.lb-ov.open').forEach(l => { l.classList.remove('open'); });
|
||||
document.querySelectorAll('.decoder-panel.open,.mn-panel.open').forEach(p => p.classList.remove('open'));
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user