:root{font-family:Arial,Helvetica,sans-serif;color:#49301e;background:#ffffff;font-synthesis:none;--green:#087d99;--line:#c8e5e8;--muted:#536e76}*{box-sizing:border-box}body{margin:0}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #12b9d1;outline-offset:4px}header{max-width:1200px;margin:auto;padding:30px 44px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:#503019;text-decoration:none;font-size:25px;font-weight:800;letter-spacing:-1.3px}.brand-icon{font-size:36px;font-weight:400;color:var(--green)}.brand-dot{color:#0daecb;margin-left:-9px}.private{display:flex;align-items:center;gap:8px;font-size:12px;color:#536e76}.private i{width:6px;height:6px;background:#0daecb;border-radius:100%}main{max-width:760px;margin:30px auto 70px;padding:0 24px}.intro{text-align:center;margin-bottom:34px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#487882;font-weight:700}h1{font-size:58px;line-height:1.04;letter-spacing:-3px;margin:18px 0}h1 span{font-family:Georgia,serif;font-weight:400;font-style:italic;color:var(--green);letter-spacing:-2.8px}.intro p{font-size:14px;line-height:1.8;color:#55747b}.playground{background:#fffdf8;border:1px solid #b4dde4;border-radius:20px;box-shadow:0 10px 35px #08677b12;overflow:hidden}.editor-top{padding:23px 27px 10px;display:flex;justify-content:space-between;align-items:center}.editor-top label{font-size:10px;letter-spacing:1.7px;color:#557984;font-weight:bold}.editor-top>span{background:#dff5f7;border:1px solid #bce6ed;border-radius:20px;padding:5px 11px;font-size:10px;color:#086a80}textarea{display:block;width:100%;height:168px;resize:vertical;min-height:130px;max-height:450px;border:0;background:transparent;padding:19px 27px;color:#57361e;font:28px/1.65 Arial,Helvetica,sans-serif;outline:none;overflow:auto}textarea::placeholder{color:#91b0b4;font-family:Georgia,serif;font-style:italic}textarea:focus{box-shadow:inset 3px 0 #19b5cc}.editor-bottom{display:flex;align-items:center;justify-content:space-between;padding:12px 27px 21px;border-bottom:1px solid var(--line)}.small-button{background:#fffdf8;border:1px solid #bddde2;border-radius:7px;padding:8px 11px;font-size:11px;color:#356d7a}.small-button span{margin-right:5px}.editor-meta{display:flex;align-items:center;gap:14px;color:#597d86;font-size:10px}#clear{border:0;background:none;color:#597d86;font-size:23px;line-height:1;padding:5px}.controls{padding:23px 27px;background:#f2fbfc}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-heading h2{font-size:13px;font-weight:600;margin:0}.section-heading>span{font:9px monospace;letter-spacing:1px;color:#5c818a}.style-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.style{height:78px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#fffdf8;border:1px solid #c5e3e8;border-radius:9px;color:#506d77;transition:background .15s,transform .15s,border-color .15s}.style:hover{border-color:#30abc1;transform:translateY(-2px)}.style[aria-pressed=true]{background:#c9f0f4;border-color:#0ca5c1;box-shadow:inset 0 0 0 1px #0ca5c1;color:#075f73}.style[aria-pressed=true]:after{content:'';position:absolute;top:7px;right:7px;background:#0a8ba6;width:4px;height:4px;border-radius:50%}.style-glyph{font:27px/1.1 Georgia,'Times New Roman',serif}.style-label{font-size:9px;letter-spacing:.1px}.corruption{margin-top:26px}.corruption .section-heading{margin-bottom:13px}#level-name{letter-spacing:0;font:10px Arial;color:#78502c;background:#f6e7ce;padding:4px 9px;border-radius:4px}input[type=range]{appearance:none;width:100%;height:5px;border-radius:10px;background:linear-gradient(to right,#079dbb 0%,#cbe9ef 0%);display:block;margin:17px 0;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;background:#079dbb;border:3px solid #fffdf8;border-radius:50%;box-shadow:0 0 0 1px #0e94ab}input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#079dbb;border:3px solid #fffdf8;border-radius:50%}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#587d87}.action-row{display:flex;gap:10px;margin-top:28px}.copy{flex:1;background:var(--green);border:1px solid var(--green);color:white;border-radius:9px;font-size:13px;padding:14px;display:flex;align-items:center;justify-content:center;gap:10px}.copy>span:last-child{margin-left:auto}.copy>span:first-child{margin-right:auto}.copy:hover:not(:disabled){background:#06667f}.reroll{background:transparent;border:1px solid #b6dfe6;color:#356d7a;border-radius:9px;padding:12px 18px;font-size:11px}.reroll span{font-size:20px;vertical-align:middle;margin-right:5px}.hint{font-size:10px;color:#5b7f87;text-align:center;margin:15px 0 0;line-height:1.5}.under-card{display:flex;justify-content:space-between;gap:14px;margin:17px 6px;color:#527983;font-size:10px;line-height:1.6}.under-card button{background:none;border:0;border-bottom:1px solid #7db6c1;padding:0;color:#096f87;font-size:10px}.under-card>span>span{padding-right:6px}footer{max-width:1112px;margin:0 auto;padding:22px 0 30px;border-top:1px solid #c3e1e7;display:flex;justify-content:space-between;font-size:10px;color:#557b85}footer>span:last-child{font:9px monospace;letter-spacing:1px}footer>span:last-child span{font-size:14px;padding-left:12px;color:#0d94b0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){header{padding:19px 23px}.brand{font-size:22px}.brand-icon{font-size:30px}.private{font-size:0;gap:0}.private i{width:7px;height:7px}main{margin:24px auto 35px;padding:0 16px}h1{font-size:46px;letter-spacing:-2px}.intro{margin-bottom:25px}.intro p{font-size:12px}.eyebrow{font-size:9px}.editor-top{padding:19px 19px 8px}textarea{padding:15px 19px;font-size:24px;height:145px}.editor-bottom{padding:9px 19px 17px}.controls{padding:21px 18px}.style-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.style{height:70px}.style-glyph{font-size:24px}.corruption{margin-top:23px}.under-card{flex-direction:column;align-items:center;gap:8px}footer{margin:0 23px;padding-bottom:24px;font-size:9px}.desktop{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.chaos-row{display:flex;align-items:center;gap:18px}.chaos-slider{flex:1;min-width:0}.chaos-row .reroll{flex-shrink:0;padding:9px 13px}.chaos-slider .range-labels{gap:10px}.chaos-slider .range-labels span:last-child{text-align:right}

input[type=range]:disabled{opacity:.4;cursor:not-allowed}

.saved-actions{display:flex;gap:8px;margin-top:12px}.saved-actions:has(button:not([hidden])){min-height:32px}.saved-actions:has(button:not([hidden])) + .corruption{margin-top:18px}

.brand-icon{display:block;width:44px;height:44px;border-radius:50%;box-shadow:0 2px 6px #68421b18}.brand{gap:12px}body{background:#ffffff}@media(max-width:650px){.brand-icon{width:38px;height:38px;border-radius:50%}}

.editor-top{justify-content:flex-end}.under-card{justify-content:center}

/* Warm monkey-brown accents complement the turquoise controls. */
.section-heading h2{color:#75451f}
.style[aria-pressed=true]{background:#f6e7ce;border-color:#a36a32;box-shadow:inset 0 0 0 1px #a36a32;color:#633812}
.style[aria-pressed=true]:after{background:#935520}
.style:hover{border-color:#b98750}
.reroll{color:#75451f;border-color:#d7b997;background:#fff8ee}
.reroll:hover:not(:disabled){background:#f6e7ce}
#save-style,#delete-style{color:#75451f;border-color:#d7b997;background:#fff8ee}
.editor-top>span{color:#75451f;border-color:#e3c9a8;background:#fbefdc}

#clear{background:#fffdf8;border:1px solid #bddde2;border-radius:7px;padding:8px 11px;font-size:11px;line-height:normal;color:#356d7a}

.editor-top{justify-content:space-between;gap:12px;flex-wrap:wrap}.privacy-note{margin:0 0 0 auto;text-align:right;font-size:11px;line-height:1.5;color:#55747b}

.corruption .section-heading{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}.corruption .section-heading h2{grid-column:2;text-align:center}.corruption .section-heading #level-name{grid-column:3;justify-self:end}

.corruption .section-heading{display:flex;justify-content:flex-end;margin-bottom:8px}
.chaos-slider{position:relative;padding-top:12px}
.chaos-backdrop{position:absolute;top:0;left:0;right:0;margin:0;text-align:center;font-size:clamp(22px,4vw,36px);line-height:1.5;font-weight:600;color:#75451f;opacity:.2;pointer-events:none;user-select:none;white-space:nowrap}
.chaos-slider input{position:relative;z-index:1}
.chaos-slider .range-labels{position:relative;margin-top:23px}

.chaos-slider{padding-top:0}
.chaos-backdrop{top:19.5px;transform:translateY(-50%);line-height:1}
.chaos-slider .range-labels{margin-top:17px}
.chaos-actions{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}
.chaos-actions #level-name{font-size:10px;text-align:center}
.chaos-row{align-items:flex-start}

/* Separate painted track from the native range so text sits between track and thumb. */
.chaos-slider::before{content:"";position:absolute;left:0;right:0;top:17px;height:5px;border-radius:10px;background:linear-gradient(to right,#acd9df var(--chaos-progress,0%),#deedef var(--chaos-progress,0%));z-index:0;pointer-events:none}
.chaos-backdrop{z-index:1;opacity:1;color:#75451f}
.chaos-slider input[type=range]{background:transparent;z-index:2}
.chaos-slider input[type=range]::-webkit-slider-runnable-track{height:5px;background:transparent;border:0}
.chaos-slider input[type=range]::-webkit-slider-thumb{margin-top:-6px}
.chaos-slider input[type=range]::-moz-range-track{height:5px;background:transparent;border:0}
.chaos-slider input[type=range]::-moz-range-progress{background:transparent}
.chaos-slider:has(input:disabled)::before{opacity:.4}

.random-hint{margin:10px 0 0;color:#75451f;font-size:11px;line-height:1.5}

.saved-actions{align-items:center;min-height:32px}.saved-actions .random-hint{margin:0;font-size:10px;line-height:1.3}.saved-actions .small-button{flex-shrink:0}

/* A mixed palette makes Random Monkey distinct, even before selection. */
.style[data-style="random"]{
  background:linear-gradient(125deg,#bdeef3 0%,#d6e9fb 28%,#edddf5 52%,#f8ddbf 77%,#f8edbd 100%);
  border-color:#9fbcc5;
  color:#503019;
}
.style[data-style="random"]:hover{border-color:#956032}
.style[data-style="random"][aria-pressed=true]{
  background:linear-gradient(125deg,#8edee8 0%,#b9daf6 28%,#dcc0ec 52%,#f1c797 77%,#f5df92 100%);
  border-color:#75451f;
  box-shadow:inset 0 0 0 1px #75451f;
  color:#503019;
}

/* Keep the editor closer to the app header. */
header{padding-bottom:16px}
main{margin-top:8px}
@media(max-width:650px){header{padding-bottom:10px}main{margin-top:8px}}

.hashtag-option{display:flex;align-items:center;gap:7px;font-size:11px;color:#75451f;cursor:pointer}.hashtag-option input{accent-color:#087d99;width:16px;height:16px;margin:0}.action-row{align-items:center}.action-row .copy{min-width:120px}#copy-fallback[hidden]{display:none}#copy-fallback{margin-top:12px;border:1px solid #bddde2;border-radius:7px;font-size:16px;height:110px;min-height:80px}@media(max-width:360px){.action-row{flex-wrap:wrap}.hashtag-option{width:100%}}

.controls > .hashtag-option{justify-content:center;margin-top:12px;line-height:1.5}.controls > .hashtag-option input{flex-shrink:0}
.controls > .hashtag-option{color:#897969}

.inline-feedback{font-size:12px;color:#75451f;line-height:1.5;margin:12px 0 0}.inline-feedback:empty{display:none}

/* Full-height touch surface; keep the text between the track and thumb. */
.chaos-slider input[type=range]{height:44px;margin:0;cursor:pointer}
.chaos-slider::before{top:19.5px}
.chaos-backdrop{top:22px}
.chaos-slider input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-10.5px}
.chaos-slider input[type=range]::-moz-range-thumb{width:20px;height:20px}
.chaos-slider .range-labels{margin-top:4px}
#copy-toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#087d99;color:white;padding:12px 20px;border-radius:9px;box-shadow:0 4px 16px #0002;font-size:13px;z-index:10;pointer-events:none;white-space:nowrap}
#copy-toast[hidden]{display:none}

/* Neutral surfaces with teal outlines. */
.playground{background:#fff;border-color:#087d99}
.controls{background:#f4f4f3}
.editor-bottom{border-bottom-color:#087d99}
.style{background:#fafafa;border-color:#087d99}
.small-button,#clear{background:#fafafa;border-color:#087d99}
.reroll,#save-style,#delete-style{border-color:#087d99}
.editor-top>span{border-color:#087d99}
#copy-fallback{border-color:#087d99}
.saved-style-row{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 6px;margin-top:10px}
.saved-style-row[hidden]{display:none}
.saved-style-row .style{flex:0 0 86px}
@media(max-width:650px){
  header{padding:12px 20px 6px}
  main{margin:6px auto 16px;padding:0 14px}
  .editor-top{padding:10px 14px 4px}
  textarea#editor{height:112px;min-height:96px;padding:8px 14px;font-size:22px;line-height:1.4}
  .editor-bottom{padding:5px 14px 10px}
  .controls{padding:12px 14px}
  .section-heading{margin-bottom:9px}
  .style-grid{gap:6px}
  .style{height:58px;gap:4px}
  .style-glyph{font-size:23px}
  .saved-actions{margin-top:8px;min-height:32px}
  .corruption,.saved-actions:has(button:not([hidden])) + .corruption{margin-top:12px}
  .chaos-row{gap:10px}
  .action-row{margin-top:14px}
  .copy{min-height:44px;padding:11px}
  .controls > .hashtag-option{margin-top:8px;font-size:10px}
  .saved-style-row .style{flex-basis:76px}
}

.playground{position:relative}.editor-top{justify-content:space-between}.editor-bottom{align-items:center}.privacy-note{margin:0 0 0 auto;text-align:right;font-size:11px;line-height:1.4;color:#55747b}.editor-meta{display:none}.editor-top #clear{margin-left:auto}.chaos-slider .range-labels{display:none}

#styles{display:grid!important;visibility:visible!important;opacity:1!important}

/* Strong card boundary, quieter controls. */
.playground{border-color:#087d99}
.style,.small-button,#clear,.reroll,#save-style,#delete-style,#copy-fallback{border-color:#b7dfe4}
.editor-top>span{border-color:#b7dfe4}
.privacy-note{color:#8baeb3}

.privacy-note{font-style:italic}

.copyright{max-width:760px;margin:0 auto;padding:12px 24px 24px;text-align:center;color:#8baeb3;font-size:11px}
.copyright{display:flex;align-items:center;justify-content:space-between;gap:16px}
.copyright a{color:#55747b;text-underline-offset:3px}
.privacy-policy{color:#49301e;line-height:1.7}
.privacy-policy h1{font-size:32px;letter-spacing:-1px;line-height:1.2}
.privacy-policy h2{font-size:18px;margin:26px 0 8px}
.privacy-policy p{font-size:14px;margin:10px 0}
.privacy-policy a{color:#087d99}

/* Clip decorative ink locally, including Safari's combining-mark overflow. */
#brand-text{display:block;line-height:1.5;overflow:hidden;contain:paint;min-width:0}
.brand{min-width:0;max-width:100%}
.brand-icon{flex-shrink:0}
.chaos-backdrop{height:44px;line-height:44px;overflow:hidden;contain:paint}

/* The Monkey row extends sideways as presets are saved. */
.style-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.saved-style-row{gap:8px;margin-top:8px;padding:2px 0 6px;scroll-snap-type:x proximity}
.saved-style-row .style{flex:0 0 calc((100% - 24px)/4);min-width:0;scroll-snap-align:start}
.saved-placeholder{border:2px dotted #8ebdc5!important;background:transparent;color:#718d93;font-size:10px;cursor:default}
.saved-placeholder:hover{transform:none}
.style-scroll-wrap{position:relative;--row-button-height:78px}
.saved-style-row .style{height:var(--row-button-height)}
.style-scroll-arrow{position:absolute;top:calc(2px + var(--row-button-height)/2);transform:translateY(-50%);z-index:3;width:28px;height:44px;padding:0;border:1px solid #087d99;border-radius:8px;background:#fff;color:#087d99;font-size:28px;line-height:1;box-shadow:0 2px 8px #0002}
.style-scroll-arrow[hidden]{display:none}
.scroll-left{left:-12px}
.scroll-right{right:-12px}
@media(max-width:650px){
  .style-scroll-wrap{--row-button-height:58px}
  .style-grid{gap:6px}
  .saved-style-row{gap:6px;margin-top:6px}
  .saved-style-row .style{flex-basis:calc((100% - 18px)/4)}
}