:root{font-family:Arial,Helvetica,sans-serif;color:#273d3b;background:#e8e3d6;font-size:16px;color-scheme:light;--paper:#fff8e9;--ink:#273d3b;--soft:#e5e5d6;--button:#345648;--buttonink:#fff8e9;--line:#809589}*{box-sizing:border-box}body{margin:0;color:var(--ink)}header{height:116px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 30px;background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:2}h1,h2,h3{font-family:Georgia,serif;font-weight:400}h1{font-size:34px;line-height:1;margin:0 0 7px}header p{font-size:15px;margin:0}label{display:grid;gap:7px;font-size:14px}select,button,textarea{font:15px Arial,sans-serif;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);padding:10px 13px;min-height:42px}button{cursor:pointer}button:hover{border-color:var(--ink)}button:focus-visible,select:focus-visible,canvas:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #ba612d;outline-offset:3px}button:disabled{opacity:1;background:var(--soft);color:var(--ink);cursor:default}select{min-width:205px}nav{display:flex;gap:7px;flex-wrap:wrap}main{position:relative;height:calc(100dvh - 116px);min-height:580px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.world-note{position:absolute;top:18px;right:20px;background:#fff8e9;color:#273d3b;padding:9px 13px;border-radius:6px;font-size:14px;pointer-events:none;box-shadow:0 2px 12px #162e2717}#story{position:absolute;left:30px;bottom:28px;width:375px;max-height:calc(100% - 50px);overflow:auto;background:var(--paper);color:var(--ink);padding:25px;border-radius:12px;border:1px solid var(--line);box-shadow:0 12px 40px #263c3629}.story-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}h2{font-size:32px;line-height:1.1;margin:18px 0 12px}#detail{line-height:1.55;font-size:16px;margin:0 0 20px}.story-actions,.scene-nav{display:flex;gap:8px;margin:12px 0}.story-actions button,.scene-nav button{flex:1}#stamp{background:var(--button);color:var(--buttonink);border-color:var(--button)}#reflect{width:100%;margin:0}.disclaimer{font-size:14px;line-height:1.45;margin:18px 0 0}dialog{border:1px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink);padding:26px;width:min(590px,calc(100% - 28px));max-height:85dvh}dialog::backdrop{background:#18332ccc}dialog h2{font-size:28px;margin-top:4px}dialog h3{font-size:23px}dialog p,dialog li{font-size:16px;line-height:1.6}dialog a{color:var(--ink);text-decoration:underline}#close{float:right;margin:0 0 14px 14px}#panel-content{clear:both}.source-note{font-size:14px!important}#panel-content form{display:grid;gap:14px}#panel-content select{width:100%;min-width:0}.reflection-card{padding:18px;background:var(--soft);border-radius:8px;margin-top:20px}#status{position:fixed;bottom:14px;left:50%;transform:translate(-50%);background:var(--paper);color:var(--ink);padding:10px 16px;font-size:14px;border-radius:6px;z-index:5;pointer-events:none;opacity:0}#status.show{opacity:1}.dark{--paper:#243f38;--ink:#fff4df;--soft:#345248;--button:#efd09e;--buttonink:#243f38;--line:#829e91;color-scheme:dark}#world{background:#a2b9b7}body[data-motion=paused] *{scroll-behavior:auto}@media(max-width:768px){header{height:190px;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}h1{font-size:29px}header p{font-size:14px}select{min-width:0;width:100%;max-width:180px}nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}nav button{padding:8px 4px;font-size:14px;min-height:42px}main{height:calc(100dvh - 190px);min-height:540px}canvas{position:absolute;inset:0 0 255px;height:calc(100% - 255px);width:100%}.world-note{top:10px;left:14px;right:auto;padding:7px 9px;font-size:14px}#story{left:0;right:0;bottom:0;max-height:255px;width:100%;padding:17px 18px;border-radius:12px 12px 0 0}h2{font-size:26px;margin:10px 0}#detail{font-size:15px;line-height:1.5;margin-bottom:12px}.story-actions,.scene-nav{margin:10px 0}.disclaimer,.story-top{font-size:14px}}@media(max-height:700px)and (min-width:769px){#story{padding:18px;width:340px}h2{font-size:28px}#detail{font-size:15px}}
