HECK DRIVE

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>If I Sleep</title>
<!--
A deliberately long, sprawling single-file HTML page.
Paste this entire file into a new .html file and open it in your browser.
It will render the phrase: "if i sleep, can i dream of you?"

The file is intentionally verbose — lots of decorative CSS, a little JS
that constructs DOM nodes and sprinkles in some tiny animations.
Nothing here calls external services; everything is inline.
-->
<style>
/* ---------------------------------------------
Basic reset
--------------------------------------------- */
:root{
--bg:#0b0f14;
--card:#0f1720;
--glow: rgba(125,200,255,0.12);
--accent: #9be3ff;
--muted: #9aa6b2;
--glass: rgba(255,255,255,0.03);
--mono: "SFMono-Regular", Menlo, Monaco, "Roboto Mono", monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body{background: radial-gradient(1200px 700px at 15% 20%, rgba(20,30,50,0.6), transparent 8%), radial-gradient(800px 500px at 85% 85%, rgba(120,20,160,0.07), transparent 10%), var(--bg); color:#e9f2ff; -webkit-font-smoothing:antialiased;}

/* ---------------------------------------------
Page layout
--------------------------------------------- */
.stage{
min-height:100vh;
display:grid;
place-items:center;
padding:48px;
gap:20px;
}

.card{
width:min(980px,96vw);
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius:22px;
padding:48px;
box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 120px var(--glow);
position:relative;
overflow:hidden;
border: 1px solid rgba(255,255,255,0.04);
backdrop-filter: blur(6px) saturate(1.05);
}

.center-wrap{
display:flex;
align-items:center;
justify-content:center;
min-height:40vh;
flex-direction:column;
gap:22px;
text-align:center;
}

h1.phrase{
font-weight:700;
line-height:1.02;
font-size: clamp(28px, 6vw, 56px);
margin:0;
letter-spacing:-0.02em;
text-transform:lowercase;
filter: drop-shadow(0 6px 18px rgba(120,160,255,0.12));
position:relative;
z-index:4;
}

/* subtle multi-layered glow lines behind the text */
.phrase::before, .phrase::after{
content:'';position:absolute; inset:0; z-index:-1; border-radius:8px; pointer-events:none;
}
.phrase::before{background: linear-gradient(90deg, rgba(155,227,255,0.06), rgba(190,140,255,0.03)); transform:translateY(6px) scale(1.02); filter: blur(20px)}
.phrase::after{background: radial-gradient(circle at 40% 10%, rgba(255,255,255,0.02), transparent 10%); transform:translateY(12px) scale(1.03); filter: blur(36px)}

.sub{
color:var(--muted);
font-size:14px;
max-width:70ch;
margin:0 auto;
}

/* ---------------------------------------------
Decorative elements (sprawling CSS)
--------------------------------------------- */
.constellation{
position:absolute; inset: -10% -20% auto -20%; height:260px; z-index:1; pointer-events:none;
opacity:0.55; transform:translateY(-8%);
background-image: radial-gradient(circle at 10% 40%, rgba(255,255,255,0.02), transparent 2%), radial-gradient(circle at 60% 20%, rgba(160,220,255,0.03), transparent 6%);
mix-blend-mode:screen;
}

.floating-panel{
position:absolute; right:24px; top:24px; z-index:6; padding:10px 14px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03);
font-family:var(--mono); font-size:12px; color:var(--muted);
}

/* animated orbs */
.orb{
position:absolute; width:420px; height:420px; right:-12%; top:-6%; z-index:0; filter: blur(48px); opacity:0.12; transform: rotate(4deg);
background: conic-gradient(from 120deg at 50% 50%, rgba(140,200,255,0.12), rgba(210,150,255,0.08), rgba(140,200,255,0.12));
}

/* faint grid to make it messy */
.grid-overlay{
position:absolute; inset:0; background-image: linear-gradient(transparent 23px, rgba(255,255,255,0.012) 24px), linear-gradient(90deg, transparent 23px, rgba(255,255,255,0.012) 24px);
background-size: 24px 24px; mix-blend-mode:overlay; opacity:0.04; pointer-events:none;
}

/* footer-ish instruction */
footer.note{margin-top:18px; font-size:12px; color:var(--muted);}

/* little animated underline */
.underline{
height:6px; width:220px; border-radius:999px; margin:6px auto 0; background:linear-gradient(90deg, rgba(155,227,255,0.14), rgba(190,140,255,0.08));
animation: pulse 3.7s ease-in-out infinite;
}
@keyframes pulse{0%{opacity:0.35; transform:scaleX(0.95)}50%{opacity:1; transform:scaleX(1.02)}100%{opacity:0.35; transform:scaleX(0.95)}}

/* tiny responsiveness tweaks */
@media (max-width:520px){
.card{padding:22px;border-radius:14px}
.floating-panel{display:none}
}
</style>
</head>
<body>
<div class="stage">
<main class="card" role="main" aria-labelledby="phrase">
<div class="constellation" aria-hidden="true"></div>
<div class="orb" aria-hidden="true"></div>
<div class="grid-overlay" aria-hidden="true"></div>

<div class="center-wrap">

<h1 id="phrase" class="phrase">if i sleep, can i dream of you?</h1>
<p class="sub">A tiny page. A question that keeps its own small echo.</p>
<div class="underline" aria-hidden="true"></div>
<footer class="note">Hint: copy this page into a file named <code>dream.html</code> and open it in your browser.</footer>
</div>

<div class="floating-panel" aria-hidden="true">built with: a verbose single-file html + css + js</div>
</main>
</div>

(function(){
'use strict';

// tiny util belt
function el(tag, opts){
var d = document.createElement(tag);
if(opts){
if(opts.cls) d.className = opts.cls;
if(opts.html) d.innerHTML = opts.html;
if(opts.text) d.textContent = opts.text;
if(opts.attr){ for(var k in opts.attr) d.setAttribute(k, opts.attr[k]); }
}
return d;
}

// a frivolous array of 'noise' that we will use to create a faint shimmer
// around the phrase — purely decorative and performed on a timeout.
var shimmerWords = [
'sleep', 'dream', 'you', 'soft', 'far', 'near', 'quiet', 'echo', 'hush', 'still'
];

// create a gentle ring of floating words around the main phrase
function buildFloatingWords(){
var container = document.querySelector('.center-wrap');
if(!container) return;

var ring = el('div', {cls:'floating-words', html:''});
ring.style.position = 'absolute';
ring.style.inset = '0';
ring.style.pointerEvents = 'none';
ring.style.zIndex = '2';

shimmerWords.forEach(function(w,i){
var s = el('span', {cls:'fw', text:w});
s.style.position = 'absolute';
s.style.left = (20 + (i*13)) % 100 + '%';
s.style.top = (10 + (i*9)) % 70 + '%';
s.style.opacity = 0.06 + Math.random()*0.18;
s.style.fontFamily = 'var(--mono)';
s.style.fontSize = (10 + Math.floor(Math.random()*8)) + 'px';
s.style.transform = 'translate(-50%,-50%) rotate(' + (Math.random()*60-30) + 'deg)';
s.style.userSelect = 'none';
ring.appendChild(s);
});

container.appendChild(ring);

// subtle animation frame: just nudge positions slowly to feel 'alive'
var t = 0;
function tick(){
t += 0.0025;
var spans = ring.querySelectorAll('span');
for(var i=0;i<spans.length;i++){
var elSp = spans[i];
var r = 6 * Math.sin(t*(0.6 + i*0.02) + i);
elSp.style.transform = 'translate(-50%,-50%) rotate(' + (r) + 'deg)';
}
window.requestAnimationFrame(tick);
}
window.requestAnimationFrame(tick);
}

// small accessibility improvement: allow users to press 'd' to toggle
// a reduced-motion soft mode — this respects prefers-reduced-motion too.
var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function toggleSoftMode(){
document.documentElement.classList.toggle('soft-mode');
// apply a tiny change so it's visible
var card = document.querySelector('.card');
if(card) {
if(document.documentElement.classList.contains('soft-mode')){
card.style.transition = 'transform 0.5s ease, box-shadow 0.5s ease';
card.style.transform = 'translateY(6px)';
card.style.boxShadow = '0 6px 28px rgba(0,0,0,0.55)';
} else {
card.style.transform = '';
card.style.boxShadow = '';
}
}
}

// keyboard handler
window.addEventListener('keydown', function(e){
if(e.key === 'd' && (e.metaKey || e.ctrlKey)){
e.preventDefault();
toggleSoftMode();
}
});

// defensive: if JS runs twice, avoid adding duplicates
if(!document.querySelector('.floating-words')) buildFloatingWords();

// micro-analytics dummy: counts how many times the phrase was clicked locally
(function installClickCounter(){
var counter = 0;
var h = document.getElementById('phrase');
if(!h) return;
h.addEventListener('click', function(){
counter++;
h.style.transform = 'translateY(-3px) scale(1.005)';
setTimeout(function(){ h.style.transform = ''; }, 220);
// show a tiny ephemeral tooltip
var tip = el('div', {cls:'tip', html:'you clicked: ' + counter});
tip.style.position = 'fixed'; tip.style.bottom = '26px'; tip.style.left = '50%'; tip.style.transform = 'translateX(-50%)';
tip.style.padding = '8px 12px'; tip.style.borderRadius = '999px'; tip.style.background = 'rgba(255,255,255,0.03)'; tip.style.fontFamily = 'var(--mono)'; tip.style.fontSize='12px'; tip.style.color='var(--muted)'; tip.style.zIndex='1000';
document.body.appendChild(tip);
setTimeout(function(){ tip.remove(); }, 1100);
}, false);
})();

// final small flourish: if the user is on a touchscreen, slightly enlarge the type
if(('ontouchstart' in window) || navigator.maxTouchPoints > 0){
var p = document.querySelector('.phrase');
if(p){ p.style.fontSize = 'clamp(24px, 8vw, 64px)'; }
}

// Expose a tiny debugging function on window for tinkering
window.dreamPage = {
setPhrase: function(t){
var node = document.getElementById('phrase'); if(!node) return;
node.textContent = t;
},
getClicks: function(){
// best-effort: returns how many times the phrase was clicked (if the listener created a tip)
return 'no stable counter exposed';
}
};

})();
</script>

</body>
</html>