:root{--panel: #fcfbf8;--ink: #1f1d1b;--muted: #5b554d;--line: #ded4c3;--accent: #c86b3c;--shadow: 0 18px 40px rgba(57, 38, 20, .12);--header-height: 64px;--control-height: 44px;--segment-1: #cbeff2;--segment-2: #f9d5e5;--segment-3: #ffe7c7;--segment-4: #d8f3c8;--segment-5: #f1d9ff;--segment-6: #d9e3ff}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,Avenir Next,Helvetica Neue,sans-serif;color:var(--ink);background:radial-gradient(circle at top left,#fff6e9,#f3e6d5 55%,#ecd8c1);min-height:100vh}.page-header{max-width:1200px;height:var(--header-height);margin:0 auto;padding:0 20px;display:flex;align-items:flex-end}.page-header h1{margin:0;font-size:2.1rem;font-weight:600;letter-spacing:-.03em;line-height:1.05}.app{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.1fr);grid-template-rows:minmax(0,1fr) auto;gap:18px;padding:12px 20px 20px;max-width:1200px;margin:0 auto;height:calc(100vh - var(--header-height))}.pane{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0}.pane-header h2{margin:0 0 6px;font-weight:600;letter-spacing:-.02em}.pane-header p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.4}.pane-main{display:flex;flex-direction:column;gap:0;min-height:0}.pane-main .controls{margin-top:0;flex:1}.controls{margin-top:18px;display:flex;flex-direction:column;gap:16px;flex:1}.controls-inline{flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:20px;justify-content:flex-start}.controls-inline .field{flex:0 0 auto}.controls-inline .field:not(.toggle-field){min-width:220px}.field{display:flex;flex-direction:column;gap:8px;font-size:.95rem;flex:1}.field span{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.field input,.field textarea{border-radius:12px;border:1px solid var(--line);padding:12px 14px;font-size:1rem;font-family:IBM Plex Sans,Helvetica Neue,sans-serif;background:#fff;color:var(--ink)}.field textarea{resize:none;min-height:0;height:100%;line-height:1.4;overflow:auto}.field input:focus,.field textarea:focus{outline:2px solid rgba(200,107,60,.25);border-color:var(--accent)}.toggle-field{min-width:0;margin-left:auto;display:flex;flex-direction:column;align-items:center;row-gap:8px;width:max-content}.toggle-field .toggle-row{width:100%}.toggle-field>span{text-align:center}.toggle-row{display:flex;align-items:center;gap:8px;font-size:.95rem;justify-content:center}.pill{border:1px solid var(--line);background:#fff;color:var(--muted);padding:10px 20px;height:var(--control-height);border-radius:14px;min-width:84px;font-size:.9rem;font-family:IBM Plex Sans,Helvetica Neue,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,transform .15s ease,box-shadow .15s ease}.pill.is-active{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 6px 16px #c86b3c47}.pill:hover{transform:translateY(-1px)}.pill:active{transform:translateY(0);box-shadow:none}.input-row{display:flex;align-items:center;gap:10px}.input-row input{flex:1;min-width:120px;height:var(--control-height);text-align:center}.input-row button{border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 14px;height:var(--control-height);font-size:.95rem;font-family:IBM Plex Sans,Helvetica Neue,sans-serif;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.input-row button:hover{transform:translateY(-1px);box-shadow:0 6px 14px #3926141f}.input-row button:active{transform:translateY(0);box-shadow:none}.preview-wrap{position:relative;flex:1;display:flex}.preview{margin-top:0;padding:16px 16px 52px;border-radius:14px;background:#fff;border:1px dashed var(--line);min-height:0;flex:1;height:100%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:1.02rem;overflow:auto}.stats{position:absolute;left:16px;bottom:14px;color:var(--muted);font-size:.9rem;min-height:18px;background:#ffffffe6;padding:4px 8px;border-radius:8px;box-shadow:0 6px 16px #39261414}.segment{display:block;padding:10px 12px;margin-bottom:10px;border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.segment:last-child{margin-bottom:0}.preview.preview-inline .segment{display:inline;padding:2px 6px;margin:0;border-radius:4px}.preview.preview-inline .segment:has(+.segment){padding-right:2px;border-top-right-radius:0;border-bottom-right-radius:0}.preview.preview-inline .segment+.segment{padding-left:2px;border-top-left-radius:0;border-bottom-left-radius:0}.segment-1{background:var(--segment-1)}.segment-2{background:var(--segment-2)}.segment-3{background:var(--segment-3)}.segment-4{background:var(--segment-4)}.segment-5{background:var(--segment-5)}.segment-6{background:var(--segment-6)}.segment-count{font-weight:600;color:var(--accent)}.pane-full{grid-column:1/-1;padding:18px 20px}.pane-full .controls{margin-top:12px}.app-meta{grid-column:1/-1;margin-top:-6px;padding:0 4px 2px;display:flex;justify-content:space-between;align-items:center}.app-footer,.repo-link{font-family:IBM Plex Sans,Helvetica Neue,sans-serif;font-size:.76rem;letter-spacing:.01em;color:#1f1d1b94}.app-footer{order:2}.repo-link{order:1;display:inline-flex;align-items:center;gap:5px;line-height:1;text-decoration:none;transition:color .15s ease}.repo-link:hover,.repo-link:focus-visible{color:#1f1d1bcc}.repo-icon{display:block;width:12px;height:12px;flex-shrink:0;transform:translateY(-1px)}@media(max-width:900px){.app{grid-template-columns:1fr}.pane{min-height:auto}}@media(max-width:640px){body{min-height:auto;font-size:17px}.page-header{height:auto;padding:16px 16px 8px;justify-content:center;align-items:center}.page-header h1{font-size:2rem;text-align:center}.app{height:auto;padding:8px 8px 16px;gap:12px;display:flex;flex-direction:column}.app-meta{margin-top:0;padding:2px 2px 0;flex-direction:column;gap:6px}.app-footer{text-align:center;order:1}.repo-link{order:2}.pane{padding:14px;border-radius:14px}.pane-full{padding:14px}.controls-inline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:start;gap:12px}.controls-inline .field{display:contents}.controls-inline .field:not(.toggle-field){min-width:0}.controls-inline .field>span{grid-row:1}.controls-inline .field:nth-child(1)>span{grid-column:1}.controls-inline .field:nth-child(1) .input-row{grid-column:1;grid-row:2}.controls-inline .field:nth-child(2)>span{grid-column:2}.controls-inline .field:nth-child(2) .toggle-row{grid-column:2;grid-row:2;width:100%}.toggle-field{margin-left:0;align-items:flex-start;width:auto}.toggle-field>span{text-align:left}.toggle-row{justify-content:flex-start}.toggle-row .pill{flex:1}.toggle-row{align-items:stretch;height:calc(var(--control-height) * 2 + 14px)}.toggle-row .pill{height:100%}.input-row{flex-direction:column;align-items:stretch}.input-row input,.input-row button{width:100%}.field textarea,.preview{min-height:180px;height:180px}}