/* Shared styles for SAFE TOOLS pages.
*
* Layer 1 — design tokens. Every tool reads its surfaces, ink and geometry
* from here. Its accent comes from (the
* same category as data/tools.json); pages never set --accent.
* Layer 2 — primitives (st-* classes) and the shared page chrome.
* Layer 3 — components that must look identical everywhere (compare slider).
*
* Tools still on the old palette are unaffected: nothing below applies until
* a page actually references a token or an st-* class.
*/
/* ==========================================================================
Layer 1 — tokens
========================================================================== */
:root {
/* ground / surface — neutrals biased very slightly cool, never pure grey */
--bg: #F7F8F9;
--panel: #FFFFFF;
--panel-2: #F1F3F5;
--rule: #E3E7EA;
--rule-strong: #C6CCD1;
--ink: #15191D;
--ink-2: #5C666E;
--ink-3: #8C949B;
/* canvas — the user's own content sits here, and it stays dark in both
themes so the artwork is always the brightest thing on screen */
--canvas: #0F1315;
--canvas-2: #161A1D;
--canvas-rule: #242A2E;
--canvas-ink: #E6E9EB;
--canvas-ink-2: #7C868D;
/* checkerboard behind transparent images (compare slider, previews) */
--check-bg: #FFFFFF;
--check-fg: #E2E8F0;
/* semantic — deliberately separate from --accent; never mix the two */
--ok: #0E9F6E;
--warn: #B45309;
--err: #DC2626;
/* geometry & depth — one shadow step only; hierarchy comes from hairlines */
--r-1: 6px;
--r-2: 10px;
--shadow-1: 0 1px 2px rgb(15 25 35 / .06), 0 8px 24px rgb(15 25 35 / .05);
/* type */
--font-ui: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* pulse — tk.st drives every animation off this single variable, so the
tools breathe at the same rate as the terminal on the front page */
--bpm: 60;
--beat: calc(60s / var(--bpm));
/* accent — a tool points these three at its category with
(rules right after this block) */
--accent: var(--cat-converter);
--accent-ink: var(--cat-converter-ink);
--accent-soft: var(--cat-converter-soft);
/* category accents — a tool's colour says what it does, not which tool it
is. Four cool hues in hue order (optimizer → converter → editor →
generator) so the family reads as one ramp. Deliberately clear of
--ok / --warn / --err above: a category must never look like a state. */
--cat-optimizer: #0369A1;
--cat-optimizer-ink: #FFFFFF;
--cat-optimizer-soft: #E6F1FA;
--cat-converter: #0F766E;
--cat-converter-ink: #FFFFFF;
--cat-converter-soft: #E3F2F0;
--cat-editor: #4F46E5;
--cat-editor-ink: #FFFFFF;
--cat-editor-soft: #EEF0FE;
--cat-generator: #C026D3;
--cat-generator-ink: #FFFFFF;
--cat-generator-soft: #FAE8FF;
}
/* A tool page () and its card on the index wear the
colour of their category — the same value data/tools.json gives them. */
[data-category="optimizer"] { --accent: var(--cat-optimizer); --accent-ink: var(--cat-optimizer-ink); --accent-soft: var(--cat-optimizer-soft); }
[data-category="converter"] { --accent: var(--cat-converter); --accent-ink: var(--cat-converter-ink); --accent-soft: var(--cat-converter-soft); }
[data-category="editor"] { --accent: var(--cat-editor); --accent-ink: var(--cat-editor-ink); --accent-soft: var(--cat-editor-soft); }
[data-category="generator"] { --accent: var(--cat-generator); --accent-ink: var(--cat-generator-ink); --accent-soft: var(--cat-generator-soft); }
/* Dark: redefine tokens only. Components never name a colour directly, so
they follow automatically. The :not() guard lets an explicit light choice
win over a dark OS setting.
Both blocks require .st-theme on : tools still running their old
hard-coded light palette must not have half their surfaces flip to dark. */
@media (prefers-color-scheme: dark) {
:root.st-theme:not([data-theme="light"]) {
--bg: #0F1317;
--panel: #171C21;
--panel-2: #1D2329;
--rule: #2A3138;
--rule-strong: #3A434B;
--ink: #E5E9ED;
--ink-2: #98A2AB;
--ink-3: #6D777F;
--check-bg: #14181B;
--check-fg: #23292E;
--shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .3);
/* category accents — same four hues, lifted for a dark ground. */
--cat-optimizer: #38BDF8;
--cat-optimizer-ink: #06283A;
--cat-optimizer-soft: #0D2534;
--cat-converter: #2DD4BF;
--cat-converter-ink: #052E2B;
--cat-converter-soft: #0C2A28;
--cat-editor: #818CF8;
--cat-editor-ink: #14153A;
--cat-editor-soft: #1A1B36;
--cat-generator: #E879F9;
--cat-generator-ink: #2A0D31;
--cat-generator-soft: #33143A;
}
}
:root.st-theme[data-theme="dark"] {
--bg: #0F1317;
--panel: #171C21;
--panel-2: #1D2329;
--rule: #2A3138;
--rule-strong: #3A434B;
--ink: #E5E9ED;
--ink-2: #98A2AB;
--ink-3: #6D777F;
--check-bg: #14181B;
--check-fg: #23292E;
--shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .3);
/* category accents — same four hues, lifted for a dark ground. */
--cat-optimizer: #38BDF8;
--cat-optimizer-ink: #06283A;
--cat-optimizer-soft: #0D2534;
--cat-converter: #2DD4BF;
--cat-converter-ink: #052E2B;
--cat-converter-soft: #0C2A28;
--cat-editor: #818CF8;
--cat-editor-ink: #14153A;
--cat-editor-soft: #1A1B36;
--cat-generator: #E879F9;
--cat-generator-ink: #2A0D31;
--cat-generator-soft: #33143A;
}
/* ==========================================================================
Layer 2 — primitives
========================================================================== */
/* Uppercase mono label used for every control caption and status field. */
.st-lbl {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
/* Primary action. Depth is position, not shadow — it sinks 2px when pressed. */
.st-btn {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
border: 1px solid transparent;
border-radius: var(--r-1);
background: var(--accent);
color: var(--accent-ink);
padding: 10px 18px;
cursor: pointer;
transition: background 120ms ease, transform 60ms ease;
}
.st-btn:hover:not(:disabled) { filter: brightness(1.06); }
.st-btn:active:not(:disabled) { transform: translateY(2px); }
.st-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Quiet secondary action — hairline box, accent only on hover. */
.st-btn-quiet {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
border: 1px solid var(--rule);
border-radius: var(--r-1);
background: var(--panel);
color: var(--ink-2);
padding: 8px 14px;
cursor: pointer;
transition: border-color 120ms ease, color 120ms ease, transform 60ms ease;
}
.st-btn-quiet:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.st-btn-quiet:active:not(:disabled) { transform: translateY(2px); }
/* Segmented control: one row of exclusive options, accent marks the live one. */
.st-seg { display: flex; border: 1px solid var(--rule); border-radius: var(--r-1); overflow: hidden; }
.st-seg > * {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
padding: 5px 11px;
background: var(--panel);
color: var(--ink-2);
border: 0;
border-left: 1px solid var(--rule);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.st-seg > *:first-child { border-left: 0; }
.st-seg > *:hover:not(.active):not(:disabled) { background: var(--panel-2); color: var(--ink); }
.st-seg > *.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
/* Terminal caret and status LED, both on the shared pulse. */
.st-caret {
display: inline-block;
width: 7px;
height: 13px;
background: var(--accent);
vertical-align: -2px;
animation: st-blink var(--beat) step-end infinite;
}
.st-led {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
flex: none;
animation: st-pulse var(--beat) ease-in-out infinite;
}
.st-led.idle { background: var(--ink-3); animation: none; }
.st-led.err { background: var(--err); animation: none; }
@keyframes st-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes st-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
/* Focus is always visible and always the accent. */
.st-btn:focus-visible,
.st-btn-quiet:focus-visible,
.st-seg > *:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Anyone who asked for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
.st-caret, .st-led { animation: none !important; }
}
/* ==========================================================================
Layer 2b — page chrome
The Instrument shell every migrated tool wears: app bar, toolbar, dropzone,
console, gauge, status bar, toast. Scoped to .st-theme so a page that has
not been migrated yet never picks any of it up.
Tools override only what is genuinely theirs (canvas treatment, controls).
========================================================================== */
.st-theme,
.st-theme body {
min-height: 100%;
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
.st-theme body { display: flex; flex-direction: column; min-height: 100vh; }
.st-theme *, .st-theme *::before, .st-theme *::after { box-sizing: border-box; }
.st-theme h1, .st-theme h2, .st-theme h3, .st-theme h4 { margin: 0; letter-spacing: -0.02em; }
.st-theme .hidden,
.st-theme [hidden] { display: none !important; }
.st-theme .num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.st-theme .fade-in { animation: st-fade-in 220ms ease both; }
@keyframes st-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* ---- app bar ---- */
/* One desktop width for the index and every tool, so moving between them
never shifts the frame. Pages do not override it: the bars, main, the
safety card, the FAQ and the footer all line up on this measure. */
.st-theme { --bar-h: 52px; --shell: 1200px; }
.st-theme .app-bar {
background: var(--panel);
border-bottom: 1px solid var(--rule);
position: sticky;
top: 0;
z-index: 30;
}
.st-theme .bar-in {
max-width: var(--shell);
margin: 0 auto;
padding: 0 20px;
height: var(--bar-h);
display: flex;
align-items: center;
gap: 12px;
}
/* Breadcrumb. One element says where you are and how to get back up, in the
same shape on every page — the app bar used to carry a back link, a centred
title and a path line, which is three answers to the same question.
The trail mirrors the BreadcrumbList in each page's JSON-LD level for level.
Only the root's label differs on purpose: the bar shows the domain "tk.st",
while the structured data names the person, "Shinya Takeda". */
.st-theme .crumb { min-width: 0; }
/* The tool's own mark, sitting at the end of the trail. Its image is read from
the page's at runtime rather than pasted in again, so the
bar and the browser tab can never end up showing different icons. */
.st-theme .crumb-mark {
width: 18px;
height: 18px;
border-radius: 4px;
flex: none;
background: center / contain no-repeat;
}
.st-theme .crumb ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: baseline;
gap: 9px;
min-width: 0;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
white-space: nowrap;
}
.st-theme .crumb li { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.st-theme .crumb li + li::before { content: "/"; color: var(--rule-strong); }
.st-theme .crumb a {
color: var(--ink-3);
text-decoration: none;
transition: color 120ms ease;
}
.st-theme .crumb a:hover { color: var(--accent); }
.st-theme .crumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* The current page doubles as the page title, so its h1 carries the UI face and
the weight. 中のリンクはクエリや # の付かない自分の URL へ飛び、ツールを白紙から
やり直す入口になる（作業中なら tools-ui.js が確かめてから進む）。 */
.st-theme .crumb h1 {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.st-theme .crumb [aria-current="page"] { color: var(--ink); }
.st-theme .crumb [aria-current="page"]:hover { color: var(--accent); }
/* SAFE TOOLS keeps the same mono breadcrumb face whether it is the current
listing page or the parent link on a tool detail page. */
.st-theme .crumb li .crumb-section {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
}
/* On a narrow screen the trail keeps its immediate parent and drops the root
rather than collapsing into a bare back arrow. ルート表記が「⌂ Shinya Takeda」に
伸びたぶん、畳む幅を広めに取ってページ名が潰れないようにしている。 */
@media (max-width: 820px) {
.st-theme .crumb .crumb-root { display: none; }
.st-theme .crumb .crumb-root + li::before { content: none; }
}
.st-theme .bar-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.st-theme .icon-btn {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--rule);
border-radius: var(--r-1);
background: var(--panel);
color: var(--ink-2);
cursor: pointer;
flex: none;
transition: border-color 120ms ease, color 120ms ease, transform 60ms ease;
}
.st-theme .icon-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.st-theme .icon-btn:active:not(:disabled) { transform: translateY(2px); }
.st-theme .icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.st-theme .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The toggle shows the theme it switches *to*, in all three theme states. */
.st-theme #theme-toggle .to-dark { display: inline-flex; }
.st-theme #theme-toggle .to-light { display: none; }
.st-theme[data-theme="dark"] #theme-toggle .to-dark { display: none; }
.st-theme[data-theme="dark"] #theme-toggle .to-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
.st-theme:not([data-theme="light"]) #theme-toggle .to-dark { display: none; }
.st-theme:not([data-theme="light"]) #theme-toggle .to-light { display: inline-flex; }
}
/* ---- toolbar ---- */
.st-theme .toolbar {
background: var(--panel);
border-bottom: 1px solid var(--rule);
position: sticky;
top: var(--bar-h);
z-index: 25;
}
.st-theme .tb-in {
max-width: var(--shell);
margin: 0 auto;
padding: 9px 20px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.st-theme .tb-group { display: flex; align-items: center; gap: 9px; }
.st-theme .tb-sep { width: 1px; align-self: stretch; background: var(--rule); }
@media (max-width: 780px) { .st-theme .tb-sep { display: none; } }
.st-theme .tb-val {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
color: var(--accent);
min-width: 12px;
text-align: right;
}
.st-theme .tb-group.disabled,
.st-theme .quality-disabled { opacity: 0.4; pointer-events: none; }
/* Inputs inside the toolbar */
.st-theme input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 2px;
background: var(--rule-strong);
outline: none;
cursor: pointer;
}
.st-theme input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
border: 2px solid var(--panel);
cursor: pointer;
}
.st-theme input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
border: 2px solid var(--panel);
border-radius: 50%;
background: var(--accent);
cursor: pointer;
}
.st-theme input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.st-theme .tb-input,
.st-theme .tb-select {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 12px;
font-weight: 700;
padding: 4px 8px;
border: 1px solid var(--rule);
border-radius: var(--r-1);
background: var(--panel);
color: var(--ink);
}
.st-theme .tb-input { text-align: right; }
.st-theme .tb-select { cursor: pointer; padding-right: 22px; appearance: none;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 10px center, right 6px center;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
}
.st-theme .tb-input:focus,
.st-theme .tb-select:focus { outline: none; border-color: var(--accent); }
.st-theme .unit { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
/* Checkbox that reads as a control, not a browser default */
.st-theme .tb-check {
appearance: none;
width: 15px;
height: 15px;
border: 1px solid var(--rule-strong);
border-radius: 3px;
background: var(--panel);
cursor: pointer;
position: relative;
flex: none;
}
.st-theme .tb-check:checked { background: var(--accent); border-color: var(--accent); }
.st-theme .tb-check:checked::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid var(--accent-ink);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.st-theme .tb-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- shell ---- */
.st-theme main {
flex: 1;
width: 100%;
max-width: var(--shell);
margin: 0 auto;
padding: 28px 20px 48px;
}
/* ---- dropzone ---- */
.st-theme .dropzone {
border: 1px dashed var(--rule-strong);
border-radius: var(--r-1);
background: var(--panel);
padding: 52px 20px;
text-align: center;
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease;
}
.st-theme .dropzone:hover { border-color: var(--accent); }
.st-theme .dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-theme .dropzone.dragover {
border-style: solid;
border-color: var(--accent);
background: var(--accent-soft);
}
.st-theme .dz-in { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.st-theme .dz-mark {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--rule-strong);
border-radius: var(--r-1);
color: var(--ink-2);
font-family: var(--font-mono);
font-size: 17px;
line-height: 1;
background: var(--bg);
}
.st-theme .dropzone.dragover .dz-mark { border-color: var(--accent); color: var(--accent); background: var(--panel); }
.st-theme .dz-in b { font-size: 15px; font-weight: 700; }
.st-theme .dz-sub { font-size: 12.5px; color: var(--ink-3); }
.st-theme .note {
margin: 14px 0 0;
font-size: 12px;
color: var(--ink-3);
display: flex;
align-items: center;
gap: 8px;
}
.st-theme .note::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
flex: none;
}
.st-theme .note.warn::before { background: var(--warn); }
/* ---- console ---- */
.st-theme .console {
background: var(--canvas);
border: 1px solid var(--canvas-rule);
border-radius: var(--r-1);
padding: 13px 15px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.85;
color: var(--canvas-ink-2);
overflow-x: auto;
overflow-wrap: anywhere;
}
.st-theme #view-loading .console { max-height: 260px; overflow-y: auto; }
.st-theme .cl { white-space: pre-wrap; }
.st-theme .cl.hi { color: var(--canvas-ink); }
.st-theme .cl.ok { color: var(--accent); }
.st-theme .cl.err { color: #F87171; }
.st-theme .cl .dim { color: #59636A; }
.st-theme .console .st-caret { height: 12px; }
.st-theme .pbar {
height: 4px;
border-radius: 2px;
background: var(--rule);
overflow: hidden;
margin-top: 14px;
}
.st-theme .pbar > div {
height: 100%;
width: 0%;
background: var(--accent);
transition: width 200ms ease-out;
}
.st-theme .pbar > div.indeterminate {
width: 40% !important;
animation: st-indeterminate 1.4s ease-in-out infinite;
}
@keyframes st-indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(250%); }
}
.st-theme .pmeta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 7px;
}
.st-theme .pmeta .num { font-size: 11px; color: var(--ink-2); }
/* ---- readout / gauge ---- */
.st-theme .readout {
border: 1px solid var(--rule);
border-radius: var(--r-1);
background: var(--panel);
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.st-theme .gauge { display: flex; align-items: flex-end; gap: 14px; }
/* The payoff: the biggest thing on the page is the user's own number. */
.st-theme .gauge-num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(44px, 12vw, 64px);
font-weight: 700;
line-height: 0.85;
letter-spacing: -0.05em;
color: var(--accent);
}
.st-theme .gauge-num.negative { color: var(--warn); }
.st-theme .gauge-cap {
display: flex;
flex-direction: column;
gap: 1px;
padding-bottom: 3px;
margin-left: auto;
text-align: right;
}
.st-theme .gauge-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.st-theme .bars { display: flex; flex-direction: column; gap: 7px; }
.st-theme .barrow { display: flex; align-items: center; gap: 10px; }
.st-theme .barrow .st-lbl { width: 78px; flex: none; }
.st-theme .bar {
flex: 1;
height: 9px;
border-radius: 2px;
background: var(--panel-2);
overflow: hidden;
}
.st-theme .bar i { display: block; height: 100%; border-radius: 2px; }
.st-theme .bar i.before { background: var(--rule-strong); width: 100%; }
.st-theme .bar i.after { background: var(--accent); width: 0%; transition: width 550ms cubic-bezier(.2,.7,.3,1); }
.st-theme .barrow .num { font-size: 11.5px; color: var(--ink); min-width: 72px; text-align: right; }
@keyframes st-value-pop {
0% { transform: scale(1); }
45% { transform: scale(1.06); }
100% { transform: scale(1); }
}
.st-theme .value-pop { animation: st-value-pop 240ms ease; transform-origin: left center; }
/* ---- panel ---- */
.st-theme .panel {
border: 1px solid var(--rule);
border-radius: var(--r-1);
background: var(--panel);
}
.st-theme .panel-head {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-bottom: 1px solid var(--rule);
}
.st-theme .panel-head .name {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 55%;
}
.st-theme .panel-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
/* ---- safety proof ----
The summary keeps all five promises visible at a glance. The disclosure
underneath explains what each promise means on this exact page, including
the CSP check, without making readers understand response headers first. */
/* Sits right under the tool: after , or inside it just before the
explanatory prose when the page keeps that prose in . */
.st-theme .safety-proof {
width: min(calc(var(--shell) - 40px), calc(100% - 40px));
margin: 32px auto 0;
}
.st-theme .safety-proof.is-inside-main { width: auto; margin: 40px 0 0; }
.st-theme .safety-proof-card {
border: 1px solid var(--rule);
border-radius: var(--r-2);
background: var(--panel);
overflow: hidden;
}
.st-theme .safety-proof-card[open] { border-color: var(--rule-strong); box-shadow: var(--shadow-1); }
.st-theme .safety-proof-summary {
padding: 13px 15px;
cursor: pointer;
list-style: none;
}
.st-theme .safety-proof-summary::-webkit-details-marker { display: none; }
.st-theme .safety-proof-heading {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.st-theme .safety-proof-shield,
.st-theme .st-receipt-mark {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
background: color-mix(in srgb, var(--ok) 13%, transparent);
color: var(--ok);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
flex: none;
}
.st-theme .safety-proof-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.st-theme .safety-proof-count {
margin-left: auto;
color: var(--ok);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
white-space: nowrap;
}
.st-theme .safety-proof-summary::after {
content: "+ 詳しい確認内容";
margin-left: 10px;
color: var(--ink-3);
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.04em;
white-space: nowrap;
}
.st-theme .safety-proof-card[open] .safety-proof-summary::after { content: "− 閉じる"; }
.st-theme .safety-proof-chips {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
}
.st-theme .safety-proof-chip {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--bg);
color: var(--ink-2);
font-size: 10.5px;
font-weight: 600;
line-height: 1.25;
}
.st-theme .safety-proof-chip::after,
.st-theme .safety-proof-mark {
content: "✓";
margin-left: auto;
padding-left: 4px;
color: var(--ok);
font-family: var(--font-mono);
font-weight: 700;
flex: none;
}
.st-theme .safety-proof-chip.is-warning::after { content: "!"; color: var(--warn); }
.st-theme .safety-proof-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Same Lucide icons as the promise row on the tools list (tools/index.html). */
.st-theme .safety-proof-icon { width: 13px; height: 13px; flex: none; color: var(--ok); }
.st-theme .is-warning .safety-proof-icon { color: var(--warn); }
.st-theme .safety-proof-item.is-warning .safety-proof-mark { color: var(--warn); }
.st-theme .safety-proof-body {
padding: 0 15px 15px;
border-top: 1px solid var(--rule);
}
.st-theme .safety-proof-intro {
margin: 13px 0;
color: var(--ink-2);
font-size: 12px;
line-height: 1.75;
}
.st-theme .safety-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-theme .safety-proof-item,
.st-theme .safety-guard,
.st-theme .safety-log {
padding: 11px 12px;
border: 1px solid var(--rule);
border-radius: var(--r-1);
background: var(--bg);
}
.st-theme .safety-proof-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.st-theme .safety-proof-item b,
.st-theme .safety-guard-text b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 12px; }
.st-theme .safety-proof-item b { display: flex; align-items: center; gap: 6px; }
.st-theme .safety-proof-item p,
.st-theme .safety-guard-text p { margin: 0; color: var(--ink-2); font-size: 11.5px; line-height: 1.7; }
.st-theme .safety-proof-item code { font-family: var(--font-mono); font-size: .92em; color: var(--ink); }
@media (max-width: 760px) {
.st-theme .safety-proof-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-theme .safety-proof-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.st-theme .safety-proof-grid { grid-template-columns: 1fr; }
.st-theme .safety-proof-summary::after { display: block; margin: 9px 0 0 34px; }
}
.st-theme .safety-proof-shield.is-warning,
.st-theme .st-receipt.is-warning .st-receipt-mark {
background: color-mix(in srgb, var(--warn) 14%, transparent);
color: var(--warn);
}
.st-theme .safety-proof-count.is-warning { color: var(--warn); }
/* Live meter — the numbers under the chips are counted on this page while
it is in use, so the promises read as measurements, not as copy. */
.st-theme .safety-meter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--rule);
color: var(--ink-2);
font-size: 11px;
line-height: 1.4;
}
.st-theme .safety-meter-live {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ink-3);
font-size: 10.5px;
font-weight: 600;
}
.st-theme .safety-meter .st-led { background: var(--ok); }
.st-theme .safety-meter.is-warning .st-led { background: var(--warn); }
.st-theme .safety-meter-item { white-space: nowrap; }
.st-theme .safety-meter-item b {
margin-left: 5px;
color: var(--ink);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
}
.st-theme .safety-meter-item.is-key b { color: var(--ok); }
.st-theme .safety-meter-item.is-key.is-warning b { color: var(--warn); }
/* Guard test — asks the browser to send somewhere the CSP does not allow,
and shows the browser refusing. */
.st-theme .safety-guard { margin-top: 10px; }
.st-theme .safety-guard-head { display: flex; align-items: center; gap: 14px; }
.st-theme .safety-guard-text { flex: 1 1 auto; min-width: 0; }
.st-theme .safety-guard-btn { flex: none; font-size: 12px; white-space: nowrap; }
.st-theme .safety-guard-btn:disabled { opacity: .6; cursor: progress; }
.st-theme .safety-guard-results {
display: grid;
gap: 6px;
margin: 10px 0 0;
padding: 10px 0 0;
border-top: 1px solid var(--rule);
list-style: none;
}
.st-theme .safety-guard-results li { display: flex; gap: 8px; color: var(--ink-2); font-size: 11.5px; line-height: 1.6; }
.st-theme .safety-guard-results li::before {
content: attr(data-mark);
flex: none;
width: 12px;
color: var(--ok);
font-family: var(--font-mono);
font-weight: 700;
}
.st-theme .safety-guard-results li.is-warning::before { color: var(--warn); }
.st-theme .safety-guard-results li b { color: var(--ink); font-weight: 600; }
/* Network log — every request since the page opened, in plain words. */
.st-theme .safety-log { margin-top: 10px; padding: 0; }
.st-theme .safety-log-summary {
padding: 10px 12px;
color: var(--ink);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.st-theme .safety-log-list {
max-height: 320px;
margin: 0;
padding: 0 12px 8px;
overflow: auto;
list-style: none;
}
.st-theme .safety-log-row {
display: grid;
grid-template-columns: 56px minmax(0, 12em) minmax(0, 1fr);
gap: 2px 10px;
padding: 6px 0;
border-top: 1px solid var(--rule);
color: var(--ink-2);
font-size: 11px;
line-height: 1.5;
}
.st-theme .safety-log-time { color: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; }
.st-theme .safety-log-dest {
overflow: hidden;
color: var(--ink);
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.st-theme .safety-log-use { min-width: 0; }
.st-theme .safety-log-path {
display: block;
overflow: hidden;
color: var(--ink-3);
font-family: var(--font-mono);
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.st-theme .safety-log-row.is-blocked .safety-log-use { color: var(--ok); }
.st-theme .safety-log-row.is-warning .safety-log-dest,
.st-theme .safety-log-row.is-warning .safety-log-use { color: var(--warn); }
.st-theme .safety-proof-note { margin: 12px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.75; }
/* Analytics opt-out — under the card so it stays visible while the card is closed. */
.st-theme .safety-analytics {
display: flex;
align-items: center;
gap: 14px;
margin-top: 8px;
padding: 0 4px;
}
.st-theme .safety-analytics-text { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink-3); font-size: 11px; line-height: 1.7; }
.st-theme .safety-analytics.is-off .safety-analytics-text { color: var(--ink-2); }
.st-theme .safety-analytics-btn { flex: none; padding: 6px 11px; font-size: 11.5px; white-space: nowrap; }
.st-theme .safety-analytics.is-off .safety-analytics-btn { border-color: var(--ok); color: var(--ok); }
@media (max-width: 760px) {
.st-theme .safety-guard-head { flex-direction: column; align-items: stretch; }
.st-theme .safety-analytics { flex-direction: column; align-items: stretch; gap: 8px; }
.st-theme .safety-log-row { grid-template-columns: 50px minmax(0, 1fr); }
.st-theme .safety-log-use { grid-column: 2; }
}
/* ---- processing receipt ----
Shown at the moment a tool has done its job (STShare.celebrate). Bottom
left on desktop, clear of the share card and donation button on the
right; top of the screen on phones, where the share card spans the width. */
.st-theme .st-receipt {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 105;
box-sizing: border-box;
width: min(320px, calc(100vw - 32px));
padding: 13px 14px 11px;
border: 1px solid var(--rule-strong);
border-radius: var(--r-2);
background: var(--panel);
color: var(--ink);
font-family: var(--font-ui);
box-shadow: var(--shadow-1);
opacity: 0;
transform: translateY(10px);
transition: opacity 240ms ease, transform 240ms ease;
}
.st-theme .st-receipt.is-in { opacity: 1; transform: none; }
@media (max-width: 560px) {
.st-theme .st-receipt { top: 12px; right: 12px; bottom: auto; left: 12px; width: auto; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
.st-theme .st-receipt { transition: opacity 120ms linear; transform: none; }
}
.st-theme .st-receipt-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--rule);
}
.st-theme .st-receipt-mark { width: 20px; height: 20px; font-size: 11px; }
.st-theme .st-receipt-title { flex: 1 1 auto; font-size: 13px; font-weight: 700; }
.st-theme .st-receipt-close {
width: 24px;
height: 24px;
flex: none;
margin: -3px -5px 0 0;
padding: 0;
border: 0;
border-radius: var(--r-1);
background: none;
color: var(--ink-3);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.st-theme .st-receipt-close:hover { background: var(--panel-2); color: var(--ink); }
.st-theme .st-receipt-rows { display: grid; gap: 4px; margin: 0; }
.st-theme .st-receipt-rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; line-height: 1.5; }
.st-theme .st-receipt-rows dt { flex: none; color: var(--ink-2); }
.st-theme .st-receipt-rows dd {
min-width: 0;
margin: 0;
overflow: hidden;
color: var(--ink);
font-family: var(--font-mono);
font-size: 11px;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.st-theme .st-receipt-rows .is-key dt { color: var(--ink); font-weight: 600; }
.st-theme .st-receipt-rows .is-key dd { color: var(--ok); font-weight: 700; }
.st-theme .st-receipt.is-warning .st-receipt-rows .is-key dd { color: var(--warn); }
.st-theme .st-receipt-note { margin: 9px 0 0; color: var(--ink-3); font-size: 10.5px; line-height: 1.6; }
.st-theme .st-receipt-more {
margin-top: 6px;
padding: 2px 0;
border: 0;
background: none;
color: var(--accent);
font: inherit;
font-size: 11px;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.st-theme .st-receipt-close:focus-visible,
.st-theme .st-receipt-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- FAQ ----
All SAFE TOOLS pages use the same native disclosure pattern. Most pages
keep the same copy in HTML and FAQPage; a page with an existing large
FAQPage can let tools-ui.js build this markup from that data. */
.st-theme .faq-section {
width: min(calc(var(--shell) - 40px), calc(100% - 40px));
margin: 48px auto;
padding-top: 28px;
border-top: 1px solid var(--rule);
}
.st-theme .faq-head { margin-bottom: 18px; }
.st-theme .faq-kicker {
display: block;
margin-bottom: 6px;
color: var(--accent);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.st-theme .faq-title {
margin: 0;
color: var(--ink);
font-family: var(--font-ui);
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.02em;
}
.st-theme .faq-lede {
max-width: 720px;
margin: 7px 0 0;
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.75;
}
.st-theme .faq-list { display: grid; gap: 9px; }
.st-theme .faq-item {
border: 1px solid var(--rule);
border-radius: var(--r-1);
background: var(--panel);
}
.st-theme .faq-item[open] { border-color: var(--rule-strong); }
.st-theme .faq-question {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
color: var(--ink);
font-family: var(--font-ui);
font-size: 13.5px;
font-weight: 700;
line-height: 1.55;
cursor: pointer;
list-style: none;
}
.st-theme .faq-question::-webkit-details-marker { display: none; }
.st-theme .faq-question::before {
content: "Q";
color: var(--accent);
font-family: var(--font-mono);
font-size: 11px;
flex: none;
}
.st-theme .faq-question::after {
content: "+";
margin-left: auto;
color: var(--ink-3);
font-family: var(--font-mono);
font-size: 17px;
font-weight: 400;
line-height: 1;
flex: none;
}
.st-theme .faq-item[open] .faq-question::after { content: "−"; }
.st-theme .faq-question:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-theme .faq-answer {
margin: 0;
padding: 0 16px 15px 39px;
color: var(--ink-2);
font-size: 12.5px;
line-height: 1.85;
}
.st-theme .faq-answer + .faq-answer { padding-top: 0; }
.st-theme .faq-answer code {
color: var(--ink);
font-family: var(--font-mono);
font-size: 0.92em;
}
@media (max-width: 560px) {
.st-theme .faq-section { width: calc(100% - 40px); margin: 40px auto; padding-top: 24px; }
.st-theme .faq-question { padding: 13px 14px; }
.st-theme .faq-answer { padding: 0 14px 14px 37px; }
}
/* ---- footer ----
Three fixed slots on every page: the support widget, the notice, and the
way back up. A grid rather than flex, so the notice sits on the page's
centre line however wide the two sides happen to be. */
.st-theme .site-foot {
margin-top: auto;
border-top: 1px solid var(--rule);
background: var(--panel);
}
.st-theme .foot-in {
max-width: var(--shell);
margin: 0 auto;
padding: 6px 20px;
min-height: 44px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
}
.st-theme #donation-button-container { justify-self: start; }
.st-theme .foot-copy {
justify-self: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
color: var(--ink-3);
white-space: nowrap;
}
/* The way back up follows the reader instead of waiting at the bottom: a
floating button that appears once there is something to scroll back over.
The footer keeps its third grid cell empty so the notice stays centred. */
.st-theme #scroll-top-btn {
position: fixed;
right: 20px;
bottom: 20px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--rule);
border-radius: var(--r-1);
background: var(--panel);
color: var(--ink-2);
cursor: pointer;
box-shadow: var(--shadow-1);
opacity: 0;
pointer-events: none;
transform: translateY(6px);
transition: opacity 200ms ease, transform 200ms ease, border-color 120ms ease, color 120ms ease;
z-index: 40;
}
.st-theme #scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: none; }
.st-theme #scroll-top-btn:hover { border-color: var(--accent); color: var(--accent); }
.st-theme #scroll-top-btn:active { transform: translateY(2px); }
.st-theme #scroll-top-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-theme #scroll-top-btn svg { width: 16px; height: 16px; }
/* ---- live state, in the app bar ----
State belongs with the tool's chrome, not in the footer: the footer now
holds the same three things on every page. */
.st-theme .bar-status {
display: inline-flex;
align-items: center;
gap: 7px;
margin-right: 4px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
}
@media (max-width: 700px) { .st-theme .bar-status #status-text { display: none; } }
/* The donation widget centres its tooltip over its button. The widget now
sits in the footer's left slot on every page, so a centred tooltip hangs
off the left edge and gets clipped — anchor it to the button's left edge
instead. Left unscoped so it also covers any page that drops the widget
into this slot without wearing .st-theme. */
#donation-button-container .donation-widget-tooltip { left: 0; right: auto; }
#donation-button-container .donation-widget-tooltip::after {
left: 12px;
right: auto;
transform: none;
}
/* ---- toast ---- */
.st-theme #toast {
position: fixed;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 40px);
padding: 10px 16px;
border: 1px solid var(--canvas-rule);
border-radius: var(--r-1);
background: var(--canvas);
color: var(--canvas-ink);
font-size: 13px;
box-shadow: var(--shadow-1);
z-index: 120;
pointer-events: none;
transition: opacity 220ms ease, transform 220ms ease;
}
.st-theme #toast.translate-y-20 { transform: translate(-50%, 80px); }
.st-theme #toast.opacity-0 { opacity: 0; }
.st-theme #toast .t-ok { color: var(--accent); }
.st-theme #toast .t-err { color: #F87171; }
@media (prefers-reduced-motion: reduce) {
.st-theme *, .st-theme *::before, .st-theme *::after {
animation: none !important;
transition: none !important;
}
}
/* ==========================================================================
Layer 3 — components
========================================================================== */
/* Inline Before/After compare slider.
* Markup expected (built by STCommon.setupInlineCompare):
*
*
![]()
*
*
*
変換前
*
変換後
*