:root{
 --myoi-bg:#06131a;--myoi-ink:#eef9f5;--myoi-sub:#9fb8b1;--myoi-line:rgba(187,238,220,.16);
 --myoi-accent:#b9ffcb;--myoi-panel:#0a1d20;
}
*{box-sizing:border-box}
html{background:var(--myoi-bg)}
body.myoi-page{margin:0;background:
 radial-gradient(70% 50% at 50% 0,rgba(17,78,74,.18),transparent 70%),var(--myoi-bg);
 color:var(--myoi-ink);font-family:Inter,"Noto Sans TC","PingFang TC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.myoi-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:42px 0 80px}
.myoi-poster{
 --tone-top:#0548b8;--tone-mid:#0da7ef;--tone-horizon:#ffb18f;
 position:relative;width:min(680px,100%);aspect-ratio:4/7;margin:0 auto;overflow:hidden;border-radius:34px;
 background:linear-gradient(180deg,var(--tone-top) 0%,var(--tone-mid) 57%,#9fcfff 75%,var(--tone-horizon) 91%,#2356c7 100%);
 box-shadow:0 35px 120px rgba(0,0,0,.36),0 0 0 1px rgba(193,245,226,.11);
 isolation:isolate;
}
.myoi-poster[data-tone="calm"]{--tone-top:#0647bd;--tone-mid:#0b9feb;--tone-horizon:#ffb18f}
.myoi-poster[data-tone="alert"]{--tone-top:#074ccf;--tone-mid:#12b4f1;--tone-horizon:#ffd38f}
.myoi-poster[data-tone="tense"]{--tone-top:#201f72;--tone-mid:#5d48b8;--tone-horizon:#c66a86}
.myoi-poster[data-tone="fatigued"]{--tone-top:#25395e;--tone-mid:#6c86a6;--tone-horizon:#b68da6}
.myoi-poster[data-tone="heavy"]{--tone-top:#27324c;--tone-mid:#596a83;--tone-horizon:#9a8585}
.myoi-poster[data-tone="recovering"]{--tone-top:#0751a7;--tone-mid:#0aaea9;--tone-horizon:#ffc18f}
.myoi-fallback{position:absolute;inset:0;background:linear-gradient(180deg,var(--tone-top),var(--tone-mid) 57%,#b9ddff 77%,var(--tone-horizon) 91%,#2556c9);transition:background .6s ease}
.myoi-fallback:before{content:"";position:absolute;left:0;right:0;bottom:-2%;height:15%;border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,rgba(255,226,178,.88),rgba(43,88,206,.98));filter:blur(.2px)}
.myoi-fallback:after{content:"";position:absolute;left:50%;top:29%;bottom:9%;width:1px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.38) 55%,rgba(255,226,176,.8));box-shadow:0 0 14px rgba(255,255,255,.34)}
.myoi-fallback i{position:absolute;left:50%;top:28.8%;width:11px;height:27px;transform:translate(-50%,-50%);border-radius:50% 50% 45% 45%;background:rgba(255,255,255,.96);box-shadow:0 0 24px rgba(255,255,255,.85)}
.myoi-fallback b{position:absolute;left:50%;bottom:8.2%;width:9px;height:9px;transform:translateX(-50%);border-radius:50%;background:#fff8d8;box-shadow:0 0 36px 22px rgba(255,211,137,.52)}
#myoiSceneImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .7s ease}
#myoiSceneImage.is-ready{opacity:1}
.myoi-poster-veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(2,16,46,.08),transparent 35%,rgba(0,28,66,.02) 65%,rgba(9,19,57,.16));pointer-events:none}
.myoi-poster-top,.myoi-poster-center,.myoi-poster-foot{position:absolute;z-index:3;color:#fff;text-shadow:0 2px 18px rgba(1,15,39,.3)}
.myoi-poster-top{left:7.5%;right:7.5%;top:5%;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:clamp(10px,1.7vw,14px);letter-spacing:.18em}
.myoi-poster-top strong{font-weight:600}.myoi-poster-top span{opacity:.8}
.myoi-poster-center{left:8%;right:8%;top:42%;text-align:center;font-family:"Songti TC","Noto Serif TC","Noto Serif CJK TC","Yu Mincho","Hiragino Mincho ProN",serif}
.myoi-poster-center p{margin:0 0 7px;font-size:clamp(25px,5vw,42px);letter-spacing:.08em}
.myoi-poster-center h1{margin:0;font-family:inherit;font-size:clamp(76px,16vw,136px);font-weight:500;line-height:1;letter-spacing:.07em}
.myoi-poster-center span{display:block;margin-top:14px;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;font-size:clamp(24px,4.4vw,38px);letter-spacing:.18em}
.myoi-poster-foot{left:7.5%;right:7.5%;bottom:4.7%;display:flex;justify-content:space-between;gap:20px;align-items:end;font-size:clamp(9px,1.5vw,12px);letter-spacing:.12em}
.myoi-poster-foot b{font-size:.92em;font-weight:500;text-align:right}
.myoi-generation{position:absolute;z-index:4;left:50%;bottom:10%;transform:translateX(-50%);padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(3,20,44,.25);backdrop-filter:blur(12px);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.78);transition:opacity .3s}
.myoi-generation.is-hidden{opacity:0;pointer-events:none}
.myoi-controls{display:flex;justify-content:space-between;align-items:end;gap:28px;width:min(900px,100%);margin:34px auto 0;padding:0 4px}
.myoi-controls>div:first-child{max-width:600px}
.myoi-kicker{margin:0 0 8px;color:var(--myoi-accent);font-size:10px;letter-spacing:.17em}
.myoi-controls h2{margin:0;font-size:clamp(24px,3.4vw,35px);font-weight:560;letter-spacing:-.03em;line-height:1.2}
.myoi-controls p:not(.myoi-kicker){margin:10px 0 0;color:var(--myoi-sub);font-size:13px;line-height:1.8}
.myoi-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.myoi-btn{appearance:none;border:1px solid rgba(183,236,218,.2);border-radius:999px;background:rgba(7,27,28,.74);color:#def7ee;text-decoration:none;padding:10px 15px;font:600 12px/1 system-ui,-apple-system,sans-serif;cursor:pointer}
.myoi-btn:hover{border-color:rgba(185,255,203,.5);background:rgba(18,55,48,.86)}
.myoi-btn-primary{background:var(--myoi-accent);border-color:var(--myoi-accent);color:#0c261d}
.myoi-details{width:min(900px,100%);margin:20px auto 0;border-top:1px solid var(--myoi-line);border-bottom:1px solid var(--myoi-line);padding:16px 4px}
.myoi-details summary{cursor:pointer;color:#d8ebe4;font-size:13px;list-style:none}
.myoi-details summary::-webkit-details-marker{display:none}.myoi-details summary:after{content:"＋";float:right;color:#83ac9f}.myoi-details[open] summary:after{content:"−"}
.myoi-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.myoi-details-grid div{border:1px solid var(--myoi-line);border-radius:13px;padding:13px;background:rgba(10,29,32,.55)}
.myoi-details-grid span,.myoi-details-grid strong{display:block}.myoi-details-grid span{font-size:9px;letter-spacing:.12em;color:#7f9d94}.myoi-details-grid strong{margin-top:5px;font-size:12px;font-weight:550;color:#dbeee8;line-height:1.6}
.myoi-details>p{margin:14px 0 0;color:#809d94;font-size:11px;line-height:1.8}
.myoi-share-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px;background:rgba(1,8,10,.82);backdrop-filter:blur(16px)}
.myoi-share-overlay[hidden]{display:none}
.myoi-share-dialog{position:relative;width:min(520px,100%);max-height:94vh;overflow:auto;padding:22px;border:1px solid var(--myoi-line);border-radius:24px;background:#07191c;box-shadow:0 40px 120px #0008}
.myoi-share-close{position:absolute;right:12px;top:9px;border:0;background:none;color:#a5c7bd;font-size:28px;cursor:pointer}
.myoi-share-dialog h2{margin:0;font-size:25px}.myoi-share-note{margin:7px 0 14px;color:#8ea9a1;font-size:11px}
#myoiSharePreview{display:block;width:min(360px,100%);aspect-ratio:4/5;object-fit:cover;margin:0 auto;border-radius:20px}
.myoi-share-status{text-align:center;min-height:20px;margin-top:10px;color:#8fcab8;font-size:10px}
.myoi-share-platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.myoi-share-platforms button,.myoi-share-actions button{appearance:none;border:1px solid var(--myoi-line);border-radius:11px;padding:11px 8px;background:#0b292a;color:#e5f8f1;font:600 11px/1 system-ui,-apple-system,sans-serif;cursor:pointer}
.myoi-share-actions{display:flex;gap:7px;margin-top:7px}.myoi-share-actions button{flex:1}.myoi-share-actions .is-danger{color:#e3b5b7;background:#25161a;border-color:rgba(225,151,156,.2)}
@media(max-width:760px){
 .myoi-shell{width:min(100% - 18px,680px);padding:16px 0 55px}
 .myoi-poster{border-radius:24px}
 .myoi-controls{display:block;margin-top:22px;padding:0 5px}.myoi-actions{justify-content:flex-start;margin-top:16px}
 .myoi-details-grid{grid-template-columns:1fr}
 .myoi-poster-foot b{max-width:45%}
}
@media(max-width:520px){
 .myoi-poster{border-radius:20px}
 .myoi-poster-center{top:43%}.myoi-poster-center h1{font-size:clamp(70px,21vw,104px)}
 .myoi-poster-center p{font-size:clamp(22px,7vw,32px)}
 .myoi-poster-center span{font-size:clamp(20px,5.5vw,28px)}
 .myoi-poster-top{font-size:9px}.myoi-poster-foot{font-size:8px}
 .myoi-share-platforms{grid-template-columns:1fr 1fr}
 .myoi-share-actions{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){#myoiSceneImage,.myoi-generation{transition:none}}

.myoi-btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.55);transform:none!important}.myoi-btn:disabled:hover{border-color:rgba(183,236,218,.2);background:rgba(7,27,28,.74);color:#def7ee}


/* scene v1.3 · vertical controls */
.myoi-controls{
  display:block!important;
  width:min(680px,100%)!important;
  margin:28px auto 0!important;
  padding:0 4px!important;
}
.myoi-controls>div:first-child{max-width:none!important}
.myoi-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  margin-top:20px!important;
  justify-content:stretch!important;
}
.myoi-btn{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:14px;
  padding:13px 16px;
  text-align:left;
}
.myoi-details{width:min(680px,100%)!important}
@media(max-width:760px){
  .myoi-controls{width:min(100% - 10px,680px)!important}
}