The Evil I Love — TN-130
The Evil I Love — TN-130
I'll read the linked notes for context, then build the dashboard.
Here's your note reimagined as an interactive dashboard.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Evil I Love — TN-130</title>
<style>
:root{
--ivory:#FAF9F5;--slate:#141413;--clay:#D97757;--oat:#E3DACC;
--olive:#788C5D;--gray-150:#F0EEE6;--gray-300:#D1CFC5;
--gray-500:#87867F;--gray-700:#3D3D3A;--white:#FFFFFF;
--serif:ui-serif,Georgia,'Times New Roman',serif;
--sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--mono:'SF Mono',Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--gray-700);font-family:var(--sans);line-height:1.55}
.page{max-width:1120px;margin:0 auto;padding:56px 32px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);margin-bottom:12px}
h1{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--slate);font-size:44px;margin:0 0 10px}
h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--slate);font-size:24px;margin:0 0 16px}
.lede{font-size:18px;max-width:70ch;color:var(--gray-700)}
.label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 40px}
.pill{font-size:12px;background:var(--gray-150);border:1px solid var(--gray-300);border-radius:999px;padding:4px 11px;color:var(--gray-700)}
.pill code{font-family:var(--mono);color:var(--clay)}
/* Hero mirror */
.mirror{background:var(--white);border:1.5px solid var(--gray-300);border-radius:12px;padding:48px 32px;text-align:center;margin-bottom:20px}
.word-row{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,40px);flex-wrap:wrap}
.word{font-family:var(--serif);font-weight:500;letter-spacing:.04em;font-size:clamp(34px,8vw,72px);color:var(--slate);display:flex}
.word .ch{transition:color .25s,transform .25s}
.axis{font-family:var(--serif);font-weight:500;font-size:clamp(48px,11vw,104px);color:var(--clay);cursor:pointer;line-height:.9;position:relative;user-select:none}
.axis::after{content:"";position:absolute;left:50%;top:-14px;bottom:-14px;width:2px;background:var(--clay);opacity:.25;transform:translateX(-50%)}
.pivot{display:inline-block}
.hint{margin-top:22px;font-family:var(--mono);font-size:12px;color:var(--gray-500)}
.arrow{color:var(--gray-500);font-size:14px}
.dir{display:flex;justify-content:space-between;max-width:560px;margin:8px auto 0;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500)}
.diff{color:var(--clay)}
/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--gray-300);margin:44px 0 24px;flex-wrap:wrap}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:10px 16px;font-family:var(--sans);font-size:14px;color:var(--gray-500);cursor:pointer}
.tab:hover{color:var(--slate)}
.tab.is-active{color:var(--clay);border-bottom:2px solid var(--clay)}
.panel{display:none}
.panel.is-active{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--white);border:1.5px solid var(--gray-300);border-radius:12px;padding:24px}
.card.soft{background:var(--gray-150)}
.card h3{font-family:var(--serif);font-weight:500;color:var(--slate);margin:0 0 8px;font-size:18px}
.card p{margin:0;font-size:15px}
.tick{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--clay);margin-bottom:10px}
strong{color:var(--slate)}
.link{color:var(--clay);text-decoration:none;border-bottom:1px solid var(--oat)}
.footer{margin-top:48px;padding-top:20px;border-top:1.5px solid var(--gray-300);font-size:13px;color:var(--gray-500)}
.footer em{font-style:normal;color:var(--gray-700)}
ul.tidy{margin:0;padding-left:18px}
ul.tidy li{margin-bottom:6px;font-size:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.split{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="page">
<div class="eyebrow">Topic · TN-130 · <span style="font-family:var(--mono)">know / language · philosophy · identity</span></div>
<h1>The Evil I Love</h1>
<p class="lede">The self is the only letter standing between evil and love — not metaphorically, but typographically. Change <strong>I</strong> to <strong>O</strong> and one word becomes the other's mirror.</p>
<div class="meta">
<span class="pill">code <code>53rf</code></span>
<span class="pill">status · seed</span>
<span class="pill">domain · know</span>
<span class="pill">created · 2026-07-08</span>
<span class="pill">ai-assisted</span>
</div>
<!-- Interactive hero -->
<div class="mirror">
<div class="word-row">
<span class="word" id="left"></span>
<span class="axis" id="axis" title="Click to flip I / O">I</span>
<span class="word" id="right"></span>
</div>
<div class="dir">
<span>← look left</span>
<span>look right →</span>
</div>
<div class="hint" id="hint">Click the <span style="color:var(--clay)">I</span> — flip it to O and watch the distinction collapse.</div>
</div>
<!-- Tabs -->
<div class="tabs">
<button class="tab is-active" data-tab="idea">The Idea</button>
<button class="tab" data-tab="anatomy">Anatomy</button>
<button class="tab" data-tab="constraint">Constraint</button>
<button class="tab" data-tab="lineage">Lineage</button>
</div>
<section class="panel is-active" data-panel="idea">
<div class="grid">
<div class="card">
<div class="tick">The chilling thing</div>
<h3>I is the variable</h3>
<p>It isn't just that evil and love are opposites. It's that <strong>I</strong> is what makes them different. Remove the self and the distinction collapses. Insert the self and you get to choose which word you're standing next to.</p>
</div>
<div class="card soft">
<div class="tick">The confession</div>
<h3>"Evil I love"</h3>
<p>Said aloud without context, it lands like a confession — before it reveals itself as a philosophy. The ambiguity is the point.</p>
</div>
<div class="card">
<div class="tick">The claim</div>
<h3>Structural, not poetic</h3>
<p>The self — ego, the first person, the witness — is <strong>literally</strong> the sole distinction between the two words. Typographically, phonologically, morally.</p>
</div>
</div>
</section>
<section class="panel" data-panel="anatomy">
<h2>Letter-level mirror</h2>
<div class="split">
<div class="card">
<div class="tick">EVIL</div>
<p>E · V · <span class="diff">I</span> · L</p>
</div>
<div class="card">
<div class="tick">LOVE</div>
<p>L · <span class="diff">O</span> · V · E</p>
</div>
</div>
<div class="card soft" style="margin-top:16px">
<div class="tick">The axis</div>
<p>EVIL · <strong style="color:var(--clay)">I</strong> · LOVE — the I is not between them by accident. It is the axis, facing both directions simultaneously. The words share their consonant skeleton; only the vowel of selfhood diverges.</p>
</div>
</section>
<section class="panel" data-panel="constraint">
<h2>English-only</h2>
<div class="card">
<div class="tick">Language-specific</div>
<p>The observation holds only in English. In no other major language does this letter-level mirror survive. That specificity doesn't weaken it — it makes the property something worth naming: a quirk of the English-speaking world's moral vocabulary.</p>
</div>
<div class="grid" style="margin-top:16px">
<div class="card soft"><div class="tick">Typographic</div><p>One glyph swapped.</p></div>
<div class="card soft"><div class="tick">Phonologic</div><p>The vowel carries the shift.</p></div>
<div class="card soft"><div class="tick">Moral</div><p>The self chooses the side.</p></div>
</div>
</section>
<section class="panel" data-panel="lineage">
<h2>Where it lives</h2>
<ul class="tidy">
<li><a class="link" href="#">[[TOE.KNEE.SEE]]</a> — part of Tony's personal philosophy lineage.</li>
<li><a class="link" href="#">[[TN-072-morning-brief]]</a> — <em>contrast:</em> external orientation, where this note is about the self as the moral variable.</li>
<li><a class="link" href="#">[[💡Idea-028-evil-i-love]]</a> — the inbox source idea this topic was fleshed from.</li>
</ul>
</section>
<div class="footer">
<em>Captured 2026-07-08</em> from a voice-transcribed idea by [[TOE.KNEE.SEE]] (Tony C. Anderson). Registered as TN-130 via <span style="font-family:var(--mono)">/flow capture</span>. Part of the k-a system.
</div>
</div>
<script>
// Tabs
document.querySelectorAll('.tab').forEach(function(t){
t.addEventListener('click',function(){
var id=t.dataset.tab;
document.querySelectorAll('.tab').forEach(function(x){x.classList.toggle('is-active',x===t)});
document.querySelectorAll('.panel').forEach(function(p){p.classList.toggle('is-active',p.dataset.panel===id)});
});
});
// Mirror hero
function spell(el,word){
el.innerHTML='';
word.split('').forEach(function(c){
var s=document.createElement('span');
s.className='ch';s.textContent=c;el.appendChild(s);
});
}
var left=document.getElementById('left'),right=document.getElementById('right');
var axis=document.getElementById('axis'),hint=document.getElementById('hint');
spell(left,'EVIL');spell(right,'LOVE');
var flipped=false;
axis.addEventListener('click',function(){
flipped=!flipped;
if(flipped){
axis.textContent='O';
spell(left,'EVOL');spell(right,'LOVE');
// highlight the collapse
left.querySelectorAll('.ch').forEach(function(c){c.style.color=(c.textContent==='O')?'var(--clay)':'var(--slate)';});
hint.innerHTML='With <span style="color:var(--clay)">O</span>, EVIL becomes EVOL — LOVE reversed. Remove the self and the distinction collapses into a reflection.';
}else{
axis.textContent='I';
spell(left,'EVIL');spell(right,'LOVE');
left.querySelectorAll('.ch').forEach(function(c){c.style.color='var(--slate)';});
hint.innerHTML='Click the <span style="color:var(--clay)">I</span> — flip it to O and watch the distinction collapse.';
}
});
</script>
</body>
</html>
The dashboard keeps everything from TN-130-evil-i-love but makes it explorable:
- Interactive hero — click the central I to flip it to O. EVIL becomes EVOL (LOVE reversed), visually enacting the note's core claim that the self is the only thing holding the two words apart.
- Four tabs — The Idea (your three callouts as cards), Anatomy (the letter-level mirror), Constraint (the English-only observation), and Lineage (the backlinks and source idea).
- All grounded in the note's actual content, tags,
53rfcode, and provenance. First tab shows by default, so it reads fine even before any interaction.
Say the word if you'd like me to save this alongside the note or tweak the tone.
