web: power off is a button, not a cheeky link

A real ghost button centred under the running machine, in the hero
buttons' own dress -- ghost on purpose: booting stays the loud verb,
stopping the quiet one. The caption drops to a side note beside it.

2 files changed, 24 insertions, 12 deletions

diff --git a/web/index.html b/web/index.html
index 91679f7..afb070f 100644
--- a/web/index.html
+++ b/web/index.html
@@ -186,9 +186,10 @@
     <button class="boot" type="button" id="boot_btn">boot the machine</button>
     <p class="aside">riscv64 · TinyEMU, compiled to wasm · yours until you reload</p>
   </div>
-  <p class="aside try-live" id="try_live" hidden>The machine is yours until
-  you <button class="linkish" type="button" id="kill_btn">power it
-  off</button> — that forgets it entirely, and the button comes back.</p>
+  <p class="try-live" id="try_live" hidden>
+    <button class="boot ghost" type="button" id="kill_btn">power off</button>
+    <span class="aside">forgets the machine entirely — boot another any time</span>
+  </p>
 </section>
 
 <!-- ================================================================ -->
diff --git a/web/site.css b/web/site.css
index d9b38fc..98b1703 100644
--- a/web/site.css
+++ b/web/site.css
@@ -256,18 +256,29 @@ section > p:last-child { margin-bottom: 0; }
   background: var(--bg);
 }
 
-.try-live { text-align: center; }
+/* The off switch: a real button, centred under the running machine, ghost
+ * so booting stays the loud verb and stopping the quiet one. */
+.try-live {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.9rem;
+  margin: 0.8rem 0 0;
+}
+.try-live[hidden] { display: none; }
 
-/* A button dressed as a link, for verbs that live inside a sentence. */
-.linkish {
-  padding: 0;
-  border: 0;
-  background: none;
+.boot.ghost {
+  background: transparent;
+  border: 1px solid var(--faint);
+  color: var(--dim);
+  font-size: 14px;
+  padding: 0.4rem 1.2rem;
+}
+.boot.ghost:hover {
+  background: transparent;
+  border-color: var(--pink);
   color: var(--pink);
-  font: inherit;
-  cursor: pointer;
 }
-.linkish:hover { color: #fff; text-decoration: underline; }
 
 /* ---- the install box ------------------------------------------------- */
 /* Pick a platform, read only its instructions. Hidden radios, labels drawn