:root{--ink:#21312d;--muted:#78827d;--green:#176653;--deep:#123c35;--line:#e5eae7;--bg:#f6f8f6;--gold:#b69560}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif;min-height:100vh}.app{max-width:1440px;margin:auto;padding:0 42px 22px}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;color:var(--deep);text-decoration:none}.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--deep);color:#f0d8ab;display:grid;place-items:center;font:700 23px 'Playfair Display';box-shadow:0 5px 14px #123c3520}.brand b{display:block;font:700 20px 'Playfair Display';letter-spacing:-.5px}.brand small{display:block;font-size:8px;letter-spacing:1.55px;color:#89918e;margin-top:1px}.local-note{font-size:10px;color:#818a86}.local-note i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5da47d;margin-right:6px;vertical-align:1px}.intro{padding:30px 0 23px}.eyebrow{font-size:9px;color:#a08a66;letter-spacing:1.5px;font-weight:700;margin-bottom:8px}.intro h1{font:600 27px 'Playfair Display',serif;letter-spacing:-.35px;margin:0}.intro p{margin:8px 0 0;color:#7d8782;font-size:12px}.text-workspace{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}.text-panel{background:white;border:1px solid var(--line);border-radius:9px;box-shadow:0 3px 12px #273c3310;padding:17px;display:flex;flex-direction:column;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:center;min-height:43px;margin-bottom:13px}.panel-head>div{display:flex;align-items:center;gap:10px}.step-num{color:#a58b62;font-size:9px;letter-spacing:.5px;font-weight:700}.panel-head h2{margin:0;font:600 16px 'Playfair Display',serif}.panel-head p{margin:4px 0 0;color:#929a96;font-size:10px}.file-button,.secondary-button{border:1px solid #dce4df;background:#fff;border-radius:5px;padding:8px 11px;color:#53645b;font:600 10px 'DM Sans';cursor:pointer}.file-button:hover,.secondary-button:hover{border-color:#86a596;color:var(--green)}#sourceFile{display:none}.plain-tag{font-size:8px;letter-spacing:.8px;color:#628675;background:#edf4f0;padding:5px 7px;border-radius:4px;font-weight:700}textarea{font:11px/1.55 'Consolas','Courier New',monospace;color:#38443f;background:#fcfdfc;border:1px solid #e2e8e4;border-radius:5px;width:100%;min-height:480px;resize:vertical;outline:none;padding:13px;white-space:pre;overflow:auto}textarea:focus{border-color:#80aa97;box-shadow:0 0 0 3px #17665312}textarea::placeholder{color:#adb6b1}#outputText{background:#fafbf9}.panel-foot{display:flex;align-items:center;justify-content:space-between;color:#929a96;font-size:9px;padding-top:11px;min-height:38px}.text-button{border:0;background:none;color:#7c8982;font:500 10px 'DM Sans';cursor:pointer;padding:4px}.text-button:hover{color:#a65146}.output-actions{display:flex;gap:7px}.primary-button,.build-button{background:var(--green);color:#fff;border:0;border-radius:5px;font:600 10px 'DM Sans';padding:9px 12px;cursor:pointer}.primary-button:hover,.build-button:hover{background:#105543}.build-button{padding:11px 17px;font-size:11px;box-shadow:0 3px 8px #17665322}.build-button span{font-size:15px;margin-left:13px;vertical-align:-1px}.action-row{display:flex;align-items:center;justify-content:space-between;margin:15px 0 24px}.action-row>span{color:#85908a;font-size:10px}footer{border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;color:#a1a8a4;font-size:9px}@media(max-width:850px){.app{padding:0 20px 20px}.text-workspace{grid-template-columns:1fr}.text-panel textarea{min-height:360px}}@media(max-width:520px){.app{padding:0 12px 16px}.topbar{height:60px}.intro{padding:24px 0 18px}.intro h1{font-size:24px}.intro p{line-height:1.5}.text-panel{padding:13px}.text-panel textarea{min-height:300px;font-size:10px}.action-row{align-items:flex-start;gap:12px}.action-row>span{line-height:1.5}footer{gap:12px;font-size:8px}.output-actions{gap:5px}.primary-button,.secondary-button{padding:8px}.local-note{font-size:9px}}

/* Calm document workspace refinements */
:root {
  --ink: #1f302b;
  --muted: #718079;
  --green: #176653;
  --deep: #123c35;
  --line: #e1e8e3;
  --bg: #f4f7f4;
  --gold: #a98a58;
}

body { background: var(--bg); }
.app { max-width: 1360px; padding-right: clamp(18px, 3vw, 40px); padding-left: clamp(18px, 3vw, 40px); }
.topbar { height: 74px; }
.intro { padding-top: 36px; padding-bottom: 28px; }
.intro p { max-width: 760px; line-height: 1.65; }
.text-workspace { gap: 20px; }
.text-panel { border-radius: 13px; padding: 20px; box-shadow: 0 5px 20px #173c3210; }
.panel-head { margin-bottom: 16px; }
.panel-head h2 { font-family: var(--font-modern); }
textarea { border-radius: 8px; line-height: 1.65; }
.file-button, .secondary-button, .primary-button, .build-button { border-radius: 7px; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.primary-button:hover, .build-button:hover, .document-open:hover { transform: translateY(-1px); }
.secondary-button:focus-visible, .primary-button:focus-visible, .build-button:focus-visible, .file-button:focus-visible, .text-button:focus-visible, .input-example summary:focus-visible { outline: 3px solid #b6956066; outline-offset: 3px; }
.action-row { margin-top: 18px; margin-bottom: 30px; }
footer { padding-top: 16px; font-size: 10px; }

@media (max-width: 850px) {
  .app { padding-right: 22px; padding-left: 22px; }
  .intro { padding-top: 30px; }
}
@media (max-width: 520px) {
  .app { padding-right: 15px; padding-left: 15px; }
  .topbar { height: 64px; }
  .intro { padding-top: 25px; }
  .text-panel { padding: 15px; }
  footer { flex-direction: column; }
}

/* RuangAkta: a quiet, open workspace */
/* Keep button labels and icons out of text selections. */
button, button *, input[type="button"], input[type="submit"], input[type="reset"], .file-button, .file-button * {
  -webkit-user-select: none;
  user-select: none;
}

.brand-mark{flex:none;width:42px;height:42px;border-radius:12px;background:#faf6ed;border:1px solid #eee6d8;box-shadow:none}
.brand-mark svg{display:block;width:36px;height:36px}
.brand b{font-family:var(--font-modern,'DM Sans',sans-serif);font-size:21px;font-weight:600;letter-spacing:-.5px;color:#405640}

/* Integrated book and wordmark lockup */
.brand{gap:7px;align-items:center}
.brand .brand-mark{width:36px;height:36px;background:transparent;border:0;border-radius:0;box-shadow:none}
.brand .brand-mark svg{width:38px;height:38px}
.brand.brand b{font-family:var(--font-modern,'Segoe UI',sans-serif);font-size:22px;font-weight:600;letter-spacing:-.7px;line-height:1.2;color:#424F36}

/* Warm, quiet workspace surfaces */
:root{--bg:#F2F0E9;--surface:#FDFCF9}
body{background:var(--bg)}

/* RuangAkta earth-tone accents */
:root{--green:#56634B;--deep:#343D30;--ink:#343D30;--muted:#78806F;--line:#E1E3D8;--olive-hover:#43513A;--sage:#ECEEE4;--sage-accent:#E6EADD}
.primary-button:hover,.build-button:hover{background:var(--olive-hover)}

/* Stronger text and action contrast, with the same warm surfaces */
:root{--green:#424F36;--deep:#293323;--ink:#30362A;--muted:#5F6756;--olive-hover:#323F28}
.primary-button:hover,.build-button:hover{background:var(--olive-hover)}

:root{--accent:#A66B50;--accent-ink:#8C533D;--accent-soft:#F4E9E1}
.eyebrow,.step-num{color:var(--accent-ink)}

/* Approved block-perspective RA monogram. */
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.brand .brand-mark{width:44px;height:44px}

/* Horizontal RuangAkta logo with transparent monogram and wordmark. */
.brand .brand-logo{display:block;width:220px;height:auto;flex:none;object-fit:contain}
@media(max-width:520px){.brand .brand-logo{width:190px}}