buttons: site pattern (deep-copper default, accent hover), wider item list, label tweak

index.html

@@ -31,17 +31,21 @@
   .tab { padding: 6px 16px; border: 1px solid var(--border);
          border-radius: 999px; background: var(--surface); cursor: pointer;
          font: 500 13px var(--sans); color: var(--ink); }
+  .tab { transition: background .15s, border-color .15s; }
   .tab:hover { border-color: var(--accent); }
-  .tab.active { background: var(--accent); color: #fff;
-                border-color: var(--accent); }
+  .tab.active { background: var(--accent-strong); color: #fff;
+                border-color: var(--accent-strong); }
+  .tab.active:hover { background: var(--accent);
+                      border-color: var(--accent); }
   header .links { margin-left: auto; display: flex; gap: 8px; }
-  header .links a { padding: 6px 16px; border: 1px solid var(--border);
-                    border-radius: 999px; background: var(--surface);
-                    color: var(--ink); font: 500 13px var(--sans);
-                    text-decoration: none; }
-  header .links a:hover { border-color: var(--accent); color: var(--accent); }
+  header .links a { padding: 6px 16px; border: 0; border-radius: 999px;
+                    background: var(--accent-strong); color: #fff;
+                    font: 600 13px var(--sans); text-decoration: none;
+                    transition: background .15s; }
+  header .links a:hover { background: var(--accent); }
+  header .links a:active { transform: scale(.95); }
   main { flex: 1; display: flex; min-height: 0; }
-  #itemlist { width: 176px; overflow-y: auto; padding: 10px;
+  #itemlist { width: 212px; overflow-y: auto; padding: 10px;
               background: var(--page); }
   .itembtn { display: block; width: 100%; text-align: left; margin-bottom: 6px;
              padding: 8px 10px; border: 1px solid var(--border);
@@ -49,9 +53,12 @@
              font: 500 12px var(--code); color: var(--ink); }
   .itembtn small { display: block; color: var(--body);
                    font: 11px var(--sans); }
+  .itembtn { transition: background .15s, border-color .15s; }
   .itembtn:hover { border-color: var(--accent); }
-  .itembtn.active { border-color: var(--accent); background: var(--accent);
-                    color: #fff; }
+  .itembtn.active { border-color: var(--accent-strong);
+                    background: var(--accent-strong); color: #fff; }
+  .itembtn.active:hover { background: var(--accent);
+                          border-color: var(--accent); }
   .itembtn.active small { color: var(--accent-soft); }
   #stage { flex: 1; position: relative; min-width: 0; }
   #stage canvas { display: block; }
@@ -70,19 +77,22 @@
   .joint input { width: 100%; accent-color: var(--accent); }
   .row { display: flex; gap: 8px; margin: 12px 0; }
   .row button { flex: 1; padding: 7px 0; border: 0; border-radius: 999px;
-                background: var(--accent); color: #fff; cursor: pointer;
-                font: 600 13px var(--sans); }
-  .row button:hover { background: var(--accent-strong); }
+                background: var(--accent-strong); color: #fff; cursor: pointer;
+                font: 600 13px var(--sans); transition: background .15s; }
+  .row button:hover { background: var(--accent); }
+  .row button:active { transform: scale(.95); }
   .row button.ghost { background: var(--subtle); color: var(--ink); }
-  .row button.ghost:hover { background: var(--border); }
+  .row button.ghost:hover { background: var(--page); }
   #panel pre { background: var(--ink); color: var(--accent-soft);
                padding: 10px; border-radius: 12px; font: 10px/1.5 var(--code);
                white-space: pre-wrap; word-break: break-all;
                max-height: 150px; overflow-y: auto; }
   #panel .copy { margin-top: 2px; padding: 6px 14px; border: 0;
-                 border-radius: 999px; background: var(--accent); color: #fff;
-                 cursor: pointer; font: 600 12px var(--sans); }
-  #panel .copy:hover { background: var(--accent-strong); }
+                 border-radius: 999px; background: var(--accent-strong);
+                 color: #fff; cursor: pointer; font: 600 12px var(--sans);
+                 transition: background .15s; }
+  #panel .copy:hover { background: var(--accent); }
+  #panel .copy:active { transform: scale(.95); }
   #panel .copy.ok { background: var(--success); }
 </style>
 </head>
@@ -94,7 +104,7 @@
     <a id="dslink" href="https://huggingface.co/projectsim"
        target="_blank" rel="noopener">Dataset</a>
     <a href="https://www.projectsim.ai" target="_blank"
-       rel="noopener">www.projectsim.ai</a>
+       rel="noopener">projectsim.ai</a>
   </nav>
 </header>
 <main>