:root{
  --bg:#0b1017; --panel:#121a24; --panel2:#17212d; --line:#283442;
  --txt:#edf3fa; --mut:#91a2b7; --acc:#ffc128; --acc-text:#211705; --ok:#45d49a;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --shadow:0 16px 45px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,textarea,input{font:inherit}
button{cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible,a:focus-visible{
  outline:3px solid color-mix(in srgb,var(--acc) 65%,transparent);outline-offset:3px
}

/* ---------- animated obsidian background ---------- */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.16;will-change:transform}
.blob-1{width:46vw;height:46vw;left:-8vw;top:-16vw;background:#ffc128;animation:drift-a 22s ease-in-out infinite alternate}
.blob-2{width:42vw;height:42vw;right:-12vw;top:8vw;background:#5b7cff;opacity:.13;animation:drift-b 27s ease-in-out infinite alternate}
.blob-3{width:38vw;height:38vw;left:26vw;bottom:-20vw;background:#2dd4bf;opacity:.10;animation:drift-c 31s ease-in-out infinite alternate}
.grain{position:absolute;inset:-50%;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(.9)}to{transform:translate3d(7vw,6vw,0) scale(1.18)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-6vw,9vw,0) scale(.85)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(4vw,-7vw,0) scale(1.2)}}
@keyframes grain{0%{transform:translate(0,0)}100%{transform:translate(-3%,2%)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes outputFlash{0%{box-shadow:inset 0 0 0 0 transparent}35%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--acc) 45%,transparent)}100%{box-shadow:inset 0 0 0 0 transparent}}
@keyframes sweep{0%{background-position:0 0}100%{background-position:200% 0}}

/* ---------- shell ---------- */
.app-shell{max-width:1120px;margin:0 auto;padding:26px 22px 64px}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;flex:none;
  background:linear-gradient(180deg,#ffdb86,#f0ad12);color:var(--acc-text);font-size:22px;font-weight:900;
  box-shadow:0 6px 22px color-mix(in srgb,var(--acc) 26%,transparent)}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-title{font-weight:850;letter-spacing:-.035em;font-size:19px;line-height:1.15}
.brand-sub{color:var(--mut);font-size:12.5px;margin-top:3px}
.top-meta{display:flex;gap:9px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;color:var(--mut);font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--panel) 82%,transparent)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 14%,transparent)}

/* headings */
.tool{padding-top:30px;animation:rise .5s ease both}
.tool-head{margin-bottom:24px}
.kicker{display:inline-block;color:var(--acc);font-size:11.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.tool-title{margin:8px 0 0;font-size:clamp(28px,4.4vw,46px);line-height:1.05;letter-spacing:-.05em;font-weight:900;max-width:19ch}
.tool-subtitle{margin:14px 0 0;max-width:62ch;color:var(--mut);font-size:14.5px;line-height:1.65}

/* tabs */
.mode-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 18px}
.mode-tabs{display:inline-flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--panel) 85%,transparent)}
.mode-tab{border:1px solid transparent;border-radius:9px;padding:9px 20px;background:transparent;color:var(--mut);font-size:13px;font-weight:800;letter-spacing:.02em;transition:transform .18s,color .18s,background .18s}
.mode-tab:hover{color:var(--txt)}
.mode-tab.active{background:var(--acc);color:var(--acc-text);box-shadow:0 6px 20px color-mix(in srgb,var(--acc) 22%,transparent)}
.secure-note{display:inline-flex;align-items:center;gap:8px;color:var(--mut);font-size:12.5px}

/* recipe cards */
.mode-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:24px}
.rcard{position:relative;display:flex;flex-direction:column;gap:7px;text-align:left;
  min-height:118px;padding:15px;border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--txt);
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.rcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 65%,var(--line))}
.rcard .rmark{font-size:18px;line-height:1;color:var(--acc);font-weight:900}
.rcard .rname{font-size:13.5px;font-weight:850;letter-spacing:-.015em}
.rcard .rblurb{font-size:11.5px;line-height:1.45;color:var(--mut)}
.rcard.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--panel));box-shadow:inset 0 0 0 1px var(--acc)}
.rcard.sel:after{content:"✓";position:absolute;top:12px;right:13px;color:var(--acc);font-size:13px;font-weight:900}

/* editors */
.editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.editor-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);overflow:hidden;box-shadow:var(--shadow);
  transition:border-color .2s}
.editor-card:focus-within{border-color:color-mix(in srgb,var(--acc) 70%,var(--line))}
.editor-card.bump{animation:outputFlash .6s ease}
.editor-head{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line)}
.editor-icon{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:9px;
  background:color-mix(in srgb,var(--acc) 13%,var(--panel2));color:var(--acc);font-size:14px;font-weight:900}
.editor-text{display:flex;flex-direction:column;min-width:0}
.editor-label{font-size:13px;font-weight:850}
.editor-hint{font-size:11px;color:var(--mut);margin-top:2px}
textarea{width:100%;border:0;outline:none;resize:vertical;background:transparent;color:var(--txt);
  padding:15px;min-height:150px;display:block;font-family:var(--mono);font-size:13px;line-height:1.7;
  overflow-wrap:anywhere}
textarea::placeholder{color:color-mix(in srgb,var(--mut) 72%,transparent)}
#output.cipher{font-size:15.5px;background:color-mix(in srgb,var(--panel2) 42%,transparent);
  color:#ffe09a;text-shadow:0 0 14px color-mix(in srgb,var(--acc) 32%,transparent)}
.editor-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 15px;
  border-top:1px solid var(--line);color:var(--mut);font-size:11.5px;flex-wrap:wrap}
.space-option{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.space-option input{width:15px;height:15px;accent-color:var(--acc)}

/* error */
.err{margin:16px 0 0;padding:12px 15px;border:1px solid color-mix(in srgb,#ff5470 42%,var(--line));
  border-radius:12px;background:color-mix(in srgb,#ff5470 12%,transparent);color:#ffb3c1;font-size:13px}

/* actions */
.action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:18px}
.action-button{border:1px solid var(--line);border-radius:11px;padding:11px 18px;background:color-mix(in srgb,var(--panel) 92%,transparent);
  color:var(--txt);font-size:13px;font-weight:850;transition:transform .18s,border-color .18s,filter .18s}
.action-button:hover{transform:translateY(-2px);border-color:var(--acc)}
.action-button:active{transform:translateY(0)}
.action-button.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-text);
  box-shadow:0 6px 20px color-mix(in srgb,var(--acc) 24%,transparent)}
.action-button.quiet{margin-left:auto}

/* note + footer */
.workflow-note{margin:24px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--panel) 78%,transparent);color:var(--mut);font-size:12.5px;line-height:1.6}
.workflow-note strong{color:var(--txt)}
.footer{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);color:var(--mut);font-size:12.5px;line-height:1.7}
.footer p{margin:0;max-width:78ch}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-title{max-width:26ch}
}
@media (max-width:860px){
  .editor-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .app-shell{padding:18px 15px 48px}
  .brand-sub{display:none}
  .tool{padding-top:22px}
  .mode-grid{grid-template-columns:1fr}
  .rcard{min-height:auto}
  .mode-switch{flex-direction:column;align-items:flex-start}
  .mode-tabs{width:100%}
  .mode-tab{flex:1;text-align:center}
  .action-button.quiet{margin-left:0}
  .action-button{flex:1 1 auto;justify-content:center;text-align:center}
}

/* motion preferences */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .blob{opacity:.12}
}