*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Segoe UI",Arial,sans-serif;color:#405f58;background:radial-gradient(circle at 8% 18%,rgba(255,226,202,.72),transparent 30%),radial-gradient(circle at 86% 12%,rgba(207,236,255,.78),transparent 32%),radial-gradient(circle at 72% 82%,rgba(215,244,228,.70),transparent 34%),linear-gradient(135deg,#fff8ee 0%,#f3fbf7 48%,#eef7ff 100%);background-attachment:fixed}body{padding:12px}#app{max-width:1500px;margin:auto}header,.card{background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.48));border:1px solid rgba(255,255,255,.92);border-radius:24px;box-shadow:0 12px 30px rgba(80,90,100,.11),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%)}
header{height:58px;position:relative;padding:7px 14px;margin-bottom:10px}.brand{position:absolute;left:14px;top:8px}.brand b{display:block;font-size:17px}.brand span{font-size:13px}.titleInHeader{position:absolute;left:31%;top:6px;width:43%;height:46px}.titleInHeader label{position:absolute;left:0;top:0;width:80px;font-size:13px;margin:0}.titleInHeader input{position:absolute;left:82px;right:0;top:0;width:calc(100% - 82px);height:40px;padding:6px 10px}.titleInHeader+button,header>button{position:absolute;right:14px;top:10px;padding:7px 11px}
main{position:relative;height:625px}.card{padding:12px}.scriptCard{position:absolute;left:0;top:0;width:68.5%;height:405px}.recorderCard{position:absolute;right:0;top:0;width:30%;height:405px}.timelineCard{position:absolute;left:0;top:415px;width:100%;height:210px;padding:9px 10px}
label{font-weight:700;display:block;margin:2px 0 6px}input,textarea,button,.fileButton{
  border:1px solid rgba(255,255,255,.98);
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.96) 52%,rgba(244,249,248,.94) 100%);
  color:#405f58;
  padding:7px 10px;
  cursor:pointer;
  font-weight:650;
  box-shadow:
    0 7px 16px rgba(70,96,91,.16),
    0 2px 4px rgba(70,96,91,.10),
    inset 0 2px 1px rgba(255,255,255,1),
    inset 0 -2px 3px rgba(183,204,199,.16);
  text-shadow:0 1px 0 rgba(255,255,255,.95);
  transition:transform .10s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;
}
button:not(:disabled):hover,.fileButton:hover{
  background:#fff;
  box-shadow:
    0 9px 19px rgba(70,96,91,.18),
    0 3px 5px rgba(70,96,91,.10),
    inset 0 2px 1px #fff,
    inset 0 -2px 3px rgba(183,204,199,.14);
}
button:not(:disabled):active,.fileButton:active{
  transform:translateY(2px) scale(.985);
  border-color:rgba(255,224,232,.98);
  background:linear-gradient(180deg,#fff 0%,#fff9fb 55%,#fff2f6 100%);
  box-shadow:
    0 0 0 4px rgba(255,225,233,.32),
    0 0 18px rgba(255,218,229,.34),
    0 2px 5px rgba(70,96,91,.12),
    inset 0 2px 5px rgba(244,201,214,.12);
}
button:disabled{opacity:.42;cursor:default}.status{height:42px}.status span{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef6f3;font-size:14px}.status strong{float:right;font-size:22px}.buttons{white-space:normal;margin:8px 0}.buttons button{margin:4px 7px 4px 0;padding:7px 10px;font-size:15px}.small button{padding:6px 9px;font-size:14px}audio{width:100%;height:36px;margin:8px 0}.markRow{position:relative;padding-right:86px;margin-top:9px}.markRow input{height:38px;font-size:14px}.markRow button{position:absolute;right:0;top:0;width:78px;height:38px;padding:5px 7px;font-size:14px}
.timelineTools{height:39px;white-space:nowrap;overflow:hidden}.timelineTools>*{display:inline-block;margin:1px 5px 2px 0}.timelineTools b{font-size:15px}.timelineTools button,.timelineTools .fileButton{padding:5px 8px;font-size:13px;border-radius:11px}.fileButton{font-weight:650}.fileButton input{display:none}#selectedInfo{font-size:12px;color:#647773;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}#timelineScroll{width:100%;height:136px;overflow-x:auto;overflow-y:hidden;border:1px solid #aabdb8;border-radius:12px;background:rgba(255,255,255,.72);touch-action:pan-x}#timeline{position:relative;width:1800px;min-width:100%;height:122px}#ruler{position:absolute;left:0;top:0;height:28px;width:100%;border-bottom:1px solid #91a8a2;background:repeating-linear-gradient(to right,transparent 0,transparent 59px,#91a8a2 60px)}.tick{position:absolute;top:4px;font-size:11px;transform:translateX(3px)}.lane{position:absolute;left:0;width:100%;height:47px;border-bottom:1px solid #d0dcd9}.laneLabel{position:sticky;left:5px;top:4px;z-index:2;font-size:10px;font-weight:800;background:rgba(255,255,255,.82);padding:1px 4px;border-radius:5px}.lane#imageLane{top:28px}.lane#soundLane{top:75px;border-bottom:0}.marker{position:absolute;top:3px;transform:translateX(-50%);cursor:grab;user-select:none;touch-action:none;border:2px solid transparent;border-radius:8px}.marker.selected{border-color:#4c756a}.imageMarker{width:42px;height:42px;object-fit:contain;background:white}.soundMarker{width:38px;height:38px;line-height:32px;text-align:center;font-size:21px;background:white}.wordMarker{display:none}.markerTime{display:block;font-size:8px;line-height:8px;text-align:center}.hint{margin:4px 2px 0;font-size:11px}.timingCard{margin-top:10px}.timingHead button{float:right;margin-left:7px;padding:5px 9px}pre{white-space:pre-wrap;font:14px/1.45 Consolas,monospace;margin:8px 0 0}#playhead{position:absolute;top:0;bottom:0;width:2px;background:#d64b4b;left:0;z-index:5;pointer-events:none}
@media(max-width:900px){body{padding:8px}header{height:100px}.brand{top:8px}.titleInHeader{left:14px;top:49px;width:75%}header>button{top:54px}main{height:900px}.scriptCard{left:0;top:0;width:100%;height:430px}.scriptCard textarea{height:372px}.timelineCard{left:0;top:440px;width:100%;height:210px}.recorderCard{left:0;right:auto;top:660px;width:100%;height:240px}.status strong{font-size:20px}}
.tracksMessage{margin-top:6px;font-size:12px;color:#647773;min-height:16px}

#timingSheet{white-space:pre-wrap;font:14px/1.45 Consolas,monospace;margin:8px 0 0}.timingLine{width:max-content;max-width:100%;padding:1px 4px;border-radius:4px;cursor:pointer}.timingLine:hover{background:rgba(76,117,106,.10)}.timingLine.selectedTiming{background:rgba(76,117,106,.18);outline:1px solid #4c756a}.timingTotal{white-space:pre-wrap}

.recorderHelp{margin-top:10px;padding:9px 12px;font-size:13px;line-height:1.35}.recorderHelp b{font-size:13px}.recorderHelp p{margin:4px 0}.creativeFootnote{margin:7px 12px 2px;text-align:center;font-size:10px;line-height:1.25;color:#6f7f7b}.creativeFootnote strong{letter-spacing:.03em}


/* Storybook Voices — clear menthol lozenge buttons */
button,.fileButton{
  border:1px solid rgba(255,255,255,.90) !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,
    rgba(255,255,255,.84) 0%,
    rgba(255,255,255,.54) 42%,
    rgba(246,252,251,.40) 70%,
    rgba(224,239,235,.48) 100%) !important;
  color:#405f58;
  box-shadow:
    0 8px 15px rgba(66,91,86,.15),
    0 2px 4px rgba(66,91,86,.10),
    inset 0 2px 2px rgba(255,255,255,.98),
    inset 0 -2px 4px rgba(121,159,150,.16) !important;
  backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%);
  text-shadow:0 1px 0 rgba(255,255,255,.95);
  transition:transform .10s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;
}
button:not(:disabled):hover,.fileButton:hover{
  background:linear-gradient(180deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.60) 43%,
    rgba(247,253,252,.44) 72%,
    rgba(226,241,237,.52) 100%) !important;
  box-shadow:
    0 10px 18px rgba(66,91,86,.17),
    0 3px 5px rgba(66,91,86,.10),
    inset 0 2px 2px #fff,
    inset 0 -2px 4px rgba(121,159,150,.14) !important;
}
button:not(:disabled):active,.fileButton:active{
  transform:translateY(2px) scale(.985);
  border-color:rgba(255,235,241,.98) !important;
  background:linear-gradient(180deg,
    rgba(255,255,255,.90) 0%,
    rgba(255,249,251,.68) 48%,
    rgba(255,240,245,.58) 100%) !important;
  box-shadow:
    0 0 0 4px rgba(255,226,234,.25),
    0 0 18px rgba(255,217,228,.28),
    0 2px 5px rgba(66,91,86,.11),
    inset 0 2px 5px rgba(236,190,204,.13) !important;
}


