/* Jump In Octopus · Tools — shared design system. Same language as jumpinoctopus.com:
   near-black film stock, warm ink, Instrument Serif display, Inter Tight body, JetBrains Mono labels, one gold accent. */
:root {
  --bg: #0a0a09; --bg2: #11110f; --bg3: #181816; --ink: #eee9df; --soft: #c9c4ba; --muted: #8d897f; --faint: #57544e;
  --line: rgba(238, 233, 223, .12); --line2: rgba(238, 233, 223, .2); --accent: #D8A200; --accent2: #f0c23a;
  --ok: #7fbf8a; --bad: #e0705a;
  --serif: "Instrument Serif", "Times New Roman", serif; --sans: "Inter Tight", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --g: clamp(16px, 3.2vw, 48px); --ease: cubic-bezier(.16, 1, .3, 1); --r: 14px; --hdr: 76px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, canvas, video { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-weight: 400; }
.display { font-family: var(--serif); font-weight: 400; line-height: .92; letter-spacing: -.02em; }
.display em, .serif em { font-style: italic; }
.muted { color: var(--muted); }
.label { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.label i { font-style: normal; color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); display: inline-block; }
.grain { position: fixed; inset: -50%; z-index: 999; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 var(--g); background: linear-gradient(var(--bg) 55%, rgba(10,10,9,0)); }
.brand { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; }
.brand img { width: 24px; height: 24px; }
.brand b { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: -.01em; white-space: nowrap; }
.brand b em { color: var(--muted); }
.tnav { display: flex; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 99px; background: rgba(10,10,9,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 64vw; overflow-x: auto; scrollbar-width: none; }
.tnav::-webkit-scrollbar { display: none; }
.tnav a { padding: 7px 13px; border-radius: 99px; font-size: 13px; color: var(--muted); white-space: nowrap; transition: color .35s, background .35s; }
.tnav a:hover { color: var(--ink); }
.tnav a.on { color: #0a0a09; background: var(--ink); }
.hdr-r { justify-self: end; display: flex; align-items: center; gap: 18px; }
.pill-cta { font-size: 13px; padding: 9px 18px; border-radius: 99px; background: var(--ink); color: #0a0a09; white-space: nowrap; transition: background .35s; }
.pill-cta:hover { background: var(--accent); }
.hdr .back { color: var(--muted); font-size: 13px; transition: color .3s; white-space: nowrap; }
.hdr .back:hover { color: var(--ink); }
@media (max-width: 1100px) { .tnav { display: none; } .hdr { grid-template-columns: 1fr auto; } }
@media (max-width: 560px) { .hdr .back { display: none; } .brand b { font-size: 19px; } .pill-cta { padding: 8px 14px; } }

/* ---------- tool page shell ---------- */
.tool-head { padding: 28px var(--g) 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tool-head h1 { font-size: clamp(44px, 6.4vw, 96px); }
.tool-head p { max-width: 460px; color: var(--muted); font-size: 15px; }
.tool-head .label { margin-bottom: 14px; }
.wrap { padding: 0 var(--g); }
.panel { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; padding: 18px var(--g) 40px; align-items: start; }
.split > .side { position: sticky; top: calc(var(--hdr) + 8px); max-height: calc(100vh - var(--hdr) - 24px); overflow: auto; scrollbar-width: thin; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } .split > .side { position: static; max-height: none; } }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line2); color: var(--soft); font-size: 13px; white-space: nowrap; transition: color .3s, background .3s, border-color .3s, transform .3s var(--ease); user-select: none; }
.btn:hover { color: var(--ink); border-color: var(--muted); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--ink); color: #0a0a09; border-color: var(--ink); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.gold { background: var(--accent); border-color: var(--accent); color: #0a0a09; }
.btn.gold:hover { background: var(--accent2); }
.btn.ghost { border-color: transparent; }
.btn.sm { padding: 6px 12px; font-size: 12px; }
.btn.icon { width: 36px; height: 36px; padding: 0; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.seg { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 99px; gap: 2px; flex-wrap: wrap; }
.seg button { padding: 6px 13px; border-radius: 99px; color: var(--muted); font-size: 12.5px; transition: .3s; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: #0a0a09; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 12.5px; transition: .3s; }
.chip:hover { color: var(--ink); border-color: var(--faint); }
.chip.on { background: var(--ink); color: #0a0a09; border-color: var(--ink); }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > span, .fl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.field > span output, .fl output { color: var(--soft); }
.inp, select.inp, textarea.inp { width: 100%; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); outline: none; transition: border-color .3s; font-size: 14px; }
.inp:focus { border-color: var(--faint); }
textarea.inp { resize: vertical; min-height: 84px; line-height: 1.5; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--line2); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--ink); border: 0; transition: transform .2s; }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); background: var(--accent); }
input[type=range]::-moz-range-track { height: 2px; background: var(--line2); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 0; }
input[type=color] { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; border: 1px solid var(--line2); border-radius: 50%; padding: 0; background: none; cursor: pointer; overflow: hidden; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }
.sec { padding: 18px; border-bottom: 1px solid var(--line); }
.sec:last-child { border-bottom: 0; }
.sec h3 { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drop { position: relative; display: grid; place-items: center; text-align: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--line2); border-radius: var(--r); color: var(--muted); transition: border-color .3s, background .3s; cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--accent); background: rgba(216,162,0,.04); color: var(--soft); }
.drop b { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--ink); font-style: italic; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kbd { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border: 1px solid var(--line2); border-radius: 5px; color: var(--soft); }
.code { font-family: var(--mono); font-size: 12px; line-height: 1.6; background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--soft); white-space: pre; overflow: auto; max-height: 260px; }
.hint { color: var(--muted); font-size: 12.5px; }
.sep { height: 1px; background: var(--line); margin: 14px 0; }

