:root{
  --ink:#171518;--cream:#f7efe5;--paper:#fffaf3;--coral:#ee7f79;--pink:#ef6287;
  --purple:#7852a0;--lilac:#d9c7e6;--lime:#d9ef63;--blue:#b9dbe5;--tan:#c79b73;
  --gold:#d6a64a;--line:#171518;--muted:#73675d;
}
*{box-sizing:border-box}
html{background:#171518}
body{margin:0;background:var(--cream);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
input,textarea,select{font-size:16px}
#app{min-height:100vh;background:
  radial-gradient(circle at 10% 10%,rgba(255,255,255,.65),transparent 28%),
  radial-gradient(rgba(23,21,24,.05) .7px,transparent .7px),
  var(--cream);background-size:auto,7px 7px}

/* intro */
.intro{position:fixed;inset:0;z-index:1000;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:4vw;
  padding:max(28px,env(safe-area-inset-top)) 7vw max(28px,env(safe-area-inset-bottom));
  background:linear-gradient(108deg,var(--coral) 0 24%,var(--cream) 24% 74%,var(--blue) 74%);overflow:hidden;
  transition:opacity .45s ease,visibility .45s ease}
.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro:after{content:"";position:absolute;right:2%;bottom:4%;width:29%;height:22%;background:
  repeating-linear-gradient(-19deg,transparent 0 12px,rgba(23,21,24,.16) 12px 14px);clip-path:polygon(7% 0,100% 8%,92% 100%,0 85%)}
.intro-collage{position:relative;height:min(72vh,680px);min-height:470px;background:
  repeating-radial-gradient(ellipse at 48% 46%,#171518 0 1px,transparent 1px 7px);
  clip-path:polygon(4% 7%,91% 0,100% 81%,16% 100%,0 58%);filter:drop-shadow(11px 11px 0 var(--lime))}
.intro-eye{position:absolute;width:84%;left:7%;top:25%;transform:rotate(-3deg)}
.intro-bloom{position:absolute;width:45%;right:-7%;top:-4%;transform:rotate(10deg)}
.intro-map{position:absolute;left:7%;bottom:8%;background:var(--tan);border:3px solid var(--ink);padding:10px 13px;
  font:700 12px/1.8 Georgia,serif;letter-spacing:1px;transform:rotate(2deg)}
.intro-xoxo{position:absolute;right:2%;bottom:15%;font:italic 47px Georgia,serif;color:var(--pink);text-shadow:0 0 8px #fff;transform:rotate(-8deg)}
.intro-copy{position:relative;z-index:2}
.intro-label,.micro-label{font-size:11px;font-weight:900;letter-spacing:2px}
.intro-label{display:inline-block;background:var(--ink);color:#fff;padding:7px 11px;transform:rotate(-1deg)}
.intro-copy h1{font:italic clamp(58px,7vw,104px)/.88 Georgia,serif;letter-spacing:-4px;margin:22px 0 20px}
.intro-copy p{max-width:570px;font:20px/1.5 Georgia,serif;background:var(--paper);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--purple);padding:15px;margin:0 0 26px}
.intro-copy small{display:block;margin-top:17px;font:italic 14px Georgia,serif}
.editorial-btn{border:3px solid var(--ink);border-radius:0;background:var(--lime);padding:14px 18px;font-weight:900;box-shadow:7px 7px 0 var(--ink)}
.editorial-btn span{margin-left:15px}

/* top nav */
.topbar{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:10px max(12px,env(safe-area-inset-left));background:rgba(247,239,229,.94);backdrop-filter:blur(12px);
  border-bottom:3px solid var(--ink);box-shadow:0 5px 0 var(--coral)}
.wordmark{border:0;background:transparent;padding:0;text-align:left}
.wordmark span{display:block;font:italic 20px/.8 Georgia,serif}.wordmark b{font-size:16px;letter-spacing:-.5px}
nav{display:flex;gap:5px}.nav{border:2px solid transparent;background:transparent;padding:8px 10px;font-size:11px;font-weight:900;letter-spacing:.6px}
.nav.active{border-color:var(--ink);background:var(--ink);color:#fff;box-shadow:3px 3px 0 var(--coral)}
main{max-width:1120px;margin:auto;padding:16px}.view{display:none}.view.active{display:block}
.paper{background:rgba(255,250,243,.98);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);position:relative}

/* today hero */
.today-hero{display:grid;grid-template-columns:1fr 1.25fr .6fr;align-items:center;min-height:250px;position:relative;overflow:hidden;
  background:linear-gradient(110deg,var(--coral) 0 25%,var(--cream) 25% 77%,var(--blue) 77%);border:3px solid var(--ink)}
.today-hero:after{content:"TOKYO  ·  KHARTOUM  ·  LONDON";position:absolute;right:1%;bottom:5%;background:var(--tan);border:2px solid var(--ink);
  padding:7px 10px;font:700 10px Georgia;transform:rotate(-2deg)}
.hero-art{position:relative;padding:12px;z-index:1}.hero-art svg{width:100%;filter:drop-shadow(6px 6px 0 var(--lime));transform:rotate(-3deg)}
.stamp{position:absolute;right:4%;top:8%;border:2px solid var(--ink);padding:6px;text-align:center;font-size:9px;font-weight:900;transform:rotate(7deg);background:var(--paper)}
.hero-type{text-align:center;position:relative;z-index:2}.script{font:italic 30px Georgia,serif;color:var(--purple)}
.hero-type h1{font:900 62px/.82 "Arial Narrow",Impact,Arial,sans-serif;letter-spacing:-3px;margin:3px 0 13px}
.hero-type h1 em{font-family:Georgia,serif;font-weight:400;color:var(--pink);background:var(--ink);padding:0 9px}
.hero-type p{display:inline-block;background:var(--ink);color:white;padding:8px 13px;font:italic 14px Georgia,serif;transform:rotate(-1deg)}
.hero-flower{font-size:112px;color:var(--purple);filter:drop-shadow(5px 5px 0 var(--ink));transform:rotate(8deg);z-index:1}

/* daily reveal */
.daily-card{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin:22px 8px 25px;padding:19px 20px;background:
  linear-gradient(118deg,var(--paper) 0 73%,var(--lime) 73%);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(-.15deg)}
.daily-card:before{content:"";position:absolute;left:4%;top:-12px;width:100px;height:24px;background:rgba(185,219,229,.8);transform:rotate(-4deg)}
.daily-message h2{font:italic 29px/1.1 Georgia,serif;margin:6px 0}.daily-message p{margin:0;color:var(--muted);line-height:1.45}
.energy-wrap{display:flex;flex-direction:column;justify-content:center}.energy{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.energy button{border:2px solid var(--ink);background:var(--paper);padding:8px 11px;font-size:12px;font-weight:900;box-shadow:3px 3px 0 var(--ink)}
.energy button.selected{background:var(--purple);color:#fff;box-shadow:3px 3px 0 var(--lime)}

/* meta */
.day-meta{display:grid;grid-template-columns:1.25fr .75fr .75fr auto;gap:12px;align-items:end;padding:14px;margin-bottom:18px}
.day-meta label span,.line-fields label span,.text-field span{display:block;font-size:11px;font-weight:900;letter-spacing:.8px;margin-bottom:4px}
.day-meta input,.line-fields input,.text-field input,.journey-controls input,.journey-controls select{
  width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:8px 5px;outline:none}
.saved{background:var(--lime);border:2px solid var(--ink);padding:8px 11px;font-weight:900;font-size:12px}

/* panels */
.today-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:18px}
.panel{padding:19px;margin-bottom:18px}.panel-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.section-no{display:grid;place-items:center;min-width:40px;height:40px;background:var(--ink);color:#fff;font-weight:900;box-shadow:3px 3px 0 var(--coral)}
.panel-head h2{font:italic 25px/1 Georgia,serif;margin:0}.panel-head p{font-size:12px;color:var(--muted);margin:5px 0 0}
.tape{position:absolute;top:-11px;right:9%;width:82px;height:23px;transform:rotate(3deg);opacity:.8}.tape-lilac{background:var(--lilac)}.tape-coral{background:#f3a9a4}
.rating{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 0;border-bottom:1px dashed #9c8e82}.rating:last-child{border-bottom:0}
.rating b{font-size:13px}.rating small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.scale{display:flex;gap:6px}.scale label{font-size:9px;text-align:center;font-weight:800}.scale input{display:block;width:20px;height:20px;margin:3px auto 0;accent-color:var(--purple)}
.routine-label{display:inline-block;margin:8px 0 2px;padding:5px 8px;font-size:11px;font-weight:900;border:2px solid var(--ink)}
.morning-label{background:#f8d4dc}.night-label{background:var(--lilac);margin-top:16px}
.step{display:grid;grid-template-columns:31px 1fr 28px;gap:9px;align-items:center;padding:10px 0;border-bottom:1px dashed #a3978c}.step:last-child{border-bottom:0}
.n{width:28px;height:28px;display:grid;place-items:center;background:var(--coral);color:#fff;font-weight:900;box-shadow:2px 2px 0 var(--ink);transform:rotate(-3deg)}.night .n{background:var(--purple)}
.step b{font-size:13px}.step small{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.3}.step input{width:22px;height:22px;accent-color:var(--coral)}.night input{accent-color:var(--purple)}
.notes-panel{min-height:480px}.scribble{position:absolute;right:10px;top:-16px;font:italic 17px Georgia;color:var(--pink);transform:rotate(-7deg)}
textarea{width:100%;min-height:260px;border:2px dashed var(--ink);background:linear-gradient(#fffaf3,#faf0e5);padding:13px;resize:vertical;outline:none}
.line-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}.line-fields label{font-size:11px;font-weight:900}
.toggle{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed #a3978c;font-size:13px;font-weight:700}
.toggle input{position:absolute;opacity:0}.toggle i{width:46px;height:25px;border:2px solid var(--ink);background:#e7ddd3;position:relative}.toggle i:after{content:"";position:absolute;width:17px;height:17px;left:2px;top:2px;background:var(--ink);transition:.18s}
.toggle input:checked+i{background:var(--lime)}.toggle input:checked+i:after{left:23px}
.text-field{display:block;margin-top:13px}.photo-head{display:flex;justify-content:space-between;align-items:end;margin-top:20px}.photo-head h3{font:italic 21px Georgia;margin:0}.photo-head span{font-size:10px;color:var(--muted)}
.photo{height:235px;margin-top:8px;border:3px dashed var(--ink);display:grid;place-items:center;position:relative;overflow:hidden;background:
  linear-gradient(145deg,var(--paper) 0 72%,var(--blue) 72%)}
.photo input{position:absolute;inset:0;opacity:0}.photo img{max-width:100%;max-height:100%;display:none}.photo>span{text-align:center;font-size:13px;font-weight:800}.photo>span b{display:block;font-size:38px;font-weight:400}.photo>span small{display:block;color:var(--muted);font-weight:400;margin-top:4px}
.closing-note{margin:3px 12px 25px;text-align:center}.closing-note span{display:inline-block;background:var(--pink);border:2px solid var(--ink);padding:5px 9px;font-size:10px;font-weight:900;transform:rotate(-2deg)}.closing-note p{font:italic 20px Georgia,serif;margin:8px 0}

/* journey */
.journey-hero{position:relative;text-align:center;padding:37px 20px 31px;margin-bottom:20px;background:
  linear-gradient(105deg,var(--coral) 0 23%,var(--cream) 23% 73%,var(--blue) 73%);border:3px solid var(--ink);overflow:hidden}
.journey-hero:before{content:"✿";position:absolute;left:4%;top:-20px;font-size:105px;color:var(--purple);transform:rotate(-13deg);filter:drop-shadow(4px 4px 0 var(--ink))}
.journey-hero h1{font:900 66px/.78 "Arial Narrow",Impact,Arial,sans-serif;letter-spacing:-3px;margin:2px 0 15px}.journey-hero p{max-width:520px;margin:auto;background:var(--ink);color:#fff;padding:8px 12px;font:italic 14px Georgia}
.journey-map{position:absolute;right:2%;top:10%;background:var(--tan);border:2px solid var(--ink);padding:8px;font:700 10px Georgia;transform:rotate(3deg)}
.journey-xoxo{position:absolute;right:4%;bottom:2%;font:italic 31px Georgia;color:var(--pink);transform:rotate(-8deg)}
.journey-controls{display:grid;grid-template-columns:2fr .7fr .8fr auto auto;gap:8px;padding:13px;margin-bottom:15px}.journey-controls input,.journey-controls select{border:2px solid var(--ink);padding:9px;background:var(--paper)}
.small-btn{border:2px solid var(--ink);background:var(--ink);color:#fff;padding:9px 10px;font-size:10px;font-weight:900;text-align:center}.import-btn input{display:none}
.journey-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:20px}.stat{padding:14px;text-align:center}.stat:nth-child(1){background:#f6d5dc}.stat:nth-child(2){background:#e2d6ec}.stat:nth-child(3){background:#e3eebb}.stat>span{position:absolute;left:8px;top:6px;font-size:9px;font-weight:900}.stat b{display:block;font-size:31px}.stat small{font-size:11px}
.monthGroup{margin:22px 0}.monthTitle{display:inline-block;background:var(--blue);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 12px;font:italic 25px Georgia;transform:rotate(-1deg)}
.entries{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}.entry{padding:14px;cursor:pointer;min-height:130px}.entry:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.entryTop{display:flex;justify-content:space-between;gap:10px}.entry h3{margin:0;font:700 17px Georgia}.badge{background:var(--lime);border:1px solid var(--ink);padding:4px 7px;font-size:10px;font-weight:900}.entry p{font-size:12px;color:var(--muted);white-space:pre-wrap}.thumb{width:76px;height:76px;object-fit:cover;border:2px solid var(--ink);float:right;margin-left:10px}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* routine guide */
.routine-hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;padding:28px;background:
  linear-gradient(112deg,var(--coral) 0 21%,var(--cream) 21% 74%,var(--blue) 74%);border:3px solid var(--ink);margin-bottom:20px}
.routine-hero h1{font:900 67px/.8 "Arial Narrow",Impact,Arial,sans-serif;letter-spacing:-3px;margin:3px 0}.routine-hero p{display:inline-block;background:var(--ink);color:#fff;padding:8px 12px;font:italic 14px Georgia}
.routine-hero svg{width:240px;justify-self:center;filter:drop-shadow(5px 5px 0 var(--pink));transform:rotate(8deg)}
.routine-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.guide{padding:20px}.guide-title{display:flex;align-items:center;gap:10px;border-bottom:3px solid var(--ink);padding-bottom:10px}.guide-title span{font-size:28px}.guide-title h2{font:900 25px Arial;margin:0}
.guide ol{counter-reset:steps;list-style:none;margin:9px 0 0;padding:0}.guide li{counter-increment:steps;position:relative;padding:12px 0 12px 45px;border-bottom:1px dashed #9f9287}.guide li:last-child{border-bottom:0}.guide li:before{content:counter(steps);position:absolute;left:0;top:11px;width:29px;height:29px;display:grid;place-items:center;background:var(--coral);color:#fff;font-weight:900;box-shadow:2px 2px 0 var(--ink)}
.night-guide li:before{background:var(--purple)}.guide b{font-size:13px}.guide small{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:3px}.guide strong{color:#a93f5c}
.schedule-strip{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin:19px 0;padding:13px;background:var(--lime);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.schedule-strip .label{font-size:10px;font-weight:900;background:var(--ink);color:#fff;padding:7px}.schedule-strip div{text-align:center}.schedule-strip b,.schedule-strip small{display:block}.schedule-strip small{font-size:10px}.schedule-strip i{font-style:normal;font-size:22px}.routine-footnote{text-align:center;font:italic 16px Georgia;margin:20px}

/* mobile */
@media(max-width:780px){
  .intro{grid-template-columns:1fr;padding:calc(18px + env(safe-area-inset-top)) 19px calc(22px + env(safe-area-inset-bottom));gap:8px}
  .intro-collage{height:38vh;min-height:260px}.intro-eye{top:18%;width:78%;left:10%}.intro-bloom{width:36%;right:-3%}.intro-map{font-size:8px;bottom:3%}.intro-xoxo{font-size:31px}
  .intro-copy h1{font-size:55px;margin:13px 0}.intro-copy p{font-size:17px;padding:11px;margin-bottom:18px}
  main{padding:10px}.topbar{gap:8px}.wordmark span{font-size:17px}.wordmark b{font-size:13px}.nav{font-size:9px;padding:7px 6px}
  .today-hero{grid-template-columns:1fr;min-height:340px;padding:15px;background:linear-gradient(155deg,var(--coral) 0 16%,var(--cream) 16% 83%,var(--blue) 83%)}
  .hero-art{position:absolute;left:-5%;top:0;width:47%;opacity:.27}.hero-flower{position:absolute;right:-5%;top:-6%;font-size:84px;opacity:.9}.hero-type{z-index:3}.hero-type h1{font-size:53px}.today-hero:after{font-size:8px}
  .daily-card{grid-template-columns:1fr;margin:20px 4px 25px;padding:17px}.daily-message h2{font-size:25px}
  .day-meta{grid-template-columns:1fr 1fr}.saved{grid-column:1/-1;justify-self:start}
  .today-grid{grid-template-columns:1fr}.panel{margin-bottom:17px}.notes-panel{min-height:auto}textarea{min-height:210px}.line-fields{grid-template-columns:1fr}.photo{height:260px}
  .journey-hero h1{font-size:52px}.journey-map{font-size:7px}.journey-controls{grid-template-columns:1fr 1fr}.journey-controls input[type=search]{grid-column:1/-1}.small-btn{font-size:9px}
  .entries{grid-template-columns:1fr}.routine-hero{grid-template-columns:1fr;padding:20px}.routine-hero h1{font-size:55px}.routine-hero svg{width:175px}.routine-guide-grid{grid-template-columns:1fr}
  .schedule-strip{grid-template-columns:1fr}.schedule-strip i{transform:rotate(90deg);text-align:center}
}
@media print{
  .intro,.topbar{display:none!important}body,#app{background:#fff}.view{display:none!important}#routine.view{display:block!important}
  main{max-width:none;padding:0}.paper{box-shadow:none}.routine-guide-grid{grid-template-columns:1fr 1fr}.schedule-strip{box-shadow:none}
}

/* illustrated application map */
.application-map{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:center;padding:20px;margin:20px 0;background:linear-gradient(115deg,var(--paper) 0 68%,#f2dbe4 68%)}
.map-copy h2{font:italic 29px Georgia,serif;margin:6px 0 9px}.map-copy p{font-size:12px;line-height:1.55;color:var(--muted)}
.amount-chips{display:flex;flex-direction:column;gap:7px;margin-top:13px}.amount-chips span{display:inline-block;width:max-content;max-width:100%;background:var(--lime);border:2px solid var(--ink);padding:7px 9px;font-size:11px;box-shadow:3px 3px 0 var(--ink)}.amount-chips b{margin-right:6px}
.face-illustration{text-align:center}.face-illustration svg{width:min(100%,330px);filter:drop-shadow(5px 5px 0 rgba(23,21,24,.16))}.face-illustration small{display:block;font-size:9px;color:var(--muted);line-height:1.4}
.buffer-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lime);border:1px solid var(--ink)}
@media(max-width:780px){.application-map{grid-template-columns:1fr;padding:17px}.face-illustration svg{width:300px;max-width:100%}}

/* V5 waiting timers */
.wait-timer{position:fixed;inset:0;z-index:900;display:none;place-items:center;padding:22px;background:rgba(23,21,24,.62);backdrop-filter:blur(5px)}
.wait-timer.show{display:grid}
.wait-timer-card{width:min(92vw,390px);background:var(--paper);border:3px solid var(--ink);box-shadow:9px 9px 0 var(--coral);padding:24px;text-align:center}
.wait-timer-card h2{font:italic 27px Georgia,serif;margin:8px 0 5px}
.wait-timer-clock{font:900 62px/1 "Arial Narrow",Impact,Arial,sans-serif;letter-spacing:1px;margin:12px 0}
.wait-timer-card p{font-size:13px;color:var(--muted);line-height:1.45;min-height:38px}
.wait-timer-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.wait-timer-actions button{border:2px solid var(--ink);background:var(--paper);padding:11px;font-weight:900;box-shadow:3px 3px 0 var(--ink)}
.wait-timer-actions button:first-child{background:var(--lime)}
.step .timer-btn{border:2px solid var(--ink);background:var(--lime);padding:5px 7px;font-size:10px;font-weight:900;box-shadow:2px 2px 0 var(--ink);margin-top:5px}
.step>div{min-width:0}
.guide li .guide-timer{display:inline-block;margin-top:7px;border:2px solid var(--ink);background:var(--lime);padding:5px 7px;font-size:10px;font-weight:900;box-shadow:2px 2px 0 var(--ink)}
@media(max-width:780px){.wait-timer-clock{font-size:55px}}

/* V12 intro sound sign */
.sound-sign{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:3px solid var(--ink);
  border-radius:0;
  background:var(--blue);
  color:var(--ink);
  padding:9px 13px;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.2px;
  box-shadow:5px 5px 0 var(--ink);
  transform:rotate(-1deg);
}
.sound-sign.off{background:var(--paper);color:var(--muted)}
.sound-icon{
  width:24px;height:24px;
  display:grid;place-items:center;
  background:var(--ink);color:#fff;
  font-size:15px;line-height:1;
}
@media(max-width:780px){
  .sound-sign{margin-top:15px}
}