*{box-sizing:border-box}body{margin:0;background:#18342e;background-image:radial-gradient(ellipse at 50% 20%,#36564c,transparent 75%);color:#162e28;font-family:Arial,sans-serif;min-height:100svh}main{width:min(100% - 22px,414px);margin:20px auto 24px;padding-top:14px}.machine{position:relative;border:4px ridge #deded8;border-radius:9px 9px 22px 22px;padding:9px;background:linear-gradient(105deg,#e1e3df,#fafaf3 40%,#c5ccc6);box-shadow:0 16px 35px #071a1980, inset 0 0 0 1px #7e8981}.stipple{background-color:#dee1d7;background-image:radial-gradient(#626f63 .6px,transparent .9px);background-size:3px 3px;text-align:center}header{padding:20px 0 16px}h1{font-family:'Arial Narrow',Arial,sans-serif;font-weight:400;font-size:clamp(26px,7vw,35px);letter-spacing:3px;margin:0 0 9px;display:inline-block;background:#e6e9df;padding:1px 5px}header p{font-size:10px;letter-spacing:1.7px;margin:0;background:#e6e9df;display:table;margin:auto;padding:3px}.face{overflow-x:auto;overscroll-behavior-x:contain;border:2px solid #20392e;margin-top:12px;background:#faf7e8}svg{width:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}svg .column:focus{outline:none}svg .column:focus-visible .focus-frame{stroke:#bd8d37;stroke-width:2}svg text{pointer-events:none;font-family:Georgia,serif;font-weight:bold}#mode{border:0;background:#f7f6e9;width:100%;padding:12px 0 10px;font-size:16px;letter-spacing:3px;color:#163e36;cursor:pointer}footer{padding:12px 12px 14px}#status{font-size:13px;line-height:1.4;background:#e6e9df;margin:10px 0 0;padding:8px 10px;min-height:54px;text-align:center;border:1px solid #9aa99a;border-radius:3px}.utilities{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #b68629;outline-offset:3px}.utilities button{background:#e6e9df;border:1px solid #87958b;border-radius:3px;font-size:12px;padding:5px 12px;color:#1b3c31}button:disabled{opacity:.5;cursor:default}.clear-space{height:15px;position:relative;z-index:1}#clear{position:absolute;bottom:-3px;left:5%;width:90%;height:36px;border:0;background:transparent;touch-action:none;cursor:ns-resize;padding:0;transition:transform .1s}#clear span{display:block;height:15px;border:3px ridge #dbe0dd;border-radius:50% 50% 3px 3px;background:linear-gradient(#b2bdb7,#fff,#a5afa8);box-shadow:0 2px 2px #0006}#instructions{background:#f2f0e4;padding:18px 22px;margin-top:16px;border-radius:6px;font-size:14px;line-height:1.55}h2{font-size:17px;margin-top:0}.version{text-align:center;font-size:9px;letter-spacing:1.5px;color:#c4d2c6;margin-top:18px}@media(max-width:360px){main{width:calc(100% - 12px);margin-top:15px}.machine{padding:6px}header{padding:12px 0}#mode{font-size:14px}footer{padding:7px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#selection-bubble{position:fixed;z-index:20;pointer-events:none;user-select:none;-webkit-user-select:none;width:44px;height:48px;border:1px solid #f6e2b3;border-radius:10px;background:#173e34;color:#fff7df;box-shadow:0 3px 9px #0005;text-align:center;font:bold 30px/46px Georgia,serif;transform:translate(-50%,-100%)}
#selection-bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:#173e34;border-right:1px solid #f6e2b3;border-bottom:1px solid #f6e2b3;transform:translateX(-50%) rotate(45deg)}
#selection-bubble[hidden]{display:none}

header .clear-label{display:block;width:max-content;margin:-10px auto 10px;padding:2px 8px;font-size:10px;line-height:1.4;letter-spacing:2px;color:#254638;background:#e6e9df;border-radius:2px;pointer-events:none}

.machine.setting .face{border-color:#ad873e}.machine.setting #status{border-color:#ad873e;background:#f0e7ce}.machine.setting #set-start{background:#19473c;color:#fff8e5}


/* The instruction leaflet is the machine's reverse, not an expanding page. */
.flip-stage{position:relative;perspective:1200px}
.flip-inner{position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.flip-stage.flipped .flip-inner{transform:rotateY(180deg)}
.machine-front,.machine-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
#instructions.machine-back{
 position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;
 margin:0;padding:14px 17px 18px;transform:rotateY(180deg);
 background:linear-gradient(110deg,#e6e7df,#f7f5e9 42%,#d2d8ce);
 display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;touch-action:pan-y
}
.back-top{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #929f91;padding-bottom:8px;margin-bottom:9px}
#instructions h2{margin:0;font-family:Georgia,serif;font-size:20px;letter-spacing:1.3px}
#instructions h3{font-size:16px;margin:6px 0 8px}
#instructions p{margin:8px 0;line-height:1.5}
#back{flex-shrink:0;border:1px solid #7b8f81;border-radius:4px;padding:8px;background:#19473c;color:#fff9e7;font-size:12px}
.flip-stage.flipped + .version{margin-top:18px}
.clear-space.instructions-open{visibility:hidden}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}


/* Quiet, single-line operating guide. Keep status useful for carry messages. */
#status{font-size:12px;min-height:34px;padding:7px 9px;margin-top:7px;border-color:#a9b5a9;background:#e8eadf}
.stroke-guide{display:flex;justify-content:center;align-items:center;gap:19px;margin:5px 0 0;padding:4px 4px;color:#244135;font:bold 13px/1.25 Arial,sans-serif;letter-spacing:.5px}
#red-direction{color:#a23d30}
#cream-direction{color:#244135}
.guide-separator{color:#82998c;font-weight:400}

/* Original single-label mode control with tactile button affordance. */
#mode{
  display:block;
  width:100%;
  margin-top:9px;
  padding:12px 8px 10px;
  min-height:49px;
  border:2px solid #879d90;
  border-bottom:4px solid #6f8779;
  border-radius:6px;
  background:linear-gradient(180deg,#fffff4 0%,#eeefe3 54%,#d9e0d5 100%);
  box-shadow:0 3px 4px #142b2445,inset 0 1px 0 #fff;
  color:#163e36;
  font:600 16px/1.2 Arial,sans-serif;
  letter-spacing:2px;
  text-align:center;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .08s ease,box-shadow .08s ease,border-bottom-width .08s ease,background .08s ease;
  -webkit-tap-highlight-color:transparent;
}
#mode:active:not(:disabled){
  transform:translateY(2px);
  border-bottom-width:2px;
  background:linear-gradient(180deg,#dde7d9,#edf0e2);
  box-shadow:inset 0 2px 5px #163e3635,0 1px 2px #142b242f;
}
#mode:disabled{opacity:.55;cursor:default}
@media(max-width:360px){.stroke-guide{gap:12px;font-size:12px}#mode{font-size:14px;letter-spacing:1.5px}}
@media(prefers-reduced-motion:reduce){#mode{transition:none}}