/* Experiments — a quiet Program Manager desktop; every experiment lives in its own RawmWare.OS window. */
body{height:auto;min-height:100%;overflow:auto;font-family:'Courier New',monospace;background:#fff;color:#111}
body.has-maximized{overflow:hidden}
.desktop-bar{position:absolute;inset:0 0 auto;z-index:3;display:flex;justify-content:space-between;gap:16px;background:#111;color:#fff;padding:9px 20px;font-size:12px;letter-spacing:1px}
.site-header{top:53px;left:38px;right:38px;align-items:center}.brand span{font-family:'Times New Roman',serif;font-size:26px;letter-spacing:-1px}.brand img{width:42px;height:42px}.menu-toggle{width:56px;height:56px}
.menu-panel{font-family:'Courier New',monospace}.nav-item{font-size:28px;padding:16px 0}
.lab{max-width:1600px;margin:auto;padding:150px 38px 110px}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:40px}
.lab-list{list-style:none;padding:0;display:grid;gap:12px}.lab-list a{text-decoration:underline}
.lab-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:8px;border-top:1px solid #111;font-size:10px;letter-spacing:.3px}.lab-footer a{color:#666;text-decoration:underline}

/* Window shell — the approved RawmWare.OS chrome. */
.window{position:relative;display:flex;flex-direction:column;height:420px;min-width:0;background:#000;color:#fff;font:700 14px "Times New Roman",Times,serif;border:4px solid #000;outline:2px solid #000;outline-offset:3px;overflow:hidden}
.window:after{content:"";position:absolute;z-index:20;inset:0;border:2px solid #000;pointer-events:none}
.window.focused{animation:border-flash .18s steps(1,end) infinite,border-breathe .7s ease-in-out infinite alternate}
.window.focused:after{animation:inner-flash .18s steps(1,end) infinite,inner-breathe .7s ease-in-out infinite alternate}
.window:focus-visible{outline-color:#0065e5}
.window.dragging{opacity:.72;z-index:30}
.window.minimized{height:auto;min-height:0}.window.minimized .content{display:none}
.window.closed{display:none}
.window.maximized{position:fixed;inset:64px 24px 72px;z-index:60;height:auto;outline-offset:3px;transform:none!important}
.titlebar{height:34px;flex:0 0 34px;background:linear-gradient(110deg,#888782,#d8cdb7,#a3a19a,#e3d8c2,#8d8b86);background-size:400% 100%;animation:title-fade 2.8s ease-in-out infinite;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 5px 4px 9px;user-select:none;-webkit-user-select:none;cursor:grab;touch-action:none;font:700 14px "Times New Roman",Times,serif}
.titlebar>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.window.maximized .titlebar{cursor:default}
.title-controls{display:flex;gap:3px;flex-shrink:0}
.title-controls button,.status button,.open-link{border:2px outset #b8b2a7;border-radius:0;background:#c7c0b2;color:#000;text-shadow:none;font:700 12px "Times New Roman",Times,serif;cursor:pointer;line-height:1}
.title-controls button{width:24px;height:23px;padding:0}
.title-controls button:active,.status button:active,.open-link:active{border-style:inset}
.content{min-height:0;flex:1;display:flex;flex-direction:column}
.viewport{position:relative;min-height:0;flex:1;background:#050506;overflow:hidden}
.viewport iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050506}
.subtitle{position:absolute;z-index:4;bottom:14px;left:16px;right:16px;text-align:center;color:#e32e42;text-shadow:0 0 10px #c71934,1px 1px #000;letter-spacing:1px;pointer-events:none}
.subtitle-en{min-height:22px;font:700 clamp(12px,1.4vw,16px)/1.4 "Times New Roman",Times,serif}
.subtitle-jp{min-height:16px;margin-top:1px;font:700 clamp(10px,1.1vw,12px)/1.4 "Times New Roman",Times,serif}
.cursor{display:inline-block;width:.56em;height:1.05em;background:#e32e42;vertical-align:-.12em;animation:blink 1s steps(1) infinite}
.status{height:34px;flex:0 0 34px;background:#000;border-top:2px solid #aaa;color:#fff;display:flex;align-items:center;gap:6px;padding:4px;font-size:11px}
.status-message{flex:1;min-width:0;border:2px inset #777;padding:4px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status button,.open-link{height:24px;padding:0 10px;display:inline-flex;align-items:center;white-space:nowrap}

/* Taskbar — one button per window; click to open, restore, or jump to it. */
.taskbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 38px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #111}
.tasks{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.task{flex:0 0 auto;min-height:34px;padding:6px 10px;border:2px outset #ddd;background:#ddd;color:#111;font:700 11px 'Courier New',monospace;white-space:nowrap}
.task:before{content:'▣';margin-right:6px;font-size:10px}
.task.is-min:before{content:'_'}.task.is-closed:before{content:'×'}
.task.is-closed{background:#fff;color:#666}
.task.is-focused{border-style:inset;background:#c7c0b2}
.task:hover{background:#111;color:#fff}
#motionToggle{font-size:11px;border:1px solid #111;min-height:34px;padding:6px 12px;border-radius:0;background:#fff;pointer-events:auto}
body.motion-paused .titlebar,body.motion-paused .cursor,body.motion-paused .window.focused,body.motion-paused .window.focused:after{animation-play-state:paused}

@keyframes blink{50%{opacity:0}}
@keyframes title-fade{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes border-flash{0%,49%{border-color:#000;outline-color:#000}50%,100%{border-color:#fff;outline-color:#fff}}
@keyframes border-breathe{from{outline-offset:3px;outline-width:2px}to{outline-offset:10px;outline-width:6px}}
@keyframes inner-flash{0%,49%{border-color:#000}50%,100%{border-color:#fff}}
@keyframes inner-breathe{from{inset:0;border-width:2px}to{inset:8px;border-width:6px}}

@media(min-width:1500px){.lab{padding-top:170px}.window{height:460px}}
@media(max-width:1050px){.lab{padding-left:24px;padding-right:24px}.taskbar{padding-left:24px;padding-right:24px}}
@media(max-width:780px){.desktop-bar{font-size:9px;padding:9px 12px;letter-spacing:0}.desktop-bar span:last-child{display:none}.site-header{top:44px;left:16px;right:16px}.lab{padding:124px 16px 96px}.lab-grid{gap:30px}.window{height:clamp(300px,64dvh,460px)}.window.maximized{inset:52px 8px 60px}.subtitle{bottom:10px}.taskbar{padding:6px 12px calc(6px + env(safe-area-inset-bottom));gap:6px}.task{font-size:10px;padding:6px 8px}#motionToggle{font-size:10px;padding:6px 8px}.lab-footer{font-size:9px}}
@media(pointer:coarse){.titlebar{height:44px;flex-basis:44px}.title-controls button{width:38px;height:34px}.status{height:46px;flex-basis:46px}.status button,.open-link{height:36px}}
@media(prefers-reduced-motion:reduce){.cursor,.titlebar,.window.focused,.window.focused:after{animation:none}.window.focused{outline-color:#fff;border-color:#000}.window.focused:after{border-color:#fff}}
[hidden]{display:none!important}