privateboard 0.1.11 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +4260 -1660
- package/dist/cli.js.map +1 -1
- package/package.json +2 -1
- package/public/adjourn-overlay.css +8 -4
- package/public/agent-profile.css +345 -0
- package/public/agent-profile.js +222 -3
- package/public/app.js +4990 -149
- package/public/home.html +609 -1
- package/public/i18n.js +49 -385
- package/public/index.html +9549 -5314
- package/public/new-agent.js +148 -37
- package/public/quote-cta.css +7 -3
- package/public/quote-cta.js +21 -0
- package/public/report.html +109 -12
- package/public/room-settings.css +67 -0
- package/public/room-settings.js +72 -6
- package/public/themes.css +38 -0
- package/public/typing-sfx.js +87 -1
- package/public/user-settings.js +3 -1
- package/public/voice-replay.css +70 -1
- package/public/voice-replay.js +265 -2
package/public/home.html
CHANGED
|
@@ -686,6 +686,25 @@
|
|
|
686
686
|
color: var(--text-soft);
|
|
687
687
|
margin-top: auto;
|
|
688
688
|
}
|
|
689
|
+
/* Model badge · small mono chip pinned below the desc. Reads as a
|
|
690
|
+
"spec sheet" line — the director's headline + voice + the engine
|
|
691
|
+
under the hood. Same chip vocabulary as `.bc-chip` on the
|
|
692
|
+
commission card so the cast row + custom card share grammar. */
|
|
693
|
+
.bento-director-model {
|
|
694
|
+
align-self: flex-start;
|
|
695
|
+
margin-top: 8px;
|
|
696
|
+
padding: 2px 8px;
|
|
697
|
+
background: var(--panel-2);
|
|
698
|
+
border: 0.5px solid var(--line-bright);
|
|
699
|
+
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
700
|
+
font-size: 9px;
|
|
701
|
+
letter-spacing: 0.04em;
|
|
702
|
+
color: var(--text-soft);
|
|
703
|
+
white-space: nowrap;
|
|
704
|
+
}
|
|
705
|
+
@media (max-width: 760px) {
|
|
706
|
+
.bento-director-model { font-size: 8.5px; padding: 1px 7px; }
|
|
707
|
+
}
|
|
689
708
|
|
|
690
709
|
/* ─────────── COMMISSION CARD · the ceremonial bento ───────────
|
|
691
710
|
Right column · spec-sheet-flavoured. Lime corner brackets at
|
|
@@ -824,7 +843,6 @@
|
|
|
824
843
|
padding: 2px 9px;
|
|
825
844
|
background: var(--bg);
|
|
826
845
|
border: 0.5px solid var(--line-bright);
|
|
827
|
-
border-radius: 999px;
|
|
828
846
|
font-family: var(--mono, "Inter", system-ui, sans-serif);
|
|
829
847
|
font-size: 10px;
|
|
830
848
|
letter-spacing: 0.04em;
|
|
@@ -1414,6 +1432,274 @@
|
|
|
1414
1432
|
.gh-link { padding: 6px; }
|
|
1415
1433
|
.gh-link svg { width: 20px; height: 20px; }
|
|
1416
1434
|
}
|
|
1435
|
+
|
|
1436
|
+
/* ═══════════════════════════════════════════════════════════
|
|
1437
|
+
VOICE ROOMS · themed boardroom showcase
|
|
1438
|
+
Curated subset of the round-table CSS from index.html (the
|
|
1439
|
+
live app). Animations stripped · marketing scope = static
|
|
1440
|
+
snapshot. Theme palettes are scoped per-preview via inline
|
|
1441
|
+
CSS variables on the `.voice-room-preview` wrapper, so each
|
|
1442
|
+
thumbnail's `var(--lime)` / `var(--bg)` / etc. resolves to
|
|
1443
|
+
the preview's own palette regardless of the page's
|
|
1444
|
+
<html data-theme>.
|
|
1445
|
+
═══════════════════════════════════════════════════════════ */
|
|
1446
|
+
.voice-room-grid {
|
|
1447
|
+
display: grid;
|
|
1448
|
+
grid-template-columns: repeat(2, 1fr);
|
|
1449
|
+
gap: 18px;
|
|
1450
|
+
margin-top: 28px;
|
|
1451
|
+
}
|
|
1452
|
+
@media (max-width: 760px) {
|
|
1453
|
+
.voice-room-grid { grid-template-columns: 1fr; }
|
|
1454
|
+
}
|
|
1455
|
+
.voice-room-preview {
|
|
1456
|
+
display: flex;
|
|
1457
|
+
flex-direction: column;
|
|
1458
|
+
gap: 0;
|
|
1459
|
+
border: 1px solid var(--line-bright);
|
|
1460
|
+
background: var(--bg);
|
|
1461
|
+
overflow: hidden;
|
|
1462
|
+
transition: border-color 0.18s, transform 0.18s;
|
|
1463
|
+
}
|
|
1464
|
+
.voice-room-preview:hover {
|
|
1465
|
+
border-color: var(--lime);
|
|
1466
|
+
transform: translateY(-2px);
|
|
1467
|
+
}
|
|
1468
|
+
.vrp-stage {
|
|
1469
|
+
position: relative;
|
|
1470
|
+
width: 100%;
|
|
1471
|
+
height: 220px;
|
|
1472
|
+
overflow: hidden;
|
|
1473
|
+
/* 8-bit boardroom floor · tile pattern + vignette pulled from
|
|
1474
|
+
the live `.roundtable-stage` in index.html. Each preview
|
|
1475
|
+
overrides `--floor-bg` / `--floor-image` / `--floor-size`
|
|
1476
|
+
per `[data-preview-theme]` selector below so the showcase
|
|
1477
|
+
advertises the same tone-keyed floor variants the app uses
|
|
1478
|
+
(grass / marble / carpet / etc.). Tile size is reduced to
|
|
1479
|
+
~half of the live app's so the pattern reads at the 220px
|
|
1480
|
+
preview scale without becoming a single oversized blob. */
|
|
1481
|
+
background-color: var(--floor-bg, #2A2C32);
|
|
1482
|
+
background-image:
|
|
1483
|
+
radial-gradient(ellipse at 50% 50%,
|
|
1484
|
+
transparent 28%,
|
|
1485
|
+
rgba(0, 0, 0, 0.40) 78%,
|
|
1486
|
+
rgba(0, 0, 0, 0.55) 100%),
|
|
1487
|
+
var(--floor-image, none);
|
|
1488
|
+
background-repeat: no-repeat, repeat;
|
|
1489
|
+
background-size: auto, var(--floor-size, 64px 64px);
|
|
1490
|
+
image-rendering: pixelated;
|
|
1491
|
+
}
|
|
1492
|
+
/* ─── Floor variants · one per preview ─────────────────────────
|
|
1493
|
+
Source tiles are 32×32 / 64×64 / 128×128 SVGs (data-URIs lifted
|
|
1494
|
+
verbatim from `index.html`). Each `--floor-size` is set to ~½
|
|
1495
|
+
of the original tile so the pattern reads with the right
|
|
1496
|
+
density at this preview scale (the live stage is 4-5× larger,
|
|
1497
|
+
where the natural tile size feels right). */
|
|
1498
|
+
.voice-room-preview[data-preview-theme="eastwood"] .vrp-stage {
|
|
1499
|
+
/* Brainstorm · soil + grass terrain (creative · open ground) */
|
|
1500
|
+
--floor-bg: #5E6B47;
|
|
1501
|
+
--floor-size: 64px 64px;
|
|
1502
|
+
--floor-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' shape-rendering='crispEdges'><rect width='128' height='128' fill='%235E6B47'/><rect x='0' y='8' width='20' height='16' fill='%234F5C3D'/><rect x='104' y='20' width='20' height='20' fill='%234F5C3D'/><rect x='88' y='64' width='24' height='16' fill='%234F5C3D'/><rect x='0' y='64' width='12' height='20' fill='%234F5C3D'/><rect x='44' y='64' width='16' height='8' fill='%234F5C3D'/><rect x='72' y='8' width='12' height='8' fill='%236E7A52'/><rect x='120' y='80' width='8' height='12' fill='%236E7A52'/><rect x='48' y='84' width='8' height='8' fill='%236E7A52'/><rect x='48' y='24' width='32' height='32' fill='%235C4838'/><rect x='44' y='28' width='4' height='24' fill='%235C4838'/><rect x='80' y='28' width='4' height='24' fill='%235C4838'/><rect x='52' y='20' width='24' height='4' fill='%235C4838'/><rect x='52' y='56' width='20' height='4' fill='%235C4838'/><rect x='56' y='16' width='12' height='4' fill='%235C4838'/><rect x='56' y='32' width='8' height='8' fill='%234A3A28'/><rect x='68' y='40' width='4' height='8' fill='%234A3A28'/><rect x='60' y='24' width='4' height='4' fill='%236E5A48'/><rect x='68' y='48' width='4' height='4' fill='%236E5A48'/><rect x='58' y='44' width='2' height='2' fill='%236B6258'/><rect x='72' y='32' width='2' height='2' fill='%236B6258'/><rect x='50' y='38' width='2' height='2' fill='%236B6258'/><rect x='16' y='96' width='24' height='20' fill='%235C4838'/><rect x='12' y='100' width='4' height='12' fill='%235C4838'/><rect x='40' y='100' width='4' height='12' fill='%235C4838'/><rect x='20' y='92' width='16' height='4' fill='%235C4838'/><rect x='22' y='104' width='8' height='4' fill='%234A3A28'/><rect x='20' y='100' width='4' height='4' fill='%236E5A48'/><rect x='24' y='108' width='2' height='2' fill='%236B6258'/><rect x='32' y='98' width='2' height='2' fill='%236B6258'/><rect x='8' y='40' width='1' height='2' fill='%238FA068'/><rect x='24' y='72' width='1' height='2' fill='%238FA068'/><rect x='104' y='56' width='1' height='2' fill='%238FA068'/><rect x='120' y='104' width='1' height='2' fill='%238FA068'/><rect x='88' y='44' width='1' height='2' fill='%238FA068'/><rect x='4' y='88' width='1' height='2' fill='%238FA068'/><rect x='64' y='88' width='1' height='2' fill='%238FA068'/><rect x='92' y='24' width='1' height='2' fill='%238FA068'/><rect x='44' y='62' width='1' height='2' fill='%238FA068'/><rect x='80' y='120' width='1' height='2' fill='%238FA068'/><rect x='12' y='12' width='1' height='2' fill='%238FA068'/><rect x='112' y='60' width='1' height='2' fill='%238FA068'/></svg>");
|
|
1503
|
+
}
|
|
1504
|
+
.voice-room-preview[data-preview-theme="regent"] .vrp-stage {
|
|
1505
|
+
/* Constructive · graphite-marble slabs (structured · executive) */
|
|
1506
|
+
--floor-bg: #2A2C32;
|
|
1507
|
+
--floor-size: 64px 64px;
|
|
1508
|
+
--floor-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' shape-rendering='crispEdges'><rect width='128' height='128' fill='%232A2C32'/><rect x='20' y='30' width='30' height='18' fill='%232F3138'/><rect x='75' y='75' width='25' height='25' fill='%2325272D'/><rect x='5' y='90' width='18' height='15' fill='%232D2F36'/><rect x='20' y='25' width='1' height='1' fill='%231F2026'/><rect x='50' y='65' width='1' height='1' fill='%231F2026'/><rect x='90' y='30' width='1' height='1' fill='%231F2026'/><rect x='110' y='100' width='1' height='1' fill='%231F2026'/><rect x='35' y='110' width='1' height='1' fill='%231F2026'/><rect x='65' y='15' width='1' height='1' fill='%231F2026'/><rect x='100' y='55' width='1' height='1' fill='%231F2026'/><rect x='15' y='15' width='1' height='1' fill='%233D4048'/><rect x='40' y='45' width='1' height='1' fill='%233D4048'/><rect x='70' y='35' width='1' height='1' fill='%233D4048'/><rect x='95' y='80' width='1' height='1' fill='%233D4048'/><rect x='25' y='75' width='1' height='1' fill='%233D4048'/><rect x='55' y='100' width='1' height='1' fill='%233D4048'/><rect x='30' y='55' width='1' height='1' fill='%234A4D55'/><rect x='80' y='20' width='1' height='1' fill='%234A4D55'/><rect x='115' y='65' width='1' height='1' fill='%234A4D55'/><rect x='45' y='85' width='2' height='1' fill='%233D4048'/><rect x='100' y='35' width='1' height='2' fill='%233D4048'/><rect x='10' y='50' width='2' height='1' fill='%231F2026'/><rect x='126' y='0' width='2' height='128' fill='%2315161B'/><rect x='0' y='126' width='128' height='2' fill='%2315161B'/></svg>");
|
|
1509
|
+
}
|
|
1510
|
+
.voice-room-preview[data-preview-theme="atrium"] .vrp-stage {
|
|
1511
|
+
/* Research · light marble + thin veins (scholarly · museum) */
|
|
1512
|
+
--floor-bg: #BFBBB0;
|
|
1513
|
+
--floor-size: 64px 64px;
|
|
1514
|
+
--floor-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' shape-rendering='crispEdges'><rect width='128' height='128' fill='%23BFBBB0'/><rect x='64' y='0' width='64' height='64' fill='%23B5B0A4'/><rect x='0' y='64' width='64' height='64' fill='%23C4C0B5'/><rect x='63' y='0' width='1' height='128' fill='%23A0998D'/><rect x='0' y='63' width='128' height='1' fill='%23A0998D'/><rect x='10' y='20' width='2' height='6' fill='%238E8A7F'/><rect x='12' y='26' width='6' height='2' fill='%238E8A7F'/><rect x='18' y='28' width='4' height='2' fill='%238E8A7F'/><rect x='22' y='30' width='2' height='4' fill='%238E8A7F'/><rect x='80' y='80' width='8' height='2' fill='%238E8A7F'/><rect x='86' y='82' width='2' height='6' fill='%238E8A7F'/><rect x='88' y='88' width='6' height='2' fill='%238E8A7F'/><rect x='40' y='100' width='2' height='4' fill='%238E8A7F'/><rect x='42' y='104' width='8' height='2' fill='%238E8A7F'/><rect x='90' y='10' width='2' height='4' fill='%238E8A7F'/><rect x='92' y='14' width='6' height='2' fill='%238E8A7F'/></svg>");
|
|
1515
|
+
}
|
|
1516
|
+
.voice-room-preview[data-preview-theme="nintendo"] .vrp-stage {
|
|
1517
|
+
/* Critique · burgundy carpet with diamond motif (formal) */
|
|
1518
|
+
--floor-bg: #5A2A2A;
|
|
1519
|
+
--floor-size: 24px 24px;
|
|
1520
|
+
--floor-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'><rect width='32' height='32' fill='%235A2A2A'/><rect x='14' y='14' width='4' height='4' fill='%237A4040'/><rect x='12' y='15' width='8' height='2' fill='%237A4040'/><rect x='15' y='12' width='2' height='8' fill='%237A4040'/><rect x='15' y='4' width='2' height='4' fill='%23753838'/><rect x='15' y='24' width='2' height='4' fill='%23753838'/><rect x='4' y='15' width='4' height='2' fill='%23753838'/><rect x='24' y='15' width='4' height='2' fill='%23753838'/><rect x='2' y='2' width='1' height='1' fill='%23753838'/><rect x='29' y='2' width='1' height='1' fill='%23753838'/><rect x='2' y='29' width='1' height='1' fill='%23753838'/><rect x='29' y='29' width='1' height='1' fill='%23753838'/></svg>");
|
|
1521
|
+
}
|
|
1522
|
+
.vrp-caption {
|
|
1523
|
+
display: flex;
|
|
1524
|
+
align-items: baseline;
|
|
1525
|
+
gap: 8px;
|
|
1526
|
+
padding: 12px 14px 14px;
|
|
1527
|
+
border-top: 0.5px solid var(--line-bright);
|
|
1528
|
+
background: var(--panel-2);
|
|
1529
|
+
font-family: var(--mono);
|
|
1530
|
+
font-size: 10.5px;
|
|
1531
|
+
letter-spacing: 0.04em;
|
|
1532
|
+
}
|
|
1533
|
+
.vrp-caption-name {
|
|
1534
|
+
color: var(--text);
|
|
1535
|
+
font-weight: 700;
|
|
1536
|
+
text-transform: uppercase;
|
|
1537
|
+
letter-spacing: 0.14em;
|
|
1538
|
+
}
|
|
1539
|
+
.vrp-caption-deck {
|
|
1540
|
+
color: var(--text-soft);
|
|
1541
|
+
font-size: 9.5px;
|
|
1542
|
+
letter-spacing: 0.06em;
|
|
1543
|
+
}
|
|
1544
|
+
/* ─── Mini round-table primitives · sized + positioned versions
|
|
1545
|
+
of `.rt-table` / `.rt-chair` / `.rt-avatar` / `.rt-seat` /
|
|
1546
|
+
`.rt-name` from index.html.
|
|
1547
|
+
|
|
1548
|
+
Seat anchor model · `translate(-50%, -100%)` pins the seat's
|
|
1549
|
+
BOTTOM edge to the (left%, top%) coordinate so the position
|
|
1550
|
+
represents the chair's FLOOR position (where the feet land),
|
|
1551
|
+
not the seat's center. This means a director seated at y=33%
|
|
1552
|
+
has their chair body extending UPWARD from y=33% — chair
|
|
1553
|
+
never overlaps into the table area below as it did when
|
|
1554
|
+
seat-center was the anchor on the small 220px stage. Live app
|
|
1555
|
+
uses the same conceptual model (chair at bottom of seat) but
|
|
1556
|
+
gets away with center-anchor because the stage is 4× bigger,
|
|
1557
|
+
so the chair-body half-height is a small fraction of stage. */
|
|
1558
|
+
.vrp-stage .rt-table {
|
|
1559
|
+
position: absolute;
|
|
1560
|
+
top: 36%;
|
|
1561
|
+
left: 18%;
|
|
1562
|
+
width: 64%;
|
|
1563
|
+
height: 28%;
|
|
1564
|
+
pointer-events: none;
|
|
1565
|
+
shape-rendering: crispEdges;
|
|
1566
|
+
}
|
|
1567
|
+
.vrp-stage .rt-seat {
|
|
1568
|
+
position: absolute;
|
|
1569
|
+
width: 48px;
|
|
1570
|
+
height: 48px;
|
|
1571
|
+
transform: translate(-50%, -100%);
|
|
1572
|
+
pointer-events: none;
|
|
1573
|
+
}
|
|
1574
|
+
.vrp-stage .rt-chair {
|
|
1575
|
+
position: absolute;
|
|
1576
|
+
bottom: 0;
|
|
1577
|
+
left: 50%;
|
|
1578
|
+
transform: translateX(-50%);
|
|
1579
|
+
width: 36px;
|
|
1580
|
+
height: 40px;
|
|
1581
|
+
shape-rendering: crispEdges;
|
|
1582
|
+
z-index: 1;
|
|
1583
|
+
}
|
|
1584
|
+
/* Moderator chair · `currentColor` on the rails + gem rects
|
|
1585
|
+
inside the symbol resolves to the preview's `--cyan`. */
|
|
1586
|
+
.vrp-stage .rt-chair--mod { color: var(--cyan, #6A9B97); }
|
|
1587
|
+
/* Speech bubble · pinned above the speaking seat. One seat per
|
|
1588
|
+
preview carries `.rt-seat-speaking` + an inline bubble so the
|
|
1589
|
+
showcase reads as "this is what a live voice room looks like
|
|
1590
|
+
mid-turn." Bubble palette uses the preview's `--lime` accent so
|
|
1591
|
+
each theme's primary colour does the lifting; the downward
|
|
1592
|
+
triangle tail points at the avatar's head. Animations from the
|
|
1593
|
+
live stage (idle bob, glow ring) are intentionally NOT
|
|
1594
|
+
reproduced here — marketing wants a frozen snapshot. */
|
|
1595
|
+
.vrp-stage .rt-bubble {
|
|
1596
|
+
position: absolute;
|
|
1597
|
+
top: 0;
|
|
1598
|
+
left: 50%;
|
|
1599
|
+
transform: translate(-50%, -100%);
|
|
1600
|
+
display: inline-flex;
|
|
1601
|
+
align-items: center;
|
|
1602
|
+
gap: 4px;
|
|
1603
|
+
padding: 3px 7px;
|
|
1604
|
+
background: var(--panel-3, var(--panel));
|
|
1605
|
+
border: 1px solid var(--lime);
|
|
1606
|
+
color: var(--lime);
|
|
1607
|
+
font-family: var(--mono);
|
|
1608
|
+
font-size: 8px;
|
|
1609
|
+
font-weight: 700;
|
|
1610
|
+
letter-spacing: 0.16em;
|
|
1611
|
+
text-transform: uppercase;
|
|
1612
|
+
white-space: nowrap;
|
|
1613
|
+
z-index: 5;
|
|
1614
|
+
pointer-events: none;
|
|
1615
|
+
}
|
|
1616
|
+
.vrp-stage .rt-bubble::after {
|
|
1617
|
+
content: "";
|
|
1618
|
+
position: absolute;
|
|
1619
|
+
bottom: -4px;
|
|
1620
|
+
left: 50%;
|
|
1621
|
+
transform: translateX(-50%);
|
|
1622
|
+
width: 0;
|
|
1623
|
+
height: 0;
|
|
1624
|
+
border-left: 4px solid transparent;
|
|
1625
|
+
border-right: 4px solid transparent;
|
|
1626
|
+
border-top: 4px solid var(--lime);
|
|
1627
|
+
}
|
|
1628
|
+
/* Hide the name plate while the seat is speaking · the bubble
|
|
1629
|
+
replaces it (same vertical slot, less visual stacking). */
|
|
1630
|
+
.vrp-stage .rt-seat-speaking .rt-name { display: none; }
|
|
1631
|
+
.vrp-stage .rt-avatar {
|
|
1632
|
+
position: absolute;
|
|
1633
|
+
bottom: 6px;
|
|
1634
|
+
left: 50%;
|
|
1635
|
+
transform: translateX(-50%);
|
|
1636
|
+
width: 28px;
|
|
1637
|
+
height: 30px;
|
|
1638
|
+
image-rendering: pixelated;
|
|
1639
|
+
z-index: 2;
|
|
1640
|
+
pointer-events: none;
|
|
1641
|
+
}
|
|
1642
|
+
/* Director (top-arc) name plate · ABOVE the seat, above the chair
|
|
1643
|
+
back-rail so it doesn't sit on the table props. Chair-seat's
|
|
1644
|
+
name is overridden below to flip BELOW the seat (front-row). */
|
|
1645
|
+
.vrp-stage .rt-name {
|
|
1646
|
+
position: absolute;
|
|
1647
|
+
top: -14px;
|
|
1648
|
+
left: 50%;
|
|
1649
|
+
transform: translateX(-50%);
|
|
1650
|
+
font-family: var(--mono);
|
|
1651
|
+
font-size: 8.5px;
|
|
1652
|
+
font-weight: 700;
|
|
1653
|
+
letter-spacing: 0.08em;
|
|
1654
|
+
text-transform: uppercase;
|
|
1655
|
+
white-space: nowrap;
|
|
1656
|
+
text-align: center;
|
|
1657
|
+
pointer-events: none;
|
|
1658
|
+
padding: 2px 5px;
|
|
1659
|
+
color: var(--text-soft);
|
|
1660
|
+
background: rgba(10, 10, 10, 0.62);
|
|
1661
|
+
border: 0.5px solid rgba(255, 255, 255, 0.08);
|
|
1662
|
+
}
|
|
1663
|
+
.vrp-stage .rt-seat-chair .rt-name {
|
|
1664
|
+
color: var(--lime);
|
|
1665
|
+
}
|
|
1666
|
+
/* Front-row chair-seat's name plate flips BELOW the seat (mirrors
|
|
1667
|
+
the live app's `.rt-seat-below .rt-name`) so the label doesn't
|
|
1668
|
+
land on top of the table props (mic, books, etc.). The negative
|
|
1669
|
+
bottom offset clears the chair feet (which sit at seat_bottom)
|
|
1670
|
+
and leaves a small gap above plant 2 in the bottom-left corner. */
|
|
1671
|
+
.vrp-stage .rt-seat-chair .rt-name {
|
|
1672
|
+
top: auto;
|
|
1673
|
+
bottom: -16px;
|
|
1674
|
+
}
|
|
1675
|
+
/* Atrium (the light theme) flips the name-plate backdrop · the
|
|
1676
|
+
dark rgba(10,10,10,0.62) reads as a sticker on warm paper,
|
|
1677
|
+
which works; just lift the border so it reads as part of the
|
|
1678
|
+
scene rather than floating. */
|
|
1679
|
+
.voice-room-preview[data-preview-theme="atrium"] .vrp-stage .rt-name {
|
|
1680
|
+
background: rgba(31, 30, 26, 0.78);
|
|
1681
|
+
color: #F4F2EC;
|
|
1682
|
+
border-color: rgba(0, 0, 0, 0.18);
|
|
1683
|
+
}
|
|
1684
|
+
/* ─── Potted plants · two decorative props pinned to the
|
|
1685
|
+
back-right and front-left corners of the stage (same diagonal
|
|
1686
|
+
as the live app). Sized down to 40×50 so they don't crowd the
|
|
1687
|
+
side seats at the small preview scale. z-index: 2 keeps them
|
|
1688
|
+
above the table but they sit clear of the seat ring with the
|
|
1689
|
+
current rx=38 (verified at desktop widths). On very narrow
|
|
1690
|
+
viewports the rightmost / leftmost director may brush the
|
|
1691
|
+
plant — acceptable trade-off for a preview thumbnail. */
|
|
1692
|
+
.vrp-stage .rt-plant {
|
|
1693
|
+
position: absolute;
|
|
1694
|
+
width: 40px;
|
|
1695
|
+
height: 50px;
|
|
1696
|
+
pointer-events: none;
|
|
1697
|
+
image-rendering: pixelated;
|
|
1698
|
+
shape-rendering: crispEdges;
|
|
1699
|
+
z-index: 2;
|
|
1700
|
+
}
|
|
1701
|
+
.vrp-stage .rt-plant-1 { top: 6px; right: 6px; }
|
|
1702
|
+
.vrp-stage .rt-plant-2 { bottom: 6px; left: 6px; }
|
|
1417
1703
|
</style>
|
|
1418
1704
|
<link rel="stylesheet" href="themes.css">
|
|
1419
1705
|
<link rel="stylesheet" href="agent-overlay.css">
|
|
@@ -1629,6 +1915,322 @@
|
|
|
1629
1915
|
</div>
|
|
1630
1916
|
</section>
|
|
1631
1917
|
|
|
1918
|
+
<!-- ─────────── VOICE ROOMS · themed boardroom showcase ───────────
|
|
1919
|
+
Four hand-authored thumbnails rendering the canonical voice-mode
|
|
1920
|
+
round-table stage in four distinct themes. Each preview is
|
|
1921
|
+
theme-scoped via inline CSS variables on the `.voice-room-preview`
|
|
1922
|
+
wrapper so descendants resolve `var(--lime)` / `var(--bg)` from
|
|
1923
|
+
the wrapper, not from `<html data-theme>`. Animations from the
|
|
1924
|
+
live stage (idle bob, ambient shimmer) are stripped — marketing
|
|
1925
|
+
wants a stable snapshot at scroll-glance. See the CSS block above
|
|
1926
|
+
the page's closing </style> for the curated `.rt-*` subset. -->
|
|
1927
|
+
<section class="section bracketed" id="voice-rooms">
|
|
1928
|
+
<div class="section-head">
|
|
1929
|
+
<div class="section-tag">Voice Rooms</div>
|
|
1930
|
+
<h2 class="section-title">Round table. <span class="accent">Tuned to the tone.</span></h2>
|
|
1931
|
+
<p class="section-deck">
|
|
1932
|
+
Voice mode replaces the chat scroll with a pixel-art boardroom · the directors take their seats around the table, the chair takes the host's chair. Each tone re-skins the floor and the palette — same gameworld, different mood.
|
|
1933
|
+
</p>
|
|
1934
|
+
</div>
|
|
1935
|
+
|
|
1936
|
+
<!-- Hidden SVG · symbol library for the chair + table sprites
|
|
1937
|
+
referenced by every preview. Fills are baked in as `fill="..."`
|
|
1938
|
+
attributes (not class selectors) so the cloned shadow tree
|
|
1939
|
+
renders identically across browsers regardless of how each
|
|
1940
|
+
engine cascades through `<use>` boundaries. -->
|
|
1941
|
+
<svg width="0" height="0" aria-hidden="true" style="position:absolute">
|
|
1942
|
+
<defs>
|
|
1943
|
+
<!-- Director (plain) chair · warm-wood pixel art. -->
|
|
1944
|
+
<symbol id="vrp-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet">
|
|
1945
|
+
<rect fill="#C8A877" x="8" y="4" width="16" height="4"/>
|
|
1946
|
+
<rect fill="#C8A877" x="7" y="8" width="18" height="14"/>
|
|
1947
|
+
<rect fill="#A0814F" x="7" y="22" width="18" height="2"/>
|
|
1948
|
+
<rect fill="#5A3A22" x="6" y="4" width="1" height="20"/>
|
|
1949
|
+
<rect fill="#5A3A22" x="25" y="4" width="1" height="20"/>
|
|
1950
|
+
<rect fill="#A0814F" x="7" y="4" width="1" height="20"/>
|
|
1951
|
+
<rect fill="#A0814F" x="24" y="4" width="1" height="20"/>
|
|
1952
|
+
<rect fill="#8B5E3B" x="5" y="22" width="22" height="8"/>
|
|
1953
|
+
<rect fill="#5A3A22" x="5" y="28" width="22" height="2"/>
|
|
1954
|
+
<rect fill="#5A3A22" x="7" y="30" width="2" height="8"/>
|
|
1955
|
+
<rect fill="#5A3A22" x="23" y="30" width="2" height="8"/>
|
|
1956
|
+
</symbol>
|
|
1957
|
+
<!-- Moderator chair · adds cyan side rails + headrest gem.
|
|
1958
|
+
Rail and gem colours pull from the preview's `--cyan` so
|
|
1959
|
+
the moderator's cue picks up each theme's accent. -->
|
|
1960
|
+
<symbol id="vrp-chair-mod" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet">
|
|
1961
|
+
<rect fill="#C8A877" x="8" y="4" width="16" height="4"/>
|
|
1962
|
+
<rect fill="#C8A877" x="7" y="8" width="18" height="14"/>
|
|
1963
|
+
<rect fill="#A0814F" x="7" y="22" width="18" height="2"/>
|
|
1964
|
+
<rect fill="#5A3A22" x="6" y="4" width="1" height="20"/>
|
|
1965
|
+
<rect fill="#5A3A22" x="25" y="4" width="1" height="20"/>
|
|
1966
|
+
<rect fill="#A0814F" x="7" y="4" width="1" height="20"/>
|
|
1967
|
+
<rect fill="#A0814F" x="24" y="4" width="1" height="20"/>
|
|
1968
|
+
<rect fill="#8B5E3B" x="5" y="22" width="22" height="8"/>
|
|
1969
|
+
<rect fill="#5A3A22" x="5" y="28" width="22" height="2"/>
|
|
1970
|
+
<rect fill="#5A3A22" x="7" y="30" width="2" height="8"/>
|
|
1971
|
+
<rect fill="#5A3A22" x="23" y="30" width="2" height="8"/>
|
|
1972
|
+
<rect fill="currentColor" x="5" y="8" width="1" height="14"/>
|
|
1973
|
+
<rect fill="currentColor" x="26" y="8" width="1" height="14"/>
|
|
1974
|
+
<rect fill="currentColor" x="15" y="6" width="2" height="2"/>
|
|
1975
|
+
<rect fill="#B8E5E0" x="15" y="6" width="1" height="1"/>
|
|
1976
|
+
</symbol>
|
|
1977
|
+
<!-- Bushy potted plant · multi-layer leaves + terracotta pot.
|
|
1978
|
+
Lifted verbatim from `index.html`'s `.rt-plant-1` so the
|
|
1979
|
+
marketing room shares the same prop vocabulary as the
|
|
1980
|
+
live stage. -->
|
|
1981
|
+
<symbol id="vrp-plant-1" viewBox="0 0 48 60" preserveAspectRatio="xMidYMid meet">
|
|
1982
|
+
<rect x="22" y="0" width="4" height="3" fill="#2A4F1D"/>
|
|
1983
|
+
<rect x="21" y="3" width="6" height="3" fill="#3D6E2F"/>
|
|
1984
|
+
<rect x="9" y="6" width="30" height="3" fill="#2A4F1D"/>
|
|
1985
|
+
<rect x="6" y="9" width="36" height="3" fill="#2A4F1D"/>
|
|
1986
|
+
<rect x="3" y="12" width="42" height="12" fill="#2A4F1D"/>
|
|
1987
|
+
<rect x="6" y="24" width="36" height="3" fill="#2A4F1D"/>
|
|
1988
|
+
<rect x="9" y="27" width="30" height="3" fill="#2A4F1D"/>
|
|
1989
|
+
<rect x="12" y="9" width="24" height="3" fill="#3D6E2F"/>
|
|
1990
|
+
<rect x="9" y="12" width="30" height="9" fill="#3D6E2F"/>
|
|
1991
|
+
<rect x="12" y="21" width="24" height="3" fill="#3D6E2F"/>
|
|
1992
|
+
<rect x="12" y="24" width="24" height="3" fill="#1F3A14"/>
|
|
1993
|
+
<rect x="15" y="12" width="6" height="3" fill="#6BAA48"/>
|
|
1994
|
+
<rect x="24" y="9" width="6" height="3" fill="#6BAA48"/>
|
|
1995
|
+
<rect x="9" y="15" width="3" height="3" fill="#6BAA48"/>
|
|
1996
|
+
<rect x="33" y="15" width="3" height="3" fill="#6BAA48"/>
|
|
1997
|
+
<rect x="21" y="18" width="6" height="3" fill="#6BAA48"/>
|
|
1998
|
+
<rect x="22" y="30" width="4" height="3" fill="#5A3A1F"/>
|
|
1999
|
+
<rect x="12" y="32" width="24" height="1" fill="#5A2D14"/>
|
|
2000
|
+
<rect x="9" y="33" width="30" height="2" fill="#5A2D14"/>
|
|
2001
|
+
<rect x="12" y="35" width="24" height="3" fill="#3D2418"/>
|
|
2002
|
+
<rect x="9" y="38" width="30" height="3" fill="#A86348"/>
|
|
2003
|
+
<rect x="12" y="41" width="24" height="1" fill="#A86348"/>
|
|
2004
|
+
<rect x="12" y="42" width="24" height="9" fill="#8C4A2F"/>
|
|
2005
|
+
<rect x="12" y="42" width="3" height="9" fill="#A86348"/>
|
|
2006
|
+
<rect x="33" y="42" width="3" height="9" fill="#5A2D14"/>
|
|
2007
|
+
<rect x="15" y="51" width="18" height="3" fill="#5A2D14"/>
|
|
2008
|
+
<rect x="12" y="54" width="24" height="1" fill="rgba(0,0,0,0.35)"/>
|
|
2009
|
+
<rect x="9" y="55" width="30" height="2" fill="rgba(0,0,0,0.35)"/>
|
|
2010
|
+
<rect x="12" y="57" width="24" height="1" fill="rgba(0,0,0,0.25)"/>
|
|
2011
|
+
</symbol>
|
|
2012
|
+
<!-- Snake-plant trio · same pot vocabulary as plant 1. -->
|
|
2013
|
+
<symbol id="vrp-plant-2" viewBox="0 0 48 60" preserveAspectRatio="xMidYMid meet">
|
|
2014
|
+
<rect x="22" y="0" width="4" height="3" fill="#2A4F1D"/>
|
|
2015
|
+
<rect x="20" y="3" width="8" height="29" fill="#2A4F1D"/>
|
|
2016
|
+
<rect x="21" y="3" width="6" height="29" fill="#3D6E2F"/>
|
|
2017
|
+
<rect x="23" y="6" width="2" height="23" fill="#6BAA48"/>
|
|
2018
|
+
<rect x="14" y="6" width="3" height="3" fill="#2A4F1D"/>
|
|
2019
|
+
<rect x="11" y="9" width="8" height="23" fill="#2A4F1D"/>
|
|
2020
|
+
<rect x="12" y="9" width="6" height="23" fill="#3D6E2F"/>
|
|
2021
|
+
<rect x="13" y="12" width="2" height="17" fill="#6BAA48"/>
|
|
2022
|
+
<rect x="31" y="6" width="3" height="3" fill="#2A4F1D"/>
|
|
2023
|
+
<rect x="29" y="9" width="8" height="23" fill="#2A4F1D"/>
|
|
2024
|
+
<rect x="30" y="9" width="6" height="23" fill="#3D6E2F"/>
|
|
2025
|
+
<rect x="33" y="12" width="2" height="17" fill="#6BAA48"/>
|
|
2026
|
+
<rect x="12" y="32" width="24" height="1" fill="#5A2D14"/>
|
|
2027
|
+
<rect x="9" y="33" width="30" height="2" fill="#5A2D14"/>
|
|
2028
|
+
<rect x="12" y="35" width="24" height="3" fill="#3D2418"/>
|
|
2029
|
+
<rect x="9" y="38" width="30" height="3" fill="#A86348"/>
|
|
2030
|
+
<rect x="12" y="41" width="24" height="1" fill="#A86348"/>
|
|
2031
|
+
<rect x="12" y="42" width="24" height="9" fill="#8C4A2F"/>
|
|
2032
|
+
<rect x="12" y="42" width="3" height="9" fill="#A86348"/>
|
|
2033
|
+
<rect x="33" y="42" width="3" height="9" fill="#5A2D14"/>
|
|
2034
|
+
<rect x="15" y="51" width="18" height="3" fill="#5A2D14"/>
|
|
2035
|
+
<rect x="12" y="54" width="24" height="1" fill="rgba(0,0,0,0.35)"/>
|
|
2036
|
+
<rect x="9" y="55" width="30" height="2" fill="rgba(0,0,0,0.35)"/>
|
|
2037
|
+
<rect x="12" y="57" width="24" height="1" fill="rgba(0,0,0,0.25)"/>
|
|
2038
|
+
</symbol>
|
|
2039
|
+
<!-- Boardroom table · 8-bit wood, with mic prop centred. -->
|
|
2040
|
+
<symbol id="vrp-table" viewBox="0 0 100 30" preserveAspectRatio="xMidYMid meet">
|
|
2041
|
+
<ellipse cx="50" cy="27" rx="44" ry="1.5" fill="#000" opacity="0.42"/>
|
|
2042
|
+
<rect fill="#3A2410" x="2" y="3" width="96" height="22" rx="3" ry="3"/>
|
|
2043
|
+
<rect fill="#7A5230" x="4" y="5" width="92" height="18" rx="2" ry="2"/>
|
|
2044
|
+
<rect fill="#B8884E" x="6" y="6" width="88" height="2"/>
|
|
2045
|
+
<rect fill="#5C3A1F" x="10" y="11" width="80" height="1"/>
|
|
2046
|
+
<rect fill="#5C3A1F" x="10" y="15" width="80" height="1"/>
|
|
2047
|
+
<rect fill="#5C3A1F" x="10" y="19" width="80" height="1"/>
|
|
2048
|
+
<rect fill="#4A2E18" x="6" y="20" width="88" height="2"/>
|
|
2049
|
+
<rect fill="#D4B07A" x="4" y="5" width="3" height="2"/>
|
|
2050
|
+
<rect fill="#D4B07A" x="93" y="5" width="3" height="2"/>
|
|
2051
|
+
<!-- Microphone prop · facing the chair seat -->
|
|
2052
|
+
<rect fill="#2A2A2A" x="46" y="20" width="6" height="0.8"/>
|
|
2053
|
+
<rect fill="#4A4A4A" x="48.6" y="14" width="0.8" height="6"/>
|
|
2054
|
+
<rect fill="#1F1F1F" x="46.5" y="11.5" width="5" height="2.8"/>
|
|
2055
|
+
<rect fill="#6A6A6A" x="47" y="12.2" width="4" height="1.5"/>
|
|
2056
|
+
<rect fill="#A8A8A8" x="47.5" y="12.6" width="0.8" height="0.4"/>
|
|
2057
|
+
</symbol>
|
|
2058
|
+
</defs>
|
|
2059
|
+
</svg>
|
|
2060
|
+
|
|
2061
|
+
<div class="voice-room-grid">
|
|
2062
|
+
|
|
2063
|
+
<!-- ─── EASTWOOD · 4 directors · forest green (default) ───
|
|
2064
|
+
Seat positions on a top arc (θ = 202.5° / 247.5° / 292.5° /
|
|
2065
|
+
337.5°) with rx=38, ry=18 — tighter than the live app's
|
|
2066
|
+
rx=42 / ry=23 so chairs anchor to the table edge instead of
|
|
2067
|
+
floating at the stage corners at the preview's 220px scale.
|
|
2068
|
+
Speaking director · seat 2 (Principles). -->
|
|
2069
|
+
<article class="voice-room-preview" data-preview-theme="eastwood"
|
|
2070
|
+
style="--bg:#0A0A0A; --panel:#131312; --panel-2:#1A1A18; --panel-3:#21211E; --lime:#6FB572; --cyan:#6A9B97; --text:#C8C5BE; --text-soft:#8E8B83; --line-bright:#3A3934;">
|
|
2071
|
+
<div class="vrp-stage">
|
|
2072
|
+
<svg class="rt-table" viewBox="0 0 100 30" preserveAspectRatio="xMidYMid meet"><use href="#vrp-table"/></svg>
|
|
2073
|
+
<svg class="rt-plant rt-plant-1" viewBox="0 0 48 60"><use href="#vrp-plant-1"/></svg>
|
|
2074
|
+
<svg class="rt-plant rt-plant-2" viewBox="0 0 48 60"><use href="#vrp-plant-2"/></svg>
|
|
2075
|
+
<div class="rt-seat rt-seat-chair" style="left:50%; top:82%;">
|
|
2076
|
+
<svg class="rt-chair rt-chair--mod" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair-mod"/></svg>
|
|
2077
|
+
<img class="rt-avatar" src="avatars/chair.svg" alt="">
|
|
2078
|
+
<div class="rt-name">CHAIR</div>
|
|
2079
|
+
</div>
|
|
2080
|
+
<div class="rt-seat" style="left:14.89%; top:43.11%;">
|
|
2081
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2082
|
+
<img class="rt-avatar" src="avatars/socrates.svg" alt="">
|
|
2083
|
+
<div class="rt-name">SOCRATES</div>
|
|
2084
|
+
</div>
|
|
2085
|
+
<div class="rt-seat rt-seat-speaking" style="left:35.45%; top:33.37%;">
|
|
2086
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2087
|
+
<img class="rt-avatar" src="avatars/first-principles.svg" alt="">
|
|
2088
|
+
<div class="rt-bubble">Speaking</div>
|
|
2089
|
+
</div>
|
|
2090
|
+
<div class="rt-seat" style="left:64.55%; top:33.37%;">
|
|
2091
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2092
|
+
<img class="rt-avatar" src="avatars/value-investor.svg" alt="">
|
|
2093
|
+
<div class="rt-name">INVESTOR</div>
|
|
2094
|
+
</div>
|
|
2095
|
+
<div class="rt-seat" style="left:85.11%; top:43.11%;">
|
|
2096
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2097
|
+
<img class="rt-avatar" src="avatars/historian.svg" alt="">
|
|
2098
|
+
<div class="rt-name">HISTORIAN</div>
|
|
2099
|
+
</div>
|
|
2100
|
+
</div>
|
|
2101
|
+
<div class="vrp-caption">
|
|
2102
|
+
<span class="vrp-caption-name">Brainstorm</span>
|
|
2103
|
+
<span class="vrp-caption-deck">soil + grass · open ground</span>
|
|
2104
|
+
</div>
|
|
2105
|
+
</article>
|
|
2106
|
+
|
|
2107
|
+
<!-- ─── REGENT · 5 directors · premium gold ───
|
|
2108
|
+
Seats at θ = 198° / 234° / 270° / 306° / 342° (N=5) with
|
|
2109
|
+
rx=38, ry=18 — same tightened ring as Eastwood.
|
|
2110
|
+
Speaking director · seat 4 (Historian on the right). -->
|
|
2111
|
+
<article class="voice-room-preview" data-preview-theme="regent"
|
|
2112
|
+
style="--bg:#0A0A0A; --panel:#131312; --panel-2:#1A1A18; --panel-3:#21211E; --lime:#C9A46B; --cyan:#6A9B97; --text:#C8C5BE; --text-soft:#8E8B83; --line-bright:#3A3934;">
|
|
2113
|
+
<div class="vrp-stage">
|
|
2114
|
+
<svg class="rt-table" viewBox="0 0 100 30" preserveAspectRatio="xMidYMid meet"><use href="#vrp-table"/></svg>
|
|
2115
|
+
<svg class="rt-plant rt-plant-1" viewBox="0 0 48 60"><use href="#vrp-plant-1"/></svg>
|
|
2116
|
+
<svg class="rt-plant rt-plant-2" viewBox="0 0 48 60"><use href="#vrp-plant-2"/></svg>
|
|
2117
|
+
<div class="rt-seat rt-seat-chair" style="left:50%; top:82%;">
|
|
2118
|
+
<svg class="rt-chair rt-chair--mod" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair-mod"/></svg>
|
|
2119
|
+
<img class="rt-avatar" src="avatars/chair.svg" alt="">
|
|
2120
|
+
<div class="rt-name">CHAIR</div>
|
|
2121
|
+
</div>
|
|
2122
|
+
<div class="rt-seat" style="left:13.86%; top:44.44%;">
|
|
2123
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2124
|
+
<img class="rt-avatar" src="avatars/socrates.svg" alt="">
|
|
2125
|
+
<div class="rt-name">SOCRATES</div>
|
|
2126
|
+
</div>
|
|
2127
|
+
<div class="rt-seat" style="left:27.66%; top:35.44%;">
|
|
2128
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2129
|
+
<img class="rt-avatar" src="avatars/first-principles.svg" alt="">
|
|
2130
|
+
<div class="rt-name">PRINCIPLES</div>
|
|
2131
|
+
</div>
|
|
2132
|
+
<div class="rt-seat" style="left:50%; top:32%;">
|
|
2133
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2134
|
+
<img class="rt-avatar" src="avatars/value-investor.svg" alt="">
|
|
2135
|
+
<div class="rt-name">INVESTOR</div>
|
|
2136
|
+
</div>
|
|
2137
|
+
<div class="rt-seat rt-seat-speaking" style="left:72.34%; top:35.44%;">
|
|
2138
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2139
|
+
<img class="rt-avatar" src="avatars/historian.svg" alt="">
|
|
2140
|
+
<div class="rt-bubble">Speaking</div>
|
|
2141
|
+
</div>
|
|
2142
|
+
<div class="rt-seat" style="left:86.14%; top:44.44%;">
|
|
2143
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2144
|
+
<img class="rt-avatar" src="avatars/long-horizon.svg" alt="">
|
|
2145
|
+
<div class="rt-name">HORIZON</div>
|
|
2146
|
+
</div>
|
|
2147
|
+
</div>
|
|
2148
|
+
<div class="vrp-caption">
|
|
2149
|
+
<span class="vrp-caption-name">Constructive</span>
|
|
2150
|
+
<span class="vrp-caption-deck">graphite marble · executive</span>
|
|
2151
|
+
</div>
|
|
2152
|
+
</article>
|
|
2153
|
+
|
|
2154
|
+
<!-- ─── ATRIUM · 3 directors · warm paper · the only light theme ───
|
|
2155
|
+
Seats at θ = 210° / 270° / 330° (N=3, canonical) with
|
|
2156
|
+
rx=38, ry=18. Speaking director · seat 2 (Principles top center). -->
|
|
2157
|
+
<article class="voice-room-preview" data-preview-theme="atrium"
|
|
2158
|
+
style="--bg:#FBFBF7; --panel:#F4F2EC; --panel-2:#EAE7DD; --panel-3:#DBD7CA; --lime:#2E7D32; --cyan:#2E7D7A; --text:#1F1E1A; --text-soft:#4A4842; --line-bright:#D2CDB9;">
|
|
2159
|
+
<div class="vrp-stage">
|
|
2160
|
+
<svg class="rt-table" viewBox="0 0 100 30" preserveAspectRatio="xMidYMid meet"><use href="#vrp-table"/></svg>
|
|
2161
|
+
<svg class="rt-plant rt-plant-1" viewBox="0 0 48 60"><use href="#vrp-plant-1"/></svg>
|
|
2162
|
+
<svg class="rt-plant rt-plant-2" viewBox="0 0 48 60"><use href="#vrp-plant-2"/></svg>
|
|
2163
|
+
<div class="rt-seat rt-seat-chair" style="left:50%; top:82%;">
|
|
2164
|
+
<svg class="rt-chair rt-chair--mod" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair-mod"/></svg>
|
|
2165
|
+
<img class="rt-avatar" src="avatars/chair.svg" alt="">
|
|
2166
|
+
<div class="rt-name">CHAIR</div>
|
|
2167
|
+
</div>
|
|
2168
|
+
<div class="rt-seat" style="left:17.09%; top:41%;">
|
|
2169
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2170
|
+
<img class="rt-avatar" src="avatars/socrates.svg" alt="">
|
|
2171
|
+
<div class="rt-name">SOCRATES</div>
|
|
2172
|
+
</div>
|
|
2173
|
+
<div class="rt-seat rt-seat-speaking" style="left:50%; top:32%;">
|
|
2174
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2175
|
+
<img class="rt-avatar" src="avatars/first-principles.svg" alt="">
|
|
2176
|
+
<div class="rt-bubble">Speaking</div>
|
|
2177
|
+
</div>
|
|
2178
|
+
<div class="rt-seat" style="left:82.91%; top:41%;">
|
|
2179
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2180
|
+
<img class="rt-avatar" src="avatars/value-investor.svg" alt="">
|
|
2181
|
+
<div class="rt-name">INVESTOR</div>
|
|
2182
|
+
</div>
|
|
2183
|
+
</div>
|
|
2184
|
+
<div class="vrp-caption">
|
|
2185
|
+
<span class="vrp-caption-name">Research</span>
|
|
2186
|
+
<span class="vrp-caption-deck">light marble · scholarly</span>
|
|
2187
|
+
</div>
|
|
2188
|
+
</article>
|
|
2189
|
+
|
|
2190
|
+
<!-- ─── NINTENDO · 4 directors · 8-bit NES palette · Mario red ───
|
|
2191
|
+
Seats at θ = 202.5° / 247.5° / 292.5° / 337.5° (N=4) with
|
|
2192
|
+
rx=38, ry=18. Speaking director · seat 1 (Socrates far left). -->
|
|
2193
|
+
<article class="voice-room-preview" data-preview-theme="nintendo"
|
|
2194
|
+
style="--bg:#181820; --panel:#22222C; --panel-2:#2A2A38; --panel-3:#34344A; --lime:#E60012; --cyan:#5BC0EB; --text:#FCFCFC; --text-soft:#C8C8D8; --line-bright:#44445A;">
|
|
2195
|
+
<div class="vrp-stage">
|
|
2196
|
+
<svg class="rt-table" viewBox="0 0 100 30" preserveAspectRatio="xMidYMid meet"><use href="#vrp-table"/></svg>
|
|
2197
|
+
<svg class="rt-plant rt-plant-1" viewBox="0 0 48 60"><use href="#vrp-plant-1"/></svg>
|
|
2198
|
+
<svg class="rt-plant rt-plant-2" viewBox="0 0 48 60"><use href="#vrp-plant-2"/></svg>
|
|
2199
|
+
<div class="rt-seat rt-seat-chair" style="left:50%; top:82%;">
|
|
2200
|
+
<svg class="rt-chair rt-chair--mod" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair-mod"/></svg>
|
|
2201
|
+
<img class="rt-avatar" src="avatars/chair.svg" alt="">
|
|
2202
|
+
<div class="rt-name">CHAIR</div>
|
|
2203
|
+
</div>
|
|
2204
|
+
<div class="rt-seat rt-seat-speaking" style="left:14.89%; top:43.11%;">
|
|
2205
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2206
|
+
<img class="rt-avatar" src="avatars/socrates.svg" alt="">
|
|
2207
|
+
<div class="rt-bubble">Speaking</div>
|
|
2208
|
+
</div>
|
|
2209
|
+
<div class="rt-seat" style="left:35.45%; top:33.37%;">
|
|
2210
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2211
|
+
<img class="rt-avatar" src="avatars/first-principles.svg" alt="">
|
|
2212
|
+
<div class="rt-name">PRINCIPLES</div>
|
|
2213
|
+
</div>
|
|
2214
|
+
<div class="rt-seat" style="left:64.55%; top:33.37%;">
|
|
2215
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2216
|
+
<img class="rt-avatar" src="avatars/value-investor.svg" alt="">
|
|
2217
|
+
<div class="rt-name">INVESTOR</div>
|
|
2218
|
+
</div>
|
|
2219
|
+
<div class="rt-seat" style="left:85.11%; top:43.11%;">
|
|
2220
|
+
<svg class="rt-chair" viewBox="0 0 32 40" preserveAspectRatio="xMidYMid meet"><use href="#vrp-chair"/></svg>
|
|
2221
|
+
<img class="rt-avatar" src="avatars/phenomenologist.svg" alt="">
|
|
2222
|
+
<div class="rt-name">PHENOM</div>
|
|
2223
|
+
</div>
|
|
2224
|
+
</div>
|
|
2225
|
+
<div class="vrp-caption">
|
|
2226
|
+
<span class="vrp-caption-name">Critique</span>
|
|
2227
|
+
<span class="vrp-caption-deck">burgundy carpet · formal</span>
|
|
2228
|
+
</div>
|
|
2229
|
+
</article>
|
|
2230
|
+
|
|
2231
|
+
</div>
|
|
2232
|
+
</section>
|
|
2233
|
+
|
|
1632
2234
|
<!-- ─────────── THE CAST · standing six + your own ─────────── -->
|
|
1633
2235
|
<section class="section bracketed" id="cast">
|
|
1634
2236
|
<div class="section-head">
|
|
@@ -1647,36 +2249,42 @@
|
|
|
1647
2249
|
<div class="bento-director-tag">// skeptic</div>
|
|
1648
2250
|
<div class="bento-director-name">Socrates</div>
|
|
1649
2251
|
<div class="bento-director-desc">Three layers deep on every assumption.</div>
|
|
2252
|
+
<div class="bento-director-model">claude-opus-4.7</div>
|
|
1650
2253
|
</div>
|
|
1651
2254
|
<div class="bento-cell bento-director" data-agent="first-principles">
|
|
1652
2255
|
<img class="bento-director-img" src="avatars/first-principles.svg" alt="First Principles">
|
|
1653
2256
|
<div class="bento-director-tag">// physicist</div>
|
|
1654
2257
|
<div class="bento-director-name">First Principles</div>
|
|
1655
2258
|
<div class="bento-director-desc">Strips problems to their primitives.</div>
|
|
2259
|
+
<div class="bento-director-model">gpt-5.5-pro</div>
|
|
1656
2260
|
</div>
|
|
1657
2261
|
<div class="bento-cell bento-director" data-agent="value-investor">
|
|
1658
2262
|
<img class="bento-director-img" src="avatars/value-investor.svg" alt="Value Investor">
|
|
1659
2263
|
<div class="bento-director-tag">// patterns</div>
|
|
1660
2264
|
<div class="bento-director-name">Value Investor</div>
|
|
1661
2265
|
<div class="bento-director-desc">Reads every judgment through a ten-year lens.</div>
|
|
2266
|
+
<div class="bento-director-model">gemini-3.1-pro</div>
|
|
1662
2267
|
</div>
|
|
1663
2268
|
<div class="bento-cell bento-director" data-agent="user-empathy">
|
|
1664
2269
|
<img class="bento-director-img" src="avatars/user-empathy.svg" alt="User-Empathy">
|
|
1665
2270
|
<div class="bento-director-tag">// advocate</div>
|
|
1666
2271
|
<div class="bento-director-name">User-Empathy</div>
|
|
1667
2272
|
<div class="bento-director-desc">Asks why anyone would actually use this.</div>
|
|
2273
|
+
<div class="bento-director-model">grok-4.3</div>
|
|
1668
2274
|
</div>
|
|
1669
2275
|
<div class="bento-cell bento-director" data-agent="long-horizon">
|
|
1670
2276
|
<img class="bento-director-img" src="avatars/long-horizon.svg" alt="Long Horizon">
|
|
1671
2277
|
<div class="bento-director-tag">// strategist</div>
|
|
1672
2278
|
<div class="bento-director-name">Long Horizon</div>
|
|
1673
2279
|
<div class="bento-director-desc">Reads everything on a hundred-year scale.</div>
|
|
2280
|
+
<div class="bento-director-model">deepseek-v4-pro</div>
|
|
1674
2281
|
</div>
|
|
1675
2282
|
<div class="bento-cell bento-director" data-agent="phenomenologist">
|
|
1676
2283
|
<img class="bento-director-img" src="avatars/phenomenologist.svg" alt="Phenomenologist">
|
|
1677
2284
|
<div class="bento-director-tag">// observer</div>
|
|
1678
2285
|
<div class="bento-director-name">Phenomenologist</div>
|
|
1679
2286
|
<div class="bento-director-desc">Begins from experience itself.</div>
|
|
2287
|
+
<div class="bento-director-model">claude-opus-4.7</div>
|
|
1680
2288
|
</div>
|
|
1681
2289
|
</div>
|
|
1682
2290
|
|