# Kit

Every piece of the thirdculture look on one page. Tune here first, then roll out. Not linked from the menu.

## Type

Body text is abordage across the full panel width. _Italics_ and __bold__ for emphasis. Links look [like this](/guides/) and split into lavender and mint on hover. Inline `code` is green.

### A third level heading

#### A fourth level heading

Keyboard keys: press <kbd>Ctrl</kbd> + <kbd>K</kbd>.

## Steps

<ol>
<li>Apply on misaki with a username and a short note about yourself.</li>
<li>Wait for an admin to approve you. You get a mail if you left an address.</li>
<li>Request the services you want from your dashboard.</li>
</ol>

## Commands

<pre class="cmd"><code>ssh -p 33369 you@thirdculture.diy</code></pre>

A plain code block, for output or config:

    [server]
    host = "irc.thirdculture.diy"
    port = 6697

## Panels

<div class="panel" data-label="note">
<p>misaki is the one login for every service here.</p>
</div>

<div class="panel warn" data-label="warn">
<p>Recovery codes are shown once. Save them before you leave the page.</p>
</div>

<div class="panel privacy" data-label="privacy">
<p>What this service keeps about you, copied from the data inventory so every line is true.</p>
</div>

<div class="panel onion" data-label="onion">
<p><code>thirdculture….onion</code></p>
</div>

> A plain quote stays italic mint, for words from people rather than notes from us.

## Listing

For members, links, anything list-shaped. Leave `<b></b>` empty and it counts for you. The header row is optional; on a phone the note drops under the name. Give a row its own colours with `style="--c:#e03244; --c2:#71d6db"` (name, then hover glitch).

<div class="dir" data-label="members">
<div class="h"><b>##</b><span>name</span><small>vibe</small><i>node</i></div>
<a href="/collective/moridori" style="--c:#d478ee; --c2:#1d75d4"><b></b><span>moridori</span><small>emotional hardcore's wonderful death</small><i>moridori.xyz</i></a>
<a href="/collective/faal" style="--c:#e0c9a6; --c2:#970101"><b></b><span>Future As A Letterbomber</span><small>post-hardcore</small><i>letterbomber.zip</i></a>
<div><b>--</b><span>not a link</span><small>rows can be plain divs too</small><i>static</i></div>
</div>

<pre><code>&lt;div class="dir" data-label="members"&gt;
&lt;div class="h"&gt;&lt;b&gt;##&lt;/b&gt;&lt;span&gt;name&lt;/span&gt;&lt;small&gt;vibe&lt;/small&gt;&lt;i&gt;node&lt;/i&gt;&lt;/div&gt;
&lt;a href="moridori" style="--c:#d478ee; --c2:#1d75d4"&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;moridori&lt;/span&gt;&lt;small&gt;emotional hardcore&lt;/small&gt;&lt;i&gt;moridori.xyz&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre>

## Badges

<p><span class="badge">onion</span> <span class="badge">i2p</span> <span class="badge">misaki login</span> <span class="badge">no logs</span> <span class="badge">e2ee</span> <span class="badge hot">admin only</span> <span class="badge dim">planned</span></p>

## Table

<table>
<tr><th>service</th><th>login</th><th>logs IPs</th></tr>
<tr><td>XMPP</td><td>misaki</td><td>no</td></tr>
<tr><td>IRC</td><td>misaki</td><td>no</td></tr>
<tr><td>mail</td><td>misaki</td><td>no</td></tr>
</table>

## Accent: magenta candidate

The one hot colour, for warnings and the active nav item only. <span style="color:var(--hot)">#FF6AD5 at 8.2:1</span> against the background. Compare <span class="accent">lavender</span> and <span class="accent2">mint</span>.

<div class="date">2026-11-07</div>