/* ---------- toast & modal ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 200; transform: translate(-50%, 20px); opacity: 0; padding: 10px 18px; border-radius: 99px; background: var(--ink); color: #0a0a09; font-size: 13px; transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; display: flex; align-items: center; gap: 8px; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(5,5,4,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.modal.on { opacity: 1; visibility: visible; }
.modal .box { width: min(620px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--bg2); border: 1px solid var(--line2); border-radius: 18px; transform: translateY(14px) scale(.98); transition: transform .45s var(--ease); }
.modal.on .box { transform: none; }
.modal .box header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal .box header h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; }
.modal .box .body { padding: 20px; }

/* ---------- footer ---------- */
.foot { margin-top: 30px; padding: 26px var(--g) 34px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.foot a:hover { color: var(--ink); }
.foot .made { display: flex; align-items: center; gap: 10px; }
.foot .made img { width: 18px; height: 18px; opacity: .8; }
.foot .links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- motion ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .grain { animation: none; } * { transition-duration: .01ms !important; } }
.checker { background-color: #2a2a27; background-image: linear-gradient(45deg, #353531 25%, transparent 25%), linear-gradient(-45deg, #353531 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #353531 75%), linear-gradient(-45deg, transparent 75%, #353531 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }

/* ---------- how to use ---------- */
.head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 460px; }
.howto-btn { border-color: var(--line2); }
.howto-btn:hover { border-color: var(--accent); color: var(--ink); }
.quick { display: flex; align-items: center; gap: 22px; margin: 14px var(--g) 0; padding: 12px 14px 12px 18px; border: 1px solid rgba(216,162,0,.35); border-radius: 14px; background: linear-gradient(90deg, rgba(216,162,0,.08), rgba(216,162,0,.02)); transition: opacity .4s, transform .4s var(--ease); }
.quick.gone { opacity: 0; transform: translateY(-6px); }
.quick .q-l { display: flex; align-items: center; gap: 9px; color: var(--accent); white-space: nowrap; }
.quick ol { list-style: none; display: flex; gap: 22px; flex: 1; min-width: 0; }
.quick li { display: flex; align-items: baseline; gap: 9px; color: var(--soft); font-size: 13.5px; line-height: 1.4; flex: 1; }
.quick li em { font-family: var(--serif); font-size: 22px; color: var(--accent); font-style: italic; line-height: 1; }
.quick li b { color: var(--ink); font-weight: 400; }
.quick .q-r { display: flex; gap: 6px; align-items: center; }
@media (max-width: 900px) { .quick { flex-wrap: wrap; gap: 12px; } .quick ol { flex-direction: column; gap: 8px; flex-basis: 100%; order: 2; } .quick .q-r { margin-left: auto; } }
.guide-modal .box { width: min(720px, 100%); }
.g-intro { color: var(--soft); margin-bottom: 18px; }
.g-steps { list-style: none; counter-reset: s; display: grid; gap: 2px; }
.g-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.g-steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 4px; }
.g-steps b { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--ink); }
.g-steps span { color: var(--muted); font-size: 14px; margin-top: 3px; }
.g-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.g-block h4 { font-weight: 400; color: var(--muted); margin-bottom: 10px; }
.g-tips { padding-left: 18px; color: var(--soft); font-size: 14px; display: grid; gap: 6px; }
.g-keys { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 13px; }
.g-keys span { display: inline-flex; align-items: center; gap: 8px; }
.g-foot { margin-top: 18px; color: var(--muted); font-size: 13px; }
.g-foot a { color: var(--ink); border-bottom: 1px solid var(--faint); }
.quick.float { position: fixed; left: 50%; bottom: 74px; z-index: 60; margin: 0; width: min(980px, calc(100% - 32px)); transform: translateX(-50%); background: rgba(14,13,11,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.quick.float.gone { transform: translate(-50%, 8px); }
@media (max-width: 900px) { .quick.float { bottom: 86px; } }