1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<title>Principle benchmark â human edition</title> 7<style> 8body { font-family: 'Segoe UI', Arial, sans-serif; max-width: 60rem; margin: 2rem auto; 9 padding: 0 1rem; color: #222; background: #fafafa; line-height: 1.6; } 10h1, h2 { line-height: 1.2; color: #111; } 11h1 { font-size: 1.5rem; } 12h2 { font-size: 1.2rem; margin-top: 2rem; } 13.note { color: #52514e; } 14.progress { color: #52514e; font-size: 0.9rem; } 15 16/* Intro page, in the yuwakisa house style */ 17.intro-header { text-align: center; margin: 3rem 0 2.5rem; } 18.intro-header .logo { width: 110px; height: auto; margin-bottom: 1.2rem; } 19.intro-title { font-size: 2.2rem; font-weight: 700; letter-spacing: 0.02em; 20 margin: 0 0 0.6rem; } 21.intro-tagline { font-size: 1.1rem; color: #444; max-width: 40rem; 22 margin: 0 auto; line-height: 1.5; } 23.steps { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin: 2.5rem 0; } 24.step { background: white; border-left: 4px solid transparent; 25 border-image: linear-gradient(180deg, #32CD32, #00BFFF) 1; 26 border-radius: 4px; padding: 1.3rem 1.6rem; 27 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } 28.step h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.3rem; color: #111; } 29.step p { font-size: 0.95rem; color: #555; line-height: 1.55; margin: 0; } 30.intro-note { text-align: center; font-style: italic; color: #555; 31 max-width: 40rem; margin: 0 auto 2.5rem; } 32.intro-meaning { text-align: center; color: #333; font-size: 1.05rem; 33 max-width: 42rem; margin: 0 auto 2.5rem; line-height: 1.6; } 34.intro-actions { display: flex; justify-content: center; gap: 0.8rem; 35 margin-bottom: 3rem; } 36.intro-actions button.primary { 37 background-image: linear-gradient(45deg, #32CD32, #00BFFF); 38 border: none; color: white; font-size: 1rem; padding: 0.7rem 1.8rem; 39 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } 40.intro-actions button.primary:hover { 41 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } 42@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr 1fr; } } 43 44/* Results page, in the same house style */ 45.results-header { text-align: center; margin: 2rem 0 1.5rem; } 46.results-header .logo { width: 80px; height: auto; margin-bottom: 0.8rem; } 47.results-header h1 { font-size: 2rem; font-weight: 700; letter-spacing: 0.02em; 48 margin: 0; } 49#app.results button.primary { 50 background-image: linear-gradient(45deg, #32CD32, #00BFFF); 51 border: none; color: white; font-size: 1rem; padding: 0.7rem 1.8rem; 52 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } 53#app.results button.primary:hover { 54 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } 55 56ol.statements { padding-left: 1.5rem; } 57ol.statements li { margin: 0.35rem 0; } 58 59textarea { width: 100%; box-sizing: border-box; min-height: 6rem; padding: 0.6rem; 60 font: inherit; border: 1px solid #c9c8c3; border-radius: 6px; background: #fff; } 61.charcount { text-align: right; font-size: 0.85rem; color: #52514e; } 62.charcount.over { color: #b3261e; font-weight: 600; } 63 64button { font: inherit; padding: 0.5rem 1.2rem; border: 1px solid #c9c8c3; 65 border-radius: 6px; background: #fff; cursor: pointer; } 66button.primary { background: #1a1a18; color: #fff; border-color: #1a1a18; } 67button:disabled { opacity: 0.4; cursor: default; } 68.actions { margin: 1.5rem 0; display: flex; gap: 0.8rem; align-items: center; } 69 70.principle-box { background: #f1f0ec; border: 1px solid #e5e4e0; border-radius: 6px; 71 padding: 0.8rem 1rem; margin: 1rem 0; white-space: pre-wrap; } 72 73/* Classify phase: header + principle stay put, statements scroll in their own box */ 74#app.classify { display: flex; flex-direction: column; 75 height: calc(100vh - 4rem); } 76#app.classify h1 { margin: 0.3rem 0; } 77#app.classify p { margin: 0.3rem 0; } 78.scrollbox { flex: 1 1 auto; min-height: 10rem; overflow-y: auto; 79 margin: 0.8rem 0; padding: 0.2rem 1rem; 80 background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; 81 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } 82.scrollbox .checklist { margin: 0.5rem 0; } 83.scrollbox .actions { margin: 1rem 0 1.2rem; } 84 85.checklist { list-style: none; padding: 0; margin: 1rem 0; } 86.checklist li { margin: 0; border-bottom: 1px solid #eeede9; } 87.checklist label { display: flex; gap: 0.7rem; padding: 0.45rem 0.3rem; cursor: pointer; } 88.checklist label:hover { background: #f4f3ef; } 89.checklist input { margin-top: 0.3rem; flex: none; } 90.checklist .stmt-num { color: #8a8985; min-width: 1.8rem; text-align: right; 91 font-variant-numeric: tabular-nums; flex: none; } 92 93table { border-collapse: collapse; width: 100%; margin: 1rem 0; } 94th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #e5e4e0; 95 vertical-align: top; } 96th { color: #52514e; font-weight: 600; } 97td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } 98tr.mean-row td { font-weight: 600; border-top: 2px solid #c9c8c3; } 99tr.you-row td { font-weight: 600; } 100 101.detail-table td.principles { width: 40%; } 102.detail-table .plabel { font-weight: 600; color: #52514e; font-size: 0.85rem; 103 text-transform: uppercase; letter-spacing: 0.03em; } 104.detail-table .ptext { margin: 0.15rem 0 0.9rem; } 105.errcell { display: block; border-radius: 5px; padding: 0.35rem 0.6rem; margin: 0.3rem 0; 106 font-size: 0.92rem; } 107.errcell.fp { background: #fbe3e1; border: 1px solid #e8b6b2; } 108.errcell.fn { background: #e2f0e0; border: 1px solid #b7d5b3; } 109.errcell .tag { font-weight: 600; font-size: 0.78rem; text-transform: uppercase; 110 letter-spacing: 0.03em; margin-right: 0.5rem; } 111.errcell.fp .tag { color: #8f221c; } 112.errcell.fn .tag { color: #2c5e28; } 113.all-correct { color: #2c5e28; font-weight: 600; } 114 115.legend { font-size: 0.9rem; color: #52514e; margin: 0.5rem 0 1rem; } 116.legend .swatch { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; 117 vertical-align: -0.1rem; margin: 0 0.3rem 0 0.9rem; } 118.legend .swatch.fp { background: #fbe3e1; border: 1px solid #e8b6b2; } 119.legend .swatch.fn { background: #e2f0e0; border: 1px solid #b7d5b3; } 120</style> 121</head> 122<body> 123<div id="app"></div>
124<script src="suites.js"></script>
vendor: 1 bytes, line 124
124
125<script src="app.js"></script>
125 126<!-- Cloudflare Pages Analytics -->
vendor: 99 bytes, line 126
126<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "
12615913b22567547f6bd20d495fcb71b4c
vendor: 13 bytes, line 126
126"}'></script>
126<!-- Cloudflare Pages Analytics --></body> 127</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.