/* Storybook Voices — keep writing fields separate from Luden's buttons */
textarea{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:100% !important;
  min-height:300px !important;
  padding:14px !important;
  border:1px solid rgba(145,174,166,.72) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.66) !important;
  box-shadow:inset 0 1px 3px rgba(80,100,96,.06),0 1px 0 rgba(255,255,255,.9) !important;
  color:inherit !important;
  resize:vertical;
  overflow:auto !important;
}

/* Cue/note stays a glass field, but wide enough to read */
#cueNote,
input[placeholder*="Story cue"],
input[placeholder*="note at this moment"]{
  min-width:330px !important;
  width:100% !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(247,252,251,.58)) !important;
  box-shadow:
    0 5px 12px rgba(66,91,86,.10),
    inset 0 2px 2px rgba(255,255,255,.96),
    inset 0 -2px 3px rgba(121,159,150,.10) !important;
}

/* FINAL STORY SCRIPT + CUE FIELD REPAIR */
#storyScript{
  display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:347px !important;
  min-height:347px !important;
  max-height:347px !important;
  padding:14px 16px !important;
  resize:none !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  font-family:"Segoe UI",Arial,sans-serif !important;
  font-size:18px !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  color:#263b37 !important;
  text-shadow:none !important;
  cursor:text !important;
}
#markerNote{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:38px !important;
  font-size:14px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(247,252,251,.58)) !important;
  box-shadow:0 5px 12px rgba(66,91,86,.10),inset 0 2px 2px rgba(255,255,255,.96),inset 0 -2px 3px rgba(121,159,150,.10) !important;
}
@media(max-width:900px){#storyScript{height:372px !important;min-height:372px !important;max-height:372px !important}}

/* Storybook Voices — Story Script medium visible scrollbar */
#storyScript {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: auto;
    scrollbar-color: rgba(64,95,88,.58) rgba(255,255,255,.48);
    resize: none !important;
}

#storyScript::-webkit-scrollbar {
    width: 14px;
}

#storyScript::-webkit-scrollbar-track {
    background: rgba(255,255,255,.48);
    border-radius: 999px;
}

#storyScript::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(116,151,143,.66),
        rgba(64,95,88,.56)
    );
    border: 3px solid rgba(255,255,255,.72);
    border-radius: 999px;
    min-height: 42px;
}

#storyScript::-webkit-scrollbar-thumb:hover {
    background: rgba(64,95,88,.72);